/* /Components/Admin/CoachingView.razor.rz.scp.css */
.coaching__toolbar[b-qh007yai5g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.coaching__toolbar[b-qh007yai5g]  .coaching__search {
    max-width: 360px;
    flex: 1 1 240px;
}

.coaching__list[b-qh007yai5g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coaching-team[b-qh007yai5g] {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: var(--admin-surface-soft);
    padding: 10px 14px;
}

.coaching-team--open[b-qh007yai5g] {
    border-color: var(--admin-border-strong);
}

.coaching-team__row[b-qh007yai5g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.coaching-team__toggle[b-qh007yai5g] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.coaching-team__toggle:hover[b-qh007yai5g],
.coaching-team__toggle:focus-visible[b-qh007yai5g] {
    background: rgb(var(--aug-400-rgb) / 0.12);
}

.coaching-team__rank[b-qh007yai5g] {
    min-width: 2.5rem;
    font-family: var(--font-mono);
    color: var(--color-silver-400);
}

.coaching-team__name[b-qh007yai5g] {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 0;
}

.coaching-team__name a[b-qh007yai5g] {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.coaching-team__name a:hover[b-qh007yai5g] {
    text-decoration: underline;
}

.coaching-team__name small[b-qh007yai5g] {
    color: var(--color-silver-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coaching-team__facts[b-qh007yai5g] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-silver-300);
}

.coaching-team__facts > span[b-qh007yai5g] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.coaching-team__notes[b-qh007yai5g] {
    color: var(--aug-300);
}

.coaching-team__no-notes[b-qh007yai5g] {
    color: #ffca28;
}

.coaching-team__ai-flags[b-qh007yai5g] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--mud-palette-warning);
    text-decoration: none;
}

.coaching-team__ai-flags--critical[b-qh007yai5g] {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.coaching-team__latest[b-qh007yai5g] {
    margin: 6px 0 0 44px;
    font-size: 0.875rem;
    color: var(--color-silver-300);
}

.coaching-team__latest span[b-qh007yai5g] {
    color: var(--color-silver-400);
}

.coaching-team__notes-log[b-qh007yai5g] {
    margin: 10px 0 4px 44px;
}

@media (max-width: 600px) {
    .coaching-team__latest[b-qh007yai5g],
    .coaching-team__notes-log[b-qh007yai5g] {
        margin-left: 0;
    }
}

@media print {
    .coaching__toolbar[b-qh007yai5g],
    .coaching-team__toggle[b-qh007yai5g],
    .coaching-team[b-qh007yai5g]  .coaching-team__open {
        display: none !important;
    }

    .coaching-team[b-qh007yai5g] {
        break-inside: avoid;
        background: none;
        border-color: #999;
    }
}
/* /Components/Admin/TeamAiUsagePanel.razor.rz.scp.css */
/* Everything sits under ::deep: most of it is inside MudBlazor components or the breakdown table. */

.ai-usage[b-3561ujusxs]  .ai-usage__flags {
    display: grid;
    gap: 10px;
}

.ai-usage[b-3561ujusxs]  .ai-flag {
    padding: 14px 16px;
    border: 1px solid var(--admin-border);
    border-left: 4px solid var(--mud-palette-info);
    border-radius: 14px;
    background: var(--admin-surface-soft);
}

.ai-usage[b-3561ujusxs]  .ai-flag--warning {
    border-left-color: var(--mud-palette-warning);
}

.ai-usage[b-3561ujusxs]  .ai-flag--critical {
    border-left-color: var(--mud-palette-error);
    background: linear-gradient(90deg, rgb(244 67 54 / 0.1), transparent 40%), var(--admin-surface-soft);
}

.ai-usage[b-3561ujusxs]  .ai-flag--reviewed {
    opacity: 0.6;
}

.ai-usage[b-3561ujusxs]  .ai-flag__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.ai-usage[b-3561ujusxs]  .ai-flag__type {
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
}

.ai-usage[b-3561ujusxs]  .ai-flag__meta {
    color: var(--color-silver-400);
    font-size: 0.85rem;
}

.ai-usage[b-3561ujusxs]  .ai-flag__detail {
    margin-top: 6px;
}

.ai-usage[b-3561ujusxs]  .ai-flag__prompt {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--admin-border-strong);
    border-radius: 0 8px 8px 0;
    color: var(--color-silver-300);
    background: rgb(0 0 0 / 0.18);
    font-size: 0.9rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-usage[b-3561ujusxs]  .ai-flag__review {
    display: block;
    margin-top: 8px;
    color: var(--color-silver-400);
}

.ai-usage[b-3561ujusxs]  .ai-flag__note {
    margin-top: 10px;
    max-width: 640px;
}

.ai-usage[b-3561ujusxs]  .ai-flag__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

.ai-usage[b-3561ujusxs]  .ai-usage__stats {
    margin-bottom: 16px !important;
}

/* Read-outs, not links: no lift on hover. */
.ai-usage[b-3561ujusxs]  .ai-usage__stats .admin-stat:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.ai-usage[b-3561ujusxs]  .ai-usage__stats .admin-stat__label {
    grid-column: 2;
}

.ai-usage[b-3561ujusxs]  .ai-usage__stat--bad .admin-stat__icon {
    color: var(--mud-palette-error);
    background: rgb(244 67 54 / 0.14);
}

.ai-usage[b-3561ujusxs]  .ai-usage__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-usage[b-3561ujusxs]  .ai-usage__legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-silver-400);
    font-size: 0.8rem;
}

.ai-usage[b-3561ujusxs]  .ai-usage__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-radius: 3px;
    background: var(--aug-400);
}

.ai-usage[b-3561ujusxs]  .ai-usage__swatch--failed {
    background: var(--mud-palette-error);
}

.ai-usage[b-3561ujusxs]  .ai-usage__chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--admin-border);
}

.ai-usage[b-3561ujusxs]  .ai-usage__bar {
    position: relative;
    flex: 1 1 0;
    min-width: 2px;
    height: 100%;
}

.ai-usage[b-3561ujusxs]  .ai-usage__bar:hover {
    background: rgb(var(--aug-600-rgb) / 0.08);
}

.ai-usage[b-3561ujusxs]  .ai-usage__bar-fill,
.ai-usage[b-3561ujusxs]  .ai-usage__bar-failed {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 3px 3px 0 0;
}

.ai-usage[b-3561ujusxs]  .ai-usage__bar-fill {
    background: linear-gradient(180deg, var(--aug-300), rgb(var(--aug-600-rgb) / 0.7));
}

.ai-usage[b-3561ujusxs]  .ai-usage__bar-failed {
    background: var(--mud-palette-error);
}

.ai-usage[b-3561ujusxs]  .ai-usage__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--color-silver-400);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.ai-usage[b-3561ujusxs]  .ai-usage__table-card {
    height: 100%;
    overflow-x: auto;
}

.ai-usage[b-3561ujusxs]  .ai-usage__table {
    background: transparent;
}

/* The calls list scrolls inside its card instead of stretching the page; the header stays put. */
.ai-usage[b-3561ujusxs]  .ai-usage__calls {
    max-height: 520px;
    overflow: auto;
}

.ai-usage[b-3561ujusxs]  .ai-usage__calls thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}

/* MudSimpleTable wraps the table in its own scroll container, which would stop the header sticking. */
.ai-usage[b-3561ujusxs]  .ai-usage__calls .mud-table-container {
    overflow: visible;
}

.ai-usage[b-3561ujusxs]  .ai-usage__table th,
.ai-usage[b-3561ujusxs]  .ai-usage__table td {
    vertical-align: middle;
}

.ai-usage[b-3561ujusxs]  .ai-usage__num {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.ai-usage[b-3561ujusxs]  .ai-usage__nowrap {
    white-space: nowrap;
}

.ai-usage[b-3561ujusxs]  .ai-usage__tools {
    max-width: 260px;
    color: var(--color-silver-400);
    font-size: 0.8rem;
}

.ai-usage[b-3561ujusxs]  .ai-usage__bad {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.ai-usage[b-3561ujusxs]  .ai-usage__row--problem td {
    background: rgb(244 67 54 / 0.07);
}

.ai-usage[b-3561ujusxs]  .ai-usage__row--detail td {
    padding-top: 0 !important;
    color: var(--color-silver-400);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
    background: rgb(244 67 54 / 0.07);
}

.ai-usage[b-3561ujusxs]  .ai-usage__row--selected td {
    background: rgb(var(--aug-600-rgb) / 0.16);
}
/* /Components/Admin/TeamDetailView.razor.rz.scp.css */
.team-detail__header[b-xw1ksg62q6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 2px 20px;
}

.team-detail__meta[b-xw1ksg62q6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

/* The stat tiles here are read-outs, not links: no lift on hover. */
.team-detail[b-xw1ksg62q6]  .team-detail__stats .admin-stat:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.team-detail[b-xw1ksg62q6]  .team-detail__stats {
    margin-bottom: 16px !important;
}

.team-detail__filter[b-xw1ksg62q6] {
    margin-top: 16px;
}

/* No arrow here, so keep the label under its value instead of in the arrow's column. */
.team-detail[b-xw1ksg62q6]  .team-detail__stats .admin-stat__label {
    grid-column: 2;
}

.team-detail__tabs[b-xw1ksg62q6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding: 6px;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface-soft);
}

.team-detail__tab[b-xw1ksg62q6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--color-silver-300);
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.team-detail__tab:hover[b-xw1ksg62q6] {
    border-color: var(--admin-border);
    background: rgb(var(--aug-600-rgb) / 0.1);
}

.team-detail__tab:focus-visible[b-xw1ksg62q6] {
    outline: 2px solid var(--aug-300);
    outline-offset: 2px;
}

.team-detail__tab--active[b-xw1ksg62q6] {
    border-color: var(--admin-border-strong);
    color: var(--color-white);
    background: linear-gradient(90deg, rgb(var(--aug-700-rgb) / 0.44), rgb(var(--aug-600-rgb) / 0.12));
    box-shadow: inset 3px 0 0 var(--aug-400), 0 0 24px rgb(var(--aug-600-rgb) / 0.12);
}

.team-detail__tab--active[b-xw1ksg62q6]  .mud-icon-root {
    color: var(--aug-300);
}

.team-detail__tab-count--alarm[b-xw1ksg62q6] {
    color: var(--color-white) !important;
    background: var(--mud-palette-error) !important;
}

.team-detail__tab-count[b-xw1ksg62q6] {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0;
    text-align: center;
    color: var(--aug-200, var(--aug-300));
    background: rgb(var(--aug-600-rgb) / 0.22);
}
/* /Components/Admin/TeamNotesLog.razor.rz.scp.css */
.team-notes__composer[b-r084m6ds5q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.team-notes--dense .team-notes__composer[b-r084m6ds5q] {
    margin-bottom: 8px;
}

.team-notes__composer-row[b-r084m6ds5q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.team-notes__composer-row[b-r084m6ds5q]  .team-notes__puzzle-select {
    max-width: 320px;
    flex: 1 1 220px;
}

.team-notes__empty[b-r084m6ds5q] {
    opacity: 0.7;
}

.team-notes__list[b-r084m6ds5q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-note[b-r084m6ds5q] {
    border: 1px solid var(--admin-border);
    border-left: 3px solid var(--aug-300);
    background: var(--admin-surface-soft);
    border-radius: 8px;
    padding: 8px 12px;
}

.team-note--migrated[b-r084m6ds5q] {
    border-left-color: rgba(255, 152, 0, 0.7);
}

.team-note__meta[b-r084m6ds5q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.82rem;
}

.team-note__time[b-r084m6ds5q] {
    color: var(--color-silver-400);
}

.team-note__actions[b-r084m6ds5q] {
    margin-left: auto;
    display: inline-flex;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.team-note:hover .team-note__actions[b-r084m6ds5q],
.team-note:focus-within .team-note__actions[b-r084m6ds5q] {
    opacity: 1;
}

.team-note__body[b-r084m6ds5q] {
    white-space: pre-line;
    margin-top: 4px;
    line-height: 1.5;
}

@media print {
    .team-notes__composer[b-r084m6ds5q],
    .team-note__actions[b-r084m6ds5q] {
        display: none;
    }
}
/* /Components/Admin/TeamProgressStrip.razor.rz.scp.css */
.team-progress[b-sgfrnsumtu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.team-progress__group-head[b-sgfrnsumtu] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 2px 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--admin-border);
}

.team-progress__group-title[b-sgfrnsumtu] {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

.team-progress__group--current .team-progress__group-title[b-sgfrnsumtu] {
    color: var(--color-white);
}

.team-progress__group-tag[b-sgfrnsumtu] {
    padding: 1px 8px;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.team-progress__group--current .team-progress__group-tag[b-sgfrnsumtu] {
    border-color: var(--admin-border-strong);
    color: var(--aug-300);
    background: rgb(var(--aug-600-rgb) / 0.14);
}

.team-progress__group-count[b-sgfrnsumtu] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-silver-400);
}

/* Rows stretch to their tallest tile, so every tile in a row is the same height. */
.team-progress__grid[b-sgfrnsumtu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.team-progress__tile[b-sgfrnsumtu] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 14px;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--admin-border);
    border-top: 3px solid var(--color-silver-500);
    border-radius: 12px;
    background: var(--admin-surface-soft);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.team-progress__tile:hover[b-sgfrnsumtu] {
    transform: translateY(-2px);
    border-color: var(--admin-border-strong);
}

.team-progress__tile:focus-visible[b-sgfrnsumtu] {
    outline: 2px solid var(--aug-300);
    outline-offset: 2px;
}

.team-progress__tile--done[b-sgfrnsumtu] {
    border-top-color: #4caf50;
}

.team-progress__tile--active[b-sgfrnsumtu] {
    border-top-color: #ffb300;
}

.team-progress__tile--locked[b-sgfrnsumtu] {
    opacity: 0.7;
}

.team-progress__tile--selected[b-sgfrnsumtu] {
    opacity: 1;
    border-color: var(--aug-300);
    box-shadow: 0 0 0 1px var(--aug-300), 0 0 24px rgb(var(--aug-400-rgb) / 0.2);
}

.team-progress__head[b-sgfrnsumtu] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.team-progress__tile--done .team-progress__status[b-sgfrnsumtu] {
    color: #81c784;
}

.team-progress__tile--active .team-progress__status[b-sgfrnsumtu] {
    color: #ffca28;
}

.team-progress__title[b-sgfrnsumtu] {
    font-weight: 600;
    line-height: 1.25;
}

.team-progress__facts[b-sgfrnsumtu] {
    /* Pinned to the bottom, so the facts line up across a row however the titles wrap. */
    margin-top: auto;
    padding-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-silver-300);
}

.team-progress__facts > span[b-sgfrnsumtu] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.team-progress__notes[b-sgfrnsumtu] {
    color: var(--aug-300);
}
/* /Components/Layout/FactionBackdrop.razor.rz.scp.css */
/*
  The faction backdrop — the chosen path, playing behind everything in the player shell.

  Four layers over the void:

    __canvas   the world itself, from the backdrop worker (topo for the Purists, atlas for the
               Augmented). Held back to about half strength: on Choose Path it is the screen, here
               it is the ground a page of text has to stay readable on.
    __glow     two pools of the faction's light, one high and one low
    __weave    a faint diagonal weave, and only while there is no world yet, so the very first
               paint is not a flat rectangle. Over the canvas it would read as moire.
    __vignette pulls the corners down so page content keeps its contrast

  It sits at z-index 0 with .ach-shell__body lifted to 1. A negative z-index would be the obvious
  way to put it behind everything, and it does not work: bootstrap.min.css gives <body> its own
  opaque background, and an element's background paints over every negative-z-index layer beneath
  it, so the whole thing was invisible. Everything that has to stay on top already clears 1 by a
  distance — the top bar is 50, the Oracle 200, the break overlay 2000, MudBlazor's overlays higher
  still — and all of them sit outside .ach-shell__body. A page that wants its own full-bleed art
  paints over this; the rest read through it.
*/

.ach-backdrop[b-7hs7u30gdj] {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--color-void);
}

.ach-backdrop__canvas[b-7hs7u30gdj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    /* Long, because this crossfades when a team commits to a path, not on every navigation. */
    transition: opacity 1.2s ease;
}

/* No world to show yet: nothing to fade out, and nothing to fade in either. */
.ach-backdrop[data-resolved="false"] .ach-backdrop__canvas[b-7hs7u30gdj] {
    opacity: 0;
}

/*
  Except when the module started a world from the one it remembered from last time — data-hinted,
  written by FactionBackdrop.razor.js and by nothing else. The canvas is safe to show before the
  track resolves in a way the accent colour is not: a world paints in its own colours, so the worst
  a wrong guess looks like is the other side's map, crossfading out a moment later. The glow below
  keeps guessing nothing and stays held back until the answer actually arrives.
*/
.ach-backdrop[data-resolved="false"][data-hinted] .ach-backdrop__canvas[b-7hs7u30gdj] {
    opacity: 0.5;
}

.ach-backdrop[data-resolved="false"][data-hinted] .ach-backdrop__weave[b-7hs7u30gdj] {
    opacity: 0;
}

.ach-backdrop__glow[b-7hs7u30gdj],
.ach-backdrop__weave[b-7hs7u30gdj],
.ach-backdrop__vignette[b-7hs7u30gdj] {
    position: absolute;
    inset: 0;
    transition: background 1.2s ease, opacity 1.2s ease;
}

.ach-backdrop__glow[b-7hs7u30gdj] {
    background:
        radial-gradient(ellipse 70% 55% at 78% 8%, rgb(var(--faction-accent-rgb) / 0.18), transparent 70%),
        radial-gradient(ellipse 80% 60% at 14% 96%, rgb(var(--faction-accent-rgb) / 0.13), transparent 72%),
        linear-gradient(170deg, rgb(var(--faction-accent-rgb) / 0.05), transparent 55%);
}

/*
  Before the team's track has been resolved the faction is only a default, so the light is held back
  rather than guessed at — a Purist team never gets a moment of Augmented blue.
*/
.ach-backdrop[data-resolved="false"] .ach-backdrop__glow[b-7hs7u30gdj] {
    opacity: 0.25;
}

.ach-backdrop__weave[b-7hs7u30gdj] {
    opacity: 0;
    background:
        repeating-linear-gradient(58deg,
            rgb(var(--faction-highlight-rgb) / 0.05) 0 1px,
            transparent 1px 46px),
        repeating-linear-gradient(-58deg,
            rgb(var(--faction-accent-rgb) / 0.04) 0 1px,
            transparent 1px 64px);
}

.ach-backdrop[data-resolved="false"] .ach-backdrop__weave[b-7hs7u30gdj] {
    opacity: 0.2;
}

.ach-backdrop__vignette[b-7hs7u30gdj] {
    background: radial-gradient(ellipse 78% 68% at 50% 45%, transparent 30%, rgb(4 6 16 / 0.7) 100%);
}

/*
  The Augmented atlas only surfaces where a waygate has just pulsed, so at the Purists' half
  strength it read as near-black. It gets more of the canvas, a brighter glow and a lighter
  vignette; the Purist topo is drawn whole and keeps the settings above.
*/
.ach-backdrop[data-faction="augmented"] .ach-backdrop__canvas[b-7hs7u30gdj],
.ach-backdrop[data-faction="augmented"][data-resolved="false"][data-hinted] .ach-backdrop__canvas[b-7hs7u30gdj] {
    opacity: 0.85; /* TUNE */
}

.ach-backdrop[data-faction="augmented"][data-resolved="false"]:not([data-hinted]) .ach-backdrop__canvas[b-7hs7u30gdj] {
    opacity: 0;
}

.ach-backdrop[data-faction="augmented"] .ach-backdrop__glow[b-7hs7u30gdj] {
    background:
        radial-gradient(ellipse 70% 55% at 78% 8%, rgb(var(--faction-accent-rgb) / 0.28), transparent 70%),
        radial-gradient(ellipse 80% 60% at 14% 96%, rgb(var(--faction-accent-rgb) / 0.22), transparent 72%),
        linear-gradient(170deg, rgb(var(--faction-accent-rgb) / 0.09), transparent 55%);
}

.ach-backdrop[data-faction="augmented"] .ach-backdrop__vignette[b-7hs7u30gdj] {
    background: radial-gradient(ellipse 78% 68% at 50% 45%, transparent 40%, rgb(4 6 16 / 0.45) 100%);
}

/*
  A world a page asked for over the faction's (data-world, written by FactionBackdrop.razor.js) —
  and the moment between asking and the worker's first frame of it (data-pending), when the canvas
  still holds the last world's pixels. Hidden outright then, with no transition, so a switch never
  shows one world in the other's colours. !important because the faction's opacity rules above stack
  up to three attribute selectors, and this has to win over every one of them.
*/
.ach-backdrop[data-world="desync"] .ach-backdrop__canvas[b-7hs7u30gdj] {
    opacity: 1 !important;
    transition-duration: .4s;
}

.ach-backdrop[data-pending] .ach-backdrop__canvas[b-7hs7u30gdj] {
    opacity: 0 !important;
    transition: none;
}

/*
  The Desync boss's reactor floor (js/achrona-desync-floor.js), on the boss's light ground: its
  stage gradient underneath, so the screen looks right before the first frame and without a worker
  at all. No faction light or weave over it. The vignette layer carries the floor's two fade bands,
  which the canvas used to fill over every frame: the top 110px and the bottom 70px.
*/
.ach-backdrop[data-world="desync"][b-7hs7u30gdj] {
    background:
        radial-gradient(ellipse 75% 70% at 50% 50%, #ffffff 0%, #f5f4f1 38%, #e4e2dd 72%, #d3d1cb 100%),
        #e9e7e3;
}

/*
  Which canvases the world is on: WebGL2's one, where every world paints, or — once the worker has
  said WebGL2 failed (data-renderer="2d", FactionBackdrop.razor.js) — the Canvas 2D pair. The others
  are not shown at all, so the compositor has one full-screen canvas to blend, not three. Until the
  worker has said, it is WebGL2's: data-pending keeps whichever it is hidden until its first frame.
  The GL canvas paints the void under its world itself, so the faction opacities above apply to it
  unchanged.
*/
.ach-backdrop:not([data-renderer="2d"]) .ach-backdrop__canvas:not(.ach-backdrop__canvas--gl)[b-7hs7u30gdj],
.ach-backdrop[data-renderer="2d"] .ach-backdrop__canvas--gl[b-7hs7u30gdj] {
    display: none;
}

.ach-backdrop[data-world="desync"] .ach-backdrop__glow[b-7hs7u30gdj],
.ach-backdrop[data-world="desync"] .ach-backdrop__weave[b-7hs7u30gdj] {
    opacity: 0 !important;
}

.ach-backdrop[data-world="desync"] .ach-backdrop__vignette[b-7hs7u30gdj] {
    transition: none;
    background:
        linear-gradient(to bottom, rgba(236,234,230,.8) 0, rgba(236,234,230,.5) 60.5px, rgba(236,234,230,0) 110px),
        linear-gradient(to top, rgba(236,234,230,.8) 0, rgba(236,234,230,.5) 38.5px, rgba(236,234,230,0) 70px);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
[b-yvo6e7nuvw] .mud-layout {
    min-height: 100vh;
}

[b-yvo6e7nuvw] .mud-drawer {
    background: linear-gradient(180deg, #15161d 0%, #16111f 65%, #120d1a 100%) !important;
    border-right: 1px solid rgba(165, 43, 217, 0.28) !important;
}

[b-yvo6e7nuvw] .mud-main-content {
    position: relative;
}

/*
  The .assistant-drawer / .assistant-messages / .assistant-input rules that used to sit here styled
  an AI assistant drawer in the admin branch of MainLayout that no player or admin could ever reach.
  Both the markup and these rules are gone: players chat through the Oracle, admins through
  /admin/ai-assistants/{id}/playtest.
*/

/*
  Achrona player chrome. Admins keep the MudBlazor layout above; everything below only
  applies inside the player shell.
*/
.ach-shell[b-yvo6e7nuvw] {
    min-height: 100vh;
    /*
      FactionBackdrop covers this, so it is only what shows if the backdrop ever fails to paint —
      the abyss rather than the grey <body> that bootstrap.min.css would otherwise leave.
    */
    background: var(--color-abyss);
    color: var(--color-silver-100);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/*
  Lifted above the backdrop, which sits at z-index 0 so that it clears <body>'s own background.
  See FactionBackdrop.razor.css for why a negative z-index does not work here.
*/
.ach-shell__body[b-yvo6e7nuvw] {
    position: relative;
    z-index: 1;
    display: block;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.fantasy-divider[b-jg7uxkxzab] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 6px 0;
    color: #c8a0ec;
    font-family: 'Cinzel', serif;
    font-size: 0.63rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

    .fantasy-divider[b-jg7uxkxzab]::before,
    .fantasy-divider[b-jg7uxkxzab]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, #a52bd955, #ff195a4d, #a52bd955);
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-aj4opppsxl],
.components-reconnect-repeated-attempt-visible[b-aj4opppsxl],
.components-reconnect-failed-visible[b-aj4opppsxl],
.components-pause-visible[b-aj4opppsxl],
.components-resume-failed-visible[b-aj4opppsxl],
.components-rejoining-animation[b-aj4opppsxl] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-retrying[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-failed[b-aj4opppsxl],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-aj4opppsxl] {
    display: block;
}


#components-reconnect-modal[b-aj4opppsxl] {
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    font-family: var(--font-body);
    color: var(--color-silver-100);
    background: linear-gradient(160deg, #0d1428 0%, #060a18 100%);
    border: 1px solid rgb(var(--aug-400-rgb) / 0.35);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 50px rgb(var(--aug-600-rgb) / 0.25), 0 20px 60px rgb(0 0 0 / 0.6);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-aj4opppsxl 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-aj4opppsxl 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-aj4opppsxl 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-aj4opppsxl]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    animation: components-reconnect-modal-fadeInOpacity-b-aj4opppsxl 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-aj4opppsxl {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-aj4opppsxl {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-aj4opppsxl {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-aj4opppsxl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-aj4opppsxl] {
    margin: 0;
    text-align: center;
    color: var(--color-silver-300);
}

#components-reconnect-modal button[b-aj4opppsxl] {
    border: 1px solid var(--aug-400);
    background: linear-gradient(135deg, var(--aug-800), var(--aug-600));
    color: var(--color-white);
    padding: 4px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.4);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
}

    #components-reconnect-modal button:hover[b-aj4opppsxl] {
        box-shadow: 0 0 34px rgb(var(--aug-600-rgb) / 0.7);
    }

    #components-reconnect-modal button:active[b-aj4opppsxl] {
        box-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.4);
    }

.components-rejoining-animation[b-aj4opppsxl] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-aj4opppsxl] {
        position: absolute;
        border: 3px solid var(--aug-400);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-aj4opppsxl 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-aj4opppsxl] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-aj4opppsxl {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/WorldSwitch.razor.rz.scp.css */
.world-switch[b-8w98prghmm] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* A 24px target around an 8px dot: small to look at, not to hit. */
.world-switch__dot[b-8w98prghmm] {
    --dot: var(--aug-300);
    position: relative;
    width: 20px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.world-switch__dot[b-8w98prghmm]::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.world-switch__dot:hover[b-8w98prghmm]::before {
    opacity: 0.7;
}

.world-switch__dot[aria-checked="true"][b-8w98prghmm]::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 8px var(--dot);
}

.world-switch__dot:focus-visible[b-8w98prghmm] {
    outline: 1px solid var(--dot);
    outline-offset: -2px;
    border-radius: 4px;
}

.world-switch__dot--topo[b-8w98prghmm] { --dot: var(--pur-400); }
.world-switch__dot--atlas[b-8w98prghmm] { --dot: var(--aug-300); }
/* /Components/Pages/Preview/ChoosePathPreview.razor.rz.scp.css */
/* Preview-only controls. Nothing here ships on a player screen. */

.preview-controls[b-87cw6u67tt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-shadow);
    border-bottom: 1px solid var(--border-subtle);
}

.preview-controls__label[b-87cw6u67tt] {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.preview-controls__label:not(:first-child)[b-87cw6u67tt] {
    margin-left: var(--space-4);
}

.preview-controls button[b-87cw6u67tt] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-silver-200);
    cursor: pointer;
}

.preview-controls button:hover:not(:disabled)[b-87cw6u67tt] {
    border-color: var(--aug-400);
    color: var(--color-white);
}

.preview-controls button:disabled[b-87cw6u67tt] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Pages/Preview/JourneyPreview.razor.rz.scp.css */
/* The state switcher above the preview map. Preview chrome only — nothing here ships to a player. */

.ach-preview-states[b-sw7gafjs4h] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    border-bottom: 1px dashed rgb(245 158 11 / 0.25);
}

.ach-preview-states__link[b-sw7gafjs4h] {
    padding: 3px var(--space-3);
    border: 1px solid rgb(148 163 184 / 0.3);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-silver-400);
}

.ach-preview-states__link--on[b-sw7gafjs4h] {
    border-color: rgb(var(--aug-400-rgb) / 0.6);
    color: var(--aug-300);
}
/* /Components/Pages/Preview/PerfPreview.razor.rz.scp.css */
/*
  The performance bench page. Preview chrome only — nothing here ships to a player. The bench
  itself is Components/Shared/PerfBench; this is the inert screen around it.

  Deliberately plain: no blur, no shadows, no transitions. Anything this page animates or filters
  shows up in its own numbers.
*/

.ach-preview-states[b-za65vwbq7c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    border-bottom: 1px dashed rgb(245 158 11 / 0.25);
}

.ach-preview-states__link[b-za65vwbq7c] {
    padding: 3px var(--space-3);
    border: 1px solid rgb(148 163 184 / 0.3);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-silver-400);
}

.ach-preview-states__link--on[b-za65vwbq7c] {
    border-color: rgb(var(--aug-400-rgb) / 0.6);
    color: var(--aug-300);
}

.ach-perf[b-za65vwbq7c] {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6) var(--space-12);
}

/* ── The inert screen ──────────────────────────────────────────────────────── */

.ach-perf__body[b-za65vwbq7c] {
    display: grid;
    gap: var(--space-4);
    max-width: 960px;
}

.ach-perf__heading[b-za65vwbq7c] {
    margin: 0;
    font-size: var(--text-2xl);
    color: var(--color-silver-100);
}

.ach-perf__text[b-za65vwbq7c] {
    margin: 0;
    max-width: 60ch;
    color: var(--color-silver-300);
}

.ach-perf__cards[b-za65vwbq7c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.ach-perf__card[b-za65vwbq7c] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ach-perf__card-kicker[b-za65vwbq7c] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.ach-perf__card-title[b-za65vwbq7c] {
    color: var(--color-silver-100);
}

.ach-perf__card-meta[b-za65vwbq7c] {
    font-size: var(--text-sm);
    color: var(--color-silver-500);
}

/* Where the familiar's launcher sits in the game. */
.ach-perf__companion[b-za65vwbq7c] {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 5;
    pointer-events: none;
}
/* /Components/Player/Challenge/ChallengeView.razor.rz.scp.css */
/*
  The challenge screen, ported from "Achrona Challenge Page (standalone).html".

  The design carries its own palette on the wrapper (--ac, --bd-h, --ink2 and friends, swapped
  wholesale between the two paths). Everything here is written against the faction tokens the app
  already has instead — data-faction on the root does the swapping, exactly as on Choose Path — so
  there is one palette in the codebase rather than two that have to be kept in step.

  ::deep is needed throughout: the columns are filled by child components, and scoped CSS does not
  cross a component boundary on its own.
*/

.ach-chal[b-65dczq8nrd] {
    position: relative;
    min-height: 100vh;
    color: var(--color-silver-100);
    font-family: var(--font-body);
}

/* ── backdrop ──────────────────────────────────────────────────────────────── */

/*
  The stage that used to live here — an opaque void, a canvas of its own and a veil over it — is
  down to the veil. MainLayout's FactionBackdrop plays the same two worlds behind every player
  screen, so this screen reads through it like the rest of them; all this layer still has to do is
  sink that world far enough back that code stays readable on top of it.

  Fixed rather than absolute, so it covers the viewport on a page that scrolls past it.
*/
.ach-chal__veil[b-65dczq8nrd] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 25% 20%,
        rgb(7 9 24 / 0.32), rgb(7 9 24 / 0.58) 60%, rgb(4 5 15 / 0.7) 100%);
}

.ach-chal__content[b-65dczq8nrd] {
    position: relative;
    z-index: var(--z-raised, 10);
    max-width: 1560px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-20);
}

/* ── header ────────────────────────────────────────────────────────────────── */

.ach-chal__bar[b-65dczq8nrd] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5);
    background: var(--faction-panel-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--faction-panel-shadow);
}

.ach-chal__identity[b-65dczq8nrd],
.ach-chal__meters[b-65dczq8nrd] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ach-chal__meters[b-65dczq8nrd] {
    margin-left: auto;
}

.ach-chal__difficulty[b-65dczq8nrd] {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    text-transform: uppercase;
    font-size: var(--text-2xl);
    color: var(--color-white);
}

.ach-chal__rule[b-65dczq8nrd] {
    width: 1px;
    height: 26px;
    background: rgb(148 163 184 / 0.3);
}

.ach-chal__title[b-65dczq8nrd] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-gold-300, #fbbf24);
}

.ach-chal__count[b-65dczq8nrd] {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

.ach-chal__meters[b-65dczq8nrd]  .ach-chal__clock {
    font-size: var(--text-sm);
    color: var(--pur-300);
    border: 1px solid rgb(var(--pur-400-rgb) / 0.35);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-4);
    background: rgb(var(--pur-700-rgb) / 0.3);
    white-space: nowrap;
}

/* The clock is PuzzleClock's markup, hence ::deep. A stopped clock is a finished puzzle, not a running one — it should not read as urgent. */
.ach-chal__meters[b-65dczq8nrd]  .ach-chal__clock[data-stopped="true"] {
    color: var(--color-silver-300);
    border-color: rgb(148 163 184 / 0.3);
    background: rgb(148 163 184 / 0.1);
}

/* ── brief / solve switch ──────────────────────────────────────────────────── */

.ach-chal__modes[b-65dczq8nrd] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-lg);
    background: rgb(7 9 24 / 0.35);
}

.ach-chal__mode[b-65dczq8nrd] {
    border: none;
    border-radius: var(--radius-lg);
    padding: 1px var(--space-4);
    background: transparent;
    cursor: pointer;
    color: var(--color-silver-300);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-size: var(--text-xs);
    white-space: nowrap;
    transition: color var(--dur-fast, 120ms) ease, background var(--dur-fast, 120ms) ease;
}

.ach-chal__mode:hover[b-65dczq8nrd] { color: var(--color-white); }

.ach-chal__mode[data-active="true"][b-65dczq8nrd] {
    color: var(--color-white);
    background: rgb(var(--faction-accent-rgb) / 0.22);
    box-shadow: inset 0 0 0 1px var(--faction-border);
}

/* ── the briefing, on its own ──────────────────────────────────────────────── */

.ach-chal__briefing[b-65dczq8nrd] {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
}

[b-65dczq8nrd] .ach-chal__brief-card {
    width: min(100%, 780px);
}

[b-65dczq8nrd] .ach-chal__panel.ach-chal__brief-card {
    padding: clamp(var(--space-6), 4vw, var(--space-10));
}

[b-65dczq8nrd] .ach-chal__brief-card .ach-chal__heading {
    margin-bottom: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__prose--brief {
    font-size: var(--text-base);
    line-height: 1.85;
    white-space: pre-line;
}

[b-65dczq8nrd] .ach-chal__brief-card .ach-chal__notes {
    margin-top: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__brief-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
}

/* ── the three columns ─────────────────────────────────────────────────────── */

.ach-chal__grid[b-65dczq8nrd] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.ach-chal__col[b-65dczq8nrd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ach-chal__col--brief[b-65dczq8nrd] { flex: 1 1 320px; }
.ach-chal__col--bench[b-65dczq8nrd] { flex: 2 1 520px; }
.ach-chal__col--submit[b-65dczq8nrd] { flex: 1 1 300px; }

/*
  Below this the three columns cannot hold their proportions, so they stack: the specification,
  workbench, then submission — the order someone actually works in.
*/
@media (max-width: 900px) {
    .ach-chal__grid[b-65dczq8nrd] { flex-direction: column; }
    .ach-chal__col[b-65dczq8nrd] { width: 100%; flex: 1 1 auto; }
}

[b-65dczq8nrd] .ach-chal__panel {
    padding: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__heading {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-xl);
    line-height: 1.1;
    color: var(--color-white);
}

[b-65dczq8nrd] .ach-chal__heading--sm {
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-size: var(--text-sm);
    color: var(--faction-highlight);
}

[b-65dczq8nrd] .ach-chal__subheading {
    margin: var(--space-5) 0 var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--pur-300);
}

[b-65dczq8nrd] .ach-chal__prose {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--color-silver-200);
}

/* Stands in for the signature block where a panel has none. */
[b-65dczq8nrd] .ach-chal__prose--lead { margin-top: var(--space-3); }

[b-65dczq8nrd] .ach-chal__notes,
[b-65dczq8nrd] .ach-chal__rules {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__rules { margin-top: 0; }

[b-65dczq8nrd] .ach-chal__notes li,
[b-65dczq8nrd] .ach-chal__rules li {
    display: flex;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__tick { color: var(--faction-accent); }
[b-65dczq8nrd] .ach-chal__tick--go { color: var(--pur-400); }

/* ── the spec panel ────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__spec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

[b-65dczq8nrd] .ach-chal__trials {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__spec-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-xl);
    line-height: 1.1;
    color: var(--color-white);
}

/*
    Tables and formulas that came out of the challenge description. Same void panel as the provided
    contract, but read as prose rather than code, so they keep the body colour and never wrap: a
    column that slips a character out of line stops being a table.
*/
[b-65dczq8nrd] .ach-chal__details {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-void);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-200);
    white-space: pre;
    overflow-x: auto;
}

[b-65dczq8nrd] .ach-chal__example {
    margin-top: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-void);
    padding: var(--space-3) var(--space-4);
}

[b-65dczq8nrd] .ach-chal__example-label {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__example-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.8;
    color: var(--color-silver-300);
    overflow-x: auto;
}

[b-65dczq8nrd] .ach-chal__example-in { font-style: normal; color: var(--pur-300); }
[b-65dczq8nrd] .ach-chal__example-out { font-style: normal; color: var(--faction-highlight); }

/* ── the workbench ─────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__bench {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

[b-65dczq8nrd] .ach-chal__toolbar,
[b-65dczq8nrd] .ach-chal__tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
}

[b-65dczq8nrd] .ach-chal__filename {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
    padding-left: var(--space-1);
    margin-right: auto;
}

[b-65dczq8nrd] .ach-chal__tool {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
}

[b-65dczq8nrd] .ach-chal__tool[data-on="true"] {
    border-color: var(--faction-accent);
    color: var(--color-white);
}

[b-65dczq8nrd] .ach-chal__tab {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border: 1px solid rgb(148 163 184 / 0.22);
    background: rgb(var(--aug-900-rgb) / 0.35);
    color: var(--color-silver-300);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

[b-65dczq8nrd] .ach-chal__tab:hover {
    border-color: var(--faction-accent);
    color: var(--color-white);
}

[b-65dczq8nrd] .ach-chal__tab[aria-selected="true"] {
    border-color: var(--faction-accent);
    background: rgb(var(--faction-accent-rgb) / 0.35);
    color: var(--color-white);
}

/* ── one method ────────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__slot {
    border: 1px solid rgb(148 163 184 / 0.16);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgb(8 10 24 / 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm, 0 4px 20px rgb(0 0 0 / 0.4));
}

[b-65dczq8nrd] .ach-chal__slot[data-open="true"] {
    border-color: var(--faction-border);
    box-shadow: var(--faction-panel-shadow);
}

[b-65dczq8nrd] .ach-chal__slot-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid transparent;
    background: rgb(10 12 28 / 0.7);
    text-align: left;
    color: inherit;
}

[b-65dczq8nrd] .ach-chal__slot[data-open="true"] .ach-chal__slot-head {
    background: var(--faction-panel-bg);
    border-bottom-color: var(--faction-border);
}

[b-65dczq8nrd] .ach-chal__slot-num {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    border: 1px solid rgb(148 163 184 / 0.3);
    color: var(--color-silver-300);
}

[b-65dczq8nrd] .ach-chal__slot[data-open="true"] .ach-chal__slot-num {
    border-color: var(--faction-accent);
    background: rgb(var(--faction-accent-rgb) / 0.4);
    color: var(--color-white);
}

[b-65dczq8nrd] .ach-chal__slot-sig {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--color-silver-300);
}

[b-65dczq8nrd] .ach-chal__slot[data-open="true"] .ach-chal__slot-sig { color: var(--color-silver-100); }

/* The one warning kept: a line in the usings slot that is not a using directive. */
[b-65dczq8nrd] .ach-chal__slot-warn {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    border: 1px solid var(--color-gold-300, #fbbf24);
    color: var(--color-gold-300, #fbbf24);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    white-space: nowrap;
}

[b-65dczq8nrd] .ach-chal__slot-body { padding-bottom: var(--space-3); }

[b-65dczq8nrd] .ach-chal__slot-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-silver-300);
    border-bottom: 1px solid var(--border-subtle);
}

[b-65dczq8nrd] .ach-chal__slot-hint span { color: var(--pur-300); }

/* A method's hint is a tip or a gotcha, not an instruction to edit, so it is labelled in words. */
[b-65dczq8nrd] .ach-chal__slot-hint-tag {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    border: 1px solid var(--pur-300);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    white-space: nowrap;
}

[b-65dczq8nrd] .ach-chal__editor-shell {
    border-left: 2px solid var(--faction-border);
    background: #06081a;
}

/* The selected part is the only one on screen, so its editor takes the height the closed
   accordion headers used to hold. */
[b-65dczq8nrd] .ach-chal__editor { height: clamp(280px, 56vh, 620px); }

/* Holds the editor's place while Monaco's loader finishes, so nothing jumps when it arrives. */
[b-65dczq8nrd] .ach-chal__editor-wait {
    margin: 0;
    padding: var(--space-4);
    min-height: 120px;
    font-size: var(--text-xs);
    color: var(--color-silver-500);
}
[b-65dczq8nrd] .ach-chal__editor--short { height: clamp(120px, 30vh, 320px); }
[b-65dczq8nrd] .ach-chal__editor--tall { height: min(62vh, 640px); }

[b-65dczq8nrd] .ach-chal__editor-shell--solo {
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[b-65dczq8nrd] .ach-chal__slot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) 0;
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__slot-stats {
    font-size: var(--text-xs);
    color: var(--color-silver-500);
}

[b-65dczq8nrd] .ach-chal__slot-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── the assembled file ────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__file {
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgb(6 8 26 / 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--faction-panel-shadow);
}

[b-65dczq8nrd] .ach-chal__file-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--faction-panel-bg);
    border-bottom: 1px solid var(--faction-border);
}

[b-65dczq8nrd] .ach-chal__lights { display: flex; gap: var(--space-2); }

[b-65dczq8nrd] .ach-chal__lights i {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-silver-500);
}

[b-65dczq8nrd] .ach-chal__lights i:first-child { background: #ea580c; }
[b-65dczq8nrd] .ach-chal__lights i:nth-child(2) { background: #f59e0b; }
[b-65dczq8nrd] .ach-chal__lights i:last-child { background: var(--pur-400); }

[b-65dczq8nrd] .ach-chal__file-name {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--color-silver-100);
}

[b-65dczq8nrd] .ach-chal__file-meta {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--color-silver-300);
}

/*
  The one scroll box. Everything inside it is laid out to overflow rather than to scroll on its own,
  so the line numbers and the code can never drift apart — see .ach-chal__file-code.
*/
[b-65dczq8nrd] .ach-chal__file-body {
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.75;
    max-height: 620px;
    overflow: auto;
}

[b-65dczq8nrd] .ach-chal__file--inline .ach-chal__file-body { max-height: 300px; }

[b-65dczq8nrd] .ach-chal__gutter {
    list-style: none;
    margin: 0;
    flex: none;
    padding: var(--space-3) var(--space-3);
    text-align: right;
    color: var(--color-silver-600);
    background: rgb(4 6 20 / 0.9);
    user-select: none;
    border-right: 1px solid var(--border-subtle);
    position: sticky;
    left: 0;
}

/*
  Bootstrap's reboot styles the bare <pre>, and both of the declarations it lands here were doing
  visible damage: overflow:auto turned the code into a second scroll box nested in the body's, so
  the gutter and the code scrolled independently of one another; and font-size:.875em, with its own
  mono stack, shrank the text until forty numbered rows were taller than the forty lines they were
  numbering. An element selector beats anything the body passes down by inheritance, so both have
  to be turned back off here by name — font:inherit puts the size, the family and the line height
  back on the same footing as the gutter.

  It does not shrink either: the body is what scrolls sideways, and a shrunken pre would have
  scrolled on its own again.
*/
[b-65dczq8nrd] .ach-chal__file-code {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    flex: 1 0 auto;
    color: var(--color-silver-100);
    white-space: pre;
    overflow: visible;
    font: inherit;
}

[b-65dczq8nrd] .ach-chal__file-code code {
    font: inherit;
    color: inherit;
    background: none;
}

[b-65dczq8nrd] .ach-chal__file-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__file-foot span {
    font-size: var(--text-xs);
    color: var(--color-silver-500);
}

/* ── submission ────────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__submit-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[b-65dczq8nrd] .ach-chal__submit,
[b-65dczq8nrd] .ach-chal__history {
    padding: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__manifest {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__manifest li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--color-void);
}

[b-65dczq8nrd] .ach-chal__manifest-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__manifest-sig {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__go {
    width: 100%;
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    padding: var(--space-3);
}

[b-65dczq8nrd] .ach-chal__go:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* A submit that never got a verdict back. Same orange as the "error" verdict: it is the grader's
   trouble, not a wrong answer. */
[b-65dczq8nrd] .ach-chal__submit-error {
    margin: var(--space-3) 0 0;
    padding: var(--space-3);
    border: 1px solid rgb(249 115 22 / 0.4);
    border-radius: var(--radius-md);
    background: rgb(28 12 4 / 0.6);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__submit-error-kind {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ember-400);
}

[b-65dczq8nrd] .ach-chal__submit-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

[b-65dczq8nrd] .ach-chal__history-count,
[b-65dczq8nrd] .ach-chal__empty {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__empty { font-style: italic; margin: var(--space-3) 0 0; }

[b-65dczq8nrd] .ach-chal__attempts {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-65dczq8nrd] .ach-chal__attempt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    border: 1px solid rgb(148 163 184 / 0.14);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    background: var(--color-void);
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: border-color var(--transition-fast);
}

[b-65dczq8nrd] .ach-chal__attempt:hover { border-color: var(--faction-accent); }

[b-65dczq8nrd] .ach-chal__attempt-id,
[b-65dczq8nrd] .ach-chal__attempt-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__attempt-time,
[b-65dczq8nrd] .ach-chal__attempt-tests,
[b-65dczq8nrd] .ach-chal__attempt-go {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__firstsolve {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--pur-300);
    border: 1px solid rgb(var(--pur-400-rgb) / 0.4);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-2);
}

/* ── verdicts ──────────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__verdict {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    border: 1px solid currentColor;
    white-space: nowrap;
}

/*
  Four states, not three. "failed" means it ran and nothing passed; "error" means it never ran at
  all — a different problem, so it gets its own colour rather than being lumped in.
*/
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="pass"] { color: var(--pur-400); }
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="partial"] { color: var(--color-gold-300, #fbbf24); }
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="failed"] { color: #fb7185; }
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="error"] { color: #f97316; }

/* ── dialogs and overlays ──────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgb(4 6 16 / 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[b-65dczq8nrd] .ach-chal__dialog {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(170deg, var(--faction-surface), rgb(7 9 24 / 0.97));
    box-shadow: 0 26px 70px rgb(0 0 0 / 0.65);
    padding: var(--space-6);
    animation: ach-chal-pop-b-65dczq8nrd 0.35s ease-out;
}

[b-65dczq8nrd] .ach-chal__dialog--paste { max-width: 720px; }
[b-65dczq8nrd] .ach-chal__dialog--verdict { max-width: 560px; }

[b-65dczq8nrd] .ach-chal__dialog[data-verdict="pass"] { border-color: rgb(var(--pur-400-rgb) / 0.5); }
[b-65dczq8nrd] .ach-chal__dialog[data-verdict="partial"] { border-color: rgb(245 158 11 / 0.45); }
[b-65dczq8nrd] .ach-chal__dialog[data-verdict="failed"] { border-color: rgb(251 113 133 / 0.45); }
[b-65dczq8nrd] .ach-chal__dialog[data-verdict="error"] { border-color: rgb(249 115 22 / 0.5); }

@keyframes ach-chal-pop-b-65dczq8nrd {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    [b-65dczq8nrd] .ach-chal__dialog { animation: none; }
}

[b-65dczq8nrd] .ach-chal__dialog-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__dialog-headline { flex: 1; min-width: 0; }

[b-65dczq8nrd] .ach-chal__verdict-sigil {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    border: 1px solid var(--faction-border);
    background: rgb(7 9 24 / 0.75);
    color: var(--faction-highlight);
}

[b-65dczq8nrd] .ach-chal__dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-white);
}

[b-65dczq8nrd] .ach-chal__dialog-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__dialog-close {
    align-self: flex-start;
    font-size: var(--text-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-silver-400);
    padding: var(--space-1) var(--space-2);
}

[b-65dczq8nrd] .ach-chal__dialog-close:hover { color: var(--color-white); }

[b-65dczq8nrd] .ach-chal__dialog-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__dialog-go { flex: 1 1 220px; }

/* ── result body ───────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__stat {
    text-align: center;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-1);
    background: rgb(7 9 24 / 0.7);
}

[b-65dczq8nrd] .ach-chal__stat-value {
    display: block;
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    color: var(--color-silver-100);
}

[b-65dczq8nrd] .ach-chal__stat-value[data-tone="good"] { color: var(--pur-300); }
[b-65dczq8nrd] .ach-chal__stat-value[data-tone="warn"] { color: var(--color-gold-300, #fbbf24); }
[b-65dczq8nrd] .ach-chal__stat-value[data-tone="marks"] { color: var(--color-gold-300, #fbbf24); }

[b-65dczq8nrd] .ach-chal__stat-label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__result-heading { margin: var(--space-5) 0 var(--space-2); }

[b-65dczq8nrd] .ach-chal__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__row {
    border: 1px solid rgb(251 113 133 / 0.4);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    background: rgb(7 9 24 / 0.75);
}

[b-65dczq8nrd] .ach-chal__row[data-ok="true"] { border-color: rgb(var(--pur-400-rgb) / 0.3); }

[b-65dczq8nrd] .ach-chal__row-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__row-mark { color: #fb7185; }
[b-65dczq8nrd] .ach-chal__row[data-ok="true"] .ach-chal__row-mark { color: var(--pur-400); }

[b-65dczq8nrd] .ach-chal__row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--color-silver-100);
}

[b-65dczq8nrd] .ach-chal__row-tests {
    font-size: var(--text-xs);
    color: #fb7185;
}

[b-65dczq8nrd] .ach-chal__row[data-ok="true"] .ach-chal__row-tests { color: var(--pur-400); }

[b-65dczq8nrd] .ach-chal__row-note {
    margin: var(--space-2) 0 0;
    border-left: 2px solid #fb7185;
    padding-left: var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-300);
    white-space: pre-line;
}

/* ── the error panel ───────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__error {
    border: 1px solid rgb(249 115 22 / 0.4);
    border-radius: var(--radius-lg);
    background: rgb(28 12 4 / 0.6);
    overflow: hidden;
}

[b-65dczq8nrd] .ach-chal__error-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(249 115 22 / 0.25);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__error-kind {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: #f97316;
}

[b-65dczq8nrd] .ach-chal__error-where {
    font-size: var(--text-xs);
    color: var(--color-gold-300, #fbbf24);
}

[b-65dczq8nrd] .ach-chal__error-body {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-200);
    white-space: pre-wrap;
    max-height: 260px;
    overflow: auto;
}

[b-65dczq8nrd] .ach-chal__unlock {
    margin-top: var(--space-4);
    border: 1px solid rgb(var(--pur-400-rgb) / 0.35);
    border-radius: var(--radius-lg);
    background: rgb(var(--pur-900-rgb) / 0.35);
    padding: var(--space-3) var(--space-4);
}

[b-65dczq8nrd] .ach-chal__unlock-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--pur-200);
}

[b-65dczq8nrd] .ach-chal__unlock-code {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-white);
    word-break: break-all;
}

[b-65dczq8nrd] .ach-chal__verdict-note {
    margin: var(--space-4) 0 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: rgb(7 9 24 / 0.75);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--color-silver-200);
}

/* ── magic paste ───────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__paste {
    display: block;
    width: 100%;
    min-height: 220px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-100);
    background: #06081a;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    outline: none;
}

[b-65dczq8nrd] .ach-chal__paste:focus { border-color: var(--faction-accent); }

[b-65dczq8nrd] .ach-chal__paste-report {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__paste-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid rgb(251 113 133 / 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: rgb(7 9 24 / 0.75);
    font-size: var(--text-xs);
}

[b-65dczq8nrd] .ach-chal__paste-line[data-ok="true"] { border-color: rgb(148 163 184 / 0.18); }

[b-65dczq8nrd] .ach-chal__paste-line .ach-mono {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__paste-tag {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__paste-warn {
    margin: var(--space-3) 0 0;
    border: 1px solid rgb(245 158 11 / 0.35);
    border-radius: var(--radius-lg);
    background: rgb(7 9 24 / 0.75);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__paste-warn strong { color: var(--color-gold-300, #fbbf24); }

/* ── the grading overlay ───────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__grading {
    width: 100%;
    max-width: 470px;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(170deg, var(--faction-surface), rgb(7 9 24 / 0.96));
    box-shadow: 0 26px 70px rgb(0 0 0 / 0.65);
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
}

[b-65dczq8nrd] .ach-chal__orb {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto;
}

[b-65dczq8nrd] .ach-chal__orb-ring {
    position: absolute;
    border-radius: var(--radius-pill);
}

[b-65dczq8nrd] .ach-chal__orb-ring--slow {
    inset: 0;
    border: 1px dashed var(--faction-border);
    animation: ach-chal-spin-b-65dczq8nrd 9s linear infinite;
}

[b-65dczq8nrd] .ach-chal__orb-ring--fast {
    inset: 14px;
    border: 1px solid rgb(var(--pur-400-rgb) / 0.45);
    animation: ach-chal-spin-b-65dczq8nrd 6s linear infinite reverse;
}

[b-65dczq8nrd] .ach-chal__orb-core {
    position: absolute;
    inset: 30px;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle at 38% 32%,
        var(--faction-highlight) 0%, var(--faction-accent) 35%, var(--faction-accent-deep) 70%);
    box-shadow: var(--faction-glow-strong);
    animation: ach-chal-breathe-b-65dczq8nrd 3.4s ease-in-out infinite;
}

@keyframes ach-chal-spin-b-65dczq8nrd { to { transform: rotate(360deg); } }

@keyframes ach-chal-breathe-b-65dczq8nrd {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

[b-65dczq8nrd] .ach-chal__grading-title {
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    color: var(--color-white);
    text-shadow: var(--faction-text-glow);
}

[b-65dczq8nrd] .ach-chal__progress {
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgb(148 163 184 / 0.18);
    margin-top: var(--space-5);
    overflow: hidden;
}

[b-65dczq8nrd] .ach-chal__progress-bar {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--faction-gradient);
    box-shadow: var(--faction-glow-soft);
    transition: width 0.5s ease;
}

[b-65dczq8nrd] .ach-chal__stages {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

[b-65dczq8nrd] .ach-chal__stage {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-silver-500);
}

[b-65dczq8nrd] .ach-chal__stage[data-state="done"] { color: var(--pur-400); }
[b-65dczq8nrd] .ach-chal__stage[data-state="live"] { color: var(--faction-highlight); }

[b-65dczq8nrd] .ach-chal__stage-mark { width: 16px; text-align: center; }

[b-65dczq8nrd] .ach-chal__stage[data-state="live"] .ach-chal__stage-mark {
    animation: ach-chal-pulse-b-65dczq8nrd 1.4s ease-in-out infinite;
}

@keyframes ach-chal-pulse-b-65dczq8nrd {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    [b-65dczq8nrd] .ach-chal__orb-ring,
    [b-65dczq8nrd] .ach-chal__orb-core,
    [b-65dczq8nrd] .ach-chal__stage-mark {
        animation: none;
    }
}
/* /Components/Player/ChoosePathView.razor.rz.scp.css */
/*
  Choose Path — ported from "Achrona Choose Path Standalone.html".

  The screen is a stage: two canvas worlds full-bleed behind a centred content column. The clip-path
  that draws the Purist curtain across the Augmented atlas is written by ChoosePathView.razor.js,
  which also publishes the current split on the root as --ach-split (0..100) for anything that wants
  to react to it.
*/

.ach-path[b-4oweze6p57] {
    position: relative;
    /* 62px is the sticky PlayerTopBar; the stage fills whatever is left of the viewport. */
    min-height: calc(100vh - 62px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/*
  While the choice is open the two worlds seal the screen, so the void underneath them is what the
  curtain is cut out of. Once the path is locked in the stage is gone and the layout's faction
  backdrop is the ground here, exactly as on every other player screen — all this leaves behind is
  a scrim to keep the cards' surroundings readable over it.
*/
.ach-path[data-stage="on"][b-4oweze6p57] {
    background: var(--color-void);
}

.ach-path[data-stage="off"][b-4oweze6p57] {
    background: linear-gradient(180deg,
            rgb(5 8 26 / 0.52) 0%, rgb(4 7 19 / 0.68) 60%, rgb(3 5 15 / 0.78) 100%);
}

/* ── The two worlds ─────────────────────────────────────── */

.ach-path__stage[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ach-path__world[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ach-path__world--aug[b-4oweze6p57] {
    background: linear-gradient(180deg, #05081a 0%, #040713 60%, #03050f 100%);
}

/*
  The curtain. clip-path and its transition are set from JS; everything else is here so the first
  paint — before the module has loaded — is already a half-drawn curtain rather than a full one.
*/
.ach-path__world--pur[b-4oweze6p57] {
    background: linear-gradient(165deg, #04140e 0%, #06231a 45%, #04100c 100%);
    clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%);
    will-change: clip-path;
}

/*
  Which edge the curtain hangs from follows the cards, not the design's original artboard: see the
  note on data-purist-side in ChoosePathView.razor. Everything that pools Purist light towards
  "their" half mirrors here, so the emerald wash and the feathered contours stay under the Purist
  card wherever the track list puts it.
*/
.ach-path[data-purist-side="right"] .ach-path__world--pur[b-4oweze6p57] {
    clip-path: polygon(44% 0, 100% 0, 100% 100%, 56% 100%);
}

/* Emerald light pooling on the side the Purist card sits on. */
.ach-path__world-wash[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 30% 50%, rgb(var(--pur-400-rgb) / 0.14), transparent 70%);
}

.ach-path[data-purist-side="right"] .ach-path__world-wash[b-4oweze6p57] {
    background: radial-gradient(ellipse 70% 70% at 70% 50%, rgb(var(--pur-400-rgb) / 0.14), transparent 70%);
}

.ach-path__canvas[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Feathers the contour lines out before they reach the curtain's edge. */
.ach-path__canvas--topo[b-4oweze6p57] {
    -webkit-mask-image: radial-gradient(ellipse 88% 92% at 32% 50%, #000 30%, transparent 92%);
    mask-image: radial-gradient(ellipse 88% 92% at 32% 50%, #000 30%, transparent 92%);
}

.ach-path[data-purist-side="right"] .ach-path__canvas--topo[b-4oweze6p57] {
    -webkit-mask-image: radial-gradient(ellipse 88% 92% at 68% 50%, #000 30%, transparent 92%);
    mask-image: radial-gradient(ellipse 88% 92% at 68% 50%, #000 30%, transparent 92%);
}

/*
  WebGL2 paints the whole stage on one canvas (js/achrona-worlds-gl.js, choosePathFrameGl): the two
  grounds, the wash, both worlds, the feather and the curtain. Then none of the layers above are
  shown — the compositor has one opaque canvas to put up instead of two backgrounds, a wash, three
  canvases, a mask-image and an animated clip-path. Until the module has decided, the layers above
  are what shows, so the first paint is the same half-drawn curtain either way.
*/
.ach-path__canvas--gl[b-4oweze6p57] {
    display: none;
}

.ach-path[data-renderer="gl"] .ach-path__canvas--gl[b-4oweze6p57] {
    display: block;
}

.ach-path[data-renderer="gl"] .ach-path__world[b-4oweze6p57] {
    display: none;
}

/* ── Content column ─────────────────────────────────────── */

.ach-path__content[b-4oweze6p57] {
    position: relative;
    z-index: var(--z-raised);
    width: 100%;
    max-width: 1080px;
    /* Tight at the top so the confirm button under the cards still fits on a laptop screen. */
    padding-top: var(--space-6);
    padding-bottom: var(--space-16);
}

/* The worlds behind are busy, so the heading needs its own ground rather than a glow. */
.ach-path__title[b-4oweze6p57] {
    text-shadow: 0 0 26px rgb(0 0 0 / 0.6);
}

.ach-path__content .ach-lead[b-4oweze6p57] {
    color: var(--color-silver-200);
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}

.ach-path__member[b-4oweze6p57] {
    color: var(--color-silver-100);
    border-bottom: 1px solid rgb(148 163 184 / 0.4);
    padding-bottom: 1px;
}

.ach-path__error[b-4oweze6p57] {
    margin: var(--space-5) auto 0;
    max-width: 620px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgb(234 88 12 / 0.5);
    border-radius: var(--radius-lg);
    background: rgb(67 20 7 / 0.4);
    color: var(--color-ember-200);
    font-size: var(--text-sm);
}

.ach-path__grid[b-4oweze6p57] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
    text-align: left;
}

.ach-path__history[b-4oweze6p57] {
    margin: var(--space-4) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

.ach-path__history span[b-4oweze6p57] {
    color: var(--color-silver-100);
}

/* ── Card ───────────────────────────────────────────────── */

.ach-path__card[b-4oweze6p57] {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-xl);
    padding: 30px;
    background: var(--faction-panel-bg);
    /* The worlds move behind the cards, so they are glass rather than opaque panels. */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 20px rgb(var(--faction-accent-rgb) / 0.16);
    overflow: hidden;
    transition:
        box-shadow var(--transition-default),
        border-color var(--transition-default),
        opacity var(--transition-default),
        transform var(--transition-default);
}

.ach-path__card:hover[b-4oweze6p57] {
    box-shadow: 0 0 44px rgb(var(--faction-accent-rgb) / 0.45);
    border-color: rgb(var(--faction-accent-rgb) / 0.85);
}

/* The path this player is on: lit, and lifted a hair off the other one. */
.ach-path__card[data-state="chosen"][b-4oweze6p57] {
    border-color: rgb(var(--faction-accent-rgb) / 0.9);
    box-shadow: 0 0 44px rgb(var(--faction-accent-rgb) / 0.55);
    transform: scale(1.015);
}

.ach-path__card[data-state="dimmed"][b-4oweze6p57] {
    opacity: 0.55;
}

/* Faction light bleeding in from the top-right corner. */
.ach-path__corner-glow[b-4oweze6p57] {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--faction-accent-rgb) / 0.32), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.ach-path__head[b-4oweze6p57] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ach-path__sigil[b-4oweze6p57] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.5);
    background: var(--faction-surface);
    font-size: 30px;
    box-shadow: 0 0 16px rgb(var(--faction-accent-rgb) / 0.35);
}

.ach-path__name[b-4oweze6p57] {
    display: block;
    font-family: var(--font-display);
    font-size: 31px;
    line-height: 1.05;
    margin-bottom: 5px;
    color: var(--faction-accent);
    text-shadow: 0 0 18px rgb(var(--faction-accent-rgb) / 0.6);
}

.ach-path__tagline[b-4oweze6p57] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: 0.16em;
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--faction-highlight);
}

.ach-path__copy[b-4oweze6p57] {
    position: relative;
    margin: var(--space-5) 0 0;
    font-size: 15px;
    line-height: var(--leading-relaxed);
    color: var(--color-silver-200);
}

/* ── Part chips ─────────────────────────────────────────── */

.ach-path__parts[b-4oweze6p57] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.ach-path__part[b-4oweze6p57] {
    flex: 1 1 90px;
    text-align: center;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.3);
    border-radius: var(--radius-lg);
    padding: 12px 6px;
    background: var(--faction-surface);
}

.ach-path__part-name[b-4oweze6p57] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: var(--color-silver-100);
}

.ach-path__choose[b-4oweze6p57] {
    width: 100%;
    /* auto keeps the button pinned to the bottom so cards of unequal length still align. */
    margin-top: auto;
    padding-top: 13px;
}

.ach-path__voters[b-4oweze6p57] {
    margin: var(--space-3) 0 0;
    /* A block with no children generates no line box at all, so min-height is what actually
       reserves the line when this card has nothing to show — visibility: hidden below only keeps
       the box from being painted, it doesn't give an empty <p> a height on its own. */
    min-height: 1.34em;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    line-height: 1.34;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faction-accent);
}

/*
  Kept in flow so its line height still counts toward the card — see the note in the markup.
  Blazor renders a bool-typed attribute as presence-only (empty string when true, omitted when
  false), so this has to match on presence rather than on a "true" value.
*/
.ach-path__voters[data-empty][b-4oweze6p57] {
    visibility: hidden;
}

/* ── Footer note ────────────────────────────────────────── */

.ach-path__foot[b-4oweze6p57] {
    margin: var(--space-6) 0 0;
    font-size: 14px;
    color: var(--color-silver-200);
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
}

.ach-path__foot-accent[b-4oweze6p57] { color: var(--color-gold-300); }

.ach-path__foot--conflict[b-4oweze6p57] {
    display: inline-block;
    max-width: 720px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid rgb(245 158 11 / 0.45);
    border-radius: var(--radius-lg);
    background: rgb(69 26 3 / 0.35);
}

/*
  Once the team agrees, this button is the whole screen's purpose — and as a ghost button it read as
  a footnote under two lit cards. It keeps the faction treatment, gets room around it, and breathes
  so the eye lands on it before anything else.
*/
.ach-path__confirm[b-4oweze6p57] {
    margin-top: var(--space-6);
    min-width: 320px;
    padding: 18px var(--space-10);
    font-size: var(--text-xl);
    letter-spacing: 0.16em;
}

.ach-path__confirm--call[b-4oweze6p57] {
    animation: ach-path-confirm-b-4oweze6p57 2.4s ease-in-out infinite;
}

.ach-path__confirm--call:not(:disabled):hover[b-4oweze6p57] {
    animation: none;
    transform: translateY(-1px);
}

@keyframes ach-path-confirm-b-4oweze6p57 {
    0%, 100% {
        box-shadow: 0 0 20px rgb(var(--faction-accent-rgb) / 0.45);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 48px rgb(var(--faction-accent-rgb) / 0.85), 0 0 12px rgb(var(--faction-highlight-rgb) / 0.6);
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ach-path__confirm--call[b-4oweze6p57] {
        animation: none;
        box-shadow: 0 0 40px rgb(var(--faction-accent-rgb) / 0.7);
    }
}

@media (max-width: 720px) {
    .ach-path[b-4oweze6p57] {
        /* The curtain needs a viewport-width stage to read; below that the cards come first. */
        min-height: 0;
    }
}
/* /Components/Player/HomeHeroView.razor.rz.scp.css */
/* The landing hero, ported from "Achrona - The Death of Randomness.html". */

.ach-hero[b-6o4c1opwme] {
    position: relative;
    /* 62px is the sticky PlayerTopBar; the hero owns the rest of the first screen. */
    min-height: calc(100vh - 62px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-10) var(--space-6) var(--space-16);
    text-align: center;
    font-family: var(--font-body);
    color: var(--color-silver-100);
    /*
      Translucent, so the layout's faction backdrop reads through it: the hero used to be the same
      blue whichever path the team had chosen. The stops keep their old shape, they just no longer
      seal the screen off.
    */
    background: radial-gradient(ellipse 100% 80% at 50% 20%,
            rgb(10 20 40 / 0.45) 0%, rgb(6 10 24 / 0.68) 55%, rgb(4 6 15 / 0.82) 100%);
}

/* ── Starfield ──────────────────────────────────────────── */

.ach-hero__sky[b-6o4c1opwme] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ach-hero__star[b-6o4c1opwme] {
    position: absolute;
    border-radius: 50%;
    background: var(--color-white);
    animation-name: ach-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* ── Logo slots ─────────────────────────────────────────── */

.ach-hero__mark[b-6o4c1opwme],
.ach-hero__title[b-6o4c1opwme] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
  These come after the shared rule above so their `position: absolute` wins the cascade —
  equal specificity (one class + the Blazor scope attribute) means source order decides.
*/
.ach-hero__mark--event[b-6o4c1opwme] {
    position: absolute;
    top: var(--space-6);
    right: var(--space-8);
    width: 170px;
    height: 52px;
}

.ach-hero__mark--involved[b-6o4c1opwme] {
    position: absolute;
    top: var(--space-6);
    left: var(--space-8);
    width: 150px;
    height: 48px;
}

.ach-hero__mark--hyperion[b-6o4c1opwme] {
    position: absolute;
    bottom: var(--space-6);
    left: var(--space-8);
    width: 150px;
    height: 48px;
}

.ach-hero__mark--cronos[b-6o4c1opwme] {
    position: absolute;
    bottom: var(--space-6);
    right: var(--space-8);
    width: 150px;
    height: 48px;
}

.ach-hero__mark img[b-6o4c1opwme],
.ach-hero__title img[b-6o4c1opwme] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*
  Until the artwork exists the <img> 404s and achrona.js sets data-missing, which swaps in the
  labelled dashed box so the layout still reads at the right size.
*/
.ach-hero__mark[data-missing] img[b-6o4c1opwme],
.ach-hero__title[data-missing] img[b-6o4c1opwme] {
    display: none;
}

.ach-hero__mark-hint[b-6o4c1opwme] {
    display: none;
}

.ach-hero__mark[data-missing] .ach-hero__mark-hint[b-6o4c1opwme],
.ach-hero__title[data-missing] .ach-hero__mark-hint[b-6o4c1opwme] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-2);
    border: 1px dashed rgb(var(--aug-400-rgb) / 0.35);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

/* ── Centre column ──────────────────────────────────────── */

.ach-hero__body[b-6o4c1opwme] {
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ach-hero__title[b-6o4c1opwme] {
    width: 560px;
    max-width: 90vw;
    height: 180px;
}

.ach-hero__subtitle[b-6o4c1opwme] {
    margin: 26px 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2.25rem, 6vw, 52px);
    line-height: 1.05;
    letter-spacing: 1px;
    color: var(--color-silver-100);
    text-shadow: 0 0 24px rgb(var(--aug-600-rgb) / 0.6);
}

.ach-hero__intro[b-6o4c1opwme] {
    max-width: 620px;
    margin: var(--space-5) auto 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-silver-300);
}

.ach-hero__cta[b-6o4c1opwme] {
    margin-top: 34px;
}

/*
  The one button on the screen, so it is the Augmented gradient outright rather than the neutral
  --faction-* one: nothing has picked a faction yet at this point in the journey.
*/
.ach-hero__enter[b-6o4c1opwme] {
    font-size: 19px;
    letter-spacing: 0.14em;
    padding: 16px 46px;
    background: linear-gradient(135deg, var(--aug-800), var(--aug-600));
    border-color: var(--aug-400);
    color: var(--color-white);
    box-shadow: 0 0 30px rgb(var(--aug-600-rgb) / 0.55), 0 0 8px rgb(var(--aug-600-rgb) / 0.9);
}

.ach-hero__enter:not(:disabled):hover[b-6o4c1opwme] {
    box-shadow: 0 0 50px rgb(var(--aug-600-rgb) / 0.8), 0 0 14px rgb(var(--aug-400-rgb) / 0.9);
}

/* Where the button was, for a player who is already through the door. */
.ach-hero__greeting[b-6o4c1opwme] {
    margin: 34px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 28px);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.55);
}

.ach-hero__note[b-6o4c1opwme] {
    margin: var(--space-5) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

@media (max-width: 860px) {
    /* The corner marks would sit on top of the copy; stack everything into the flow instead. */
    .ach-hero__mark--event[b-6o4c1opwme],
    .ach-hero__mark--involved[b-6o4c1opwme],
    .ach-hero__mark--hyperion[b-6o4c1opwme],
    .ach-hero__mark--cronos[b-6o4c1opwme] {
        position: static;
    }

    .ach-hero__mark--involved[b-6o4c1opwme] {
        margin-bottom: var(--space-4);
    }

    .ach-hero__mark--event[b-6o4c1opwme] {
        margin-bottom: var(--space-8);
    }

    /* The top marks stay above the copy; the bottom ones follow it. */
    .ach-hero__mark--hyperion[b-6o4c1opwme],
    .ach-hero__mark--cronos[b-6o4c1opwme] {
        order: 1;
        margin-top: var(--space-10);
    }

    .ach-hero__mark--cronos[b-6o4c1opwme] {
        margin-top: var(--space-4);
    }
}
/* /Components/Player/TeamStatsView.razor.rz.scp.css */
/*
  Team Stats — "The Ledger of Attempts", ported from "Achrona Team Stats (standalone).html".

  The seven columns are declared once as --ach-ledger-cols and reused by the column header, every
  part row and the Desync, so the three grids can never drift apart. The whole ledger sits in one
  horizontal scroller: below about 900px the columns stop fitting, and scrolling the table is far
  kinder than reflowing a ledger whose whole point is aligned numbers.
*/

.ach-ledger[b-pdtchwwrg7] {
    --ach-ledger-cols: 52px minmax(0, 1fr) 92px 118px 100px 92px 128px;
    --ach-ledger-gap: 0 18px;
    --ach-ledger-pad: 0 22px;

    position: relative;
    /* 62px is the sticky PlayerTopBar; the ledger fills whatever is left of the viewport. */
    min-height: calc(100vh - 62px);
    overflow: hidden;
    /*
      Translucent, exactly as on the hero: the layout’s faction backdrop is the ground here too.
      A static contour canvas and one wash per faction used to seal this screen off — the ledger
      was the only player screen whose background neither moved nor followed the path the team
      chose. This scrim is all that is left of them, and it only has to keep the numbers readable
      over the world playing behind it.
    */
    background: linear-gradient(180deg,
            rgb(5 8 26 / 0.58) 0%, rgb(4 7 19 / 0.72) 60%, rgb(3 5 15 / 0.8) 100%);
}

.ach-ledger__content[b-pdtchwwrg7] {
    position: relative;
    z-index: 1;
    max-width: 1280px;
}

/* ── Masthead ───────────────────────────────────────────── */

.ach-ledger__head[b-pdtchwwrg7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-10);
}

.ach-ledger__kicker[b-pdtchwwrg7] {
    margin: 0 0 var(--space-2);
    letter-spacing: 0.3em;
    color: var(--aug-400);
}

.ach-ledger__subtitle[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.ach-ledger__team[b-pdtchwwrg7] {
    color: var(--color-white);
    font-weight: var(--weight-semibold);
}

/* ── Score plaque and tiles ─────────────────────────────── */

.ach-ledger__summary[b-pdtchwwrg7] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ach-ledger__total[b-pdtchwwrg7] {
    min-width: 230px;
    padding: var(--space-5) var(--space-8) 22px;
    text-align: center;
    border: 1px solid rgb(251 191 36 / 0.45);
    border-radius: 14px;
    background: linear-gradient(160deg, rgb(120 72 4 / 0.35), rgb(8 10 26 / 0.6));
    box-shadow: 0 0 44px rgb(251 191 36 / 0.16);
}

.ach-ledger__total-label[b-pdtchwwrg7] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gold-300);
}

.ach-ledger__total-value[b-pdtchwwrg7] {
    display: block;
    font-weight: var(--weight-bold);
    font-size: 62px;
    line-height: 1.05;
    color: var(--color-gold-200);
    animation: ach-ledger-score-glow-b-pdtchwwrg7 3.4s ease-in-out infinite;
}

@keyframes ach-ledger-score-glow-b-pdtchwwrg7 {
    0%, 100% { text-shadow: 0 0 18px rgb(251 191 36 / 0.55); }
    50% { text-shadow: 0 0 34px rgb(251 191 36 / 0.9); }
}

.ach-ledger__tiles[b-pdtchwwrg7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(118px, 1fr));
    gap: var(--space-3);
}

.ach-ledger__tile[b-pdtchwwrg7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) 14px;
    text-align: center;
    border: 1px solid;
    border-radius: 13px;
}

.ach-ledger__tile--pur[b-pdtchwwrg7] {
    border-color: rgb(var(--pur-400-rgb) / 0.3);
    background: linear-gradient(150deg, rgb(6 35 26 / 0.55), rgb(6 9 24 / 0.6));
}

.ach-ledger__tile--aug[b-pdtchwwrg7] {
    border-color: rgb(var(--aug-500-rgb) / 0.3);
    background: linear-gradient(150deg, rgb(12 30 62 / 0.6), rgb(6 9 24 / 0.6));
}

.ach-ledger__tile--gold[b-pdtchwwrg7] {
    border-color: rgb(251 191 36 / 0.3);
    background: linear-gradient(150deg, rgb(58 40 6 / 0.5), rgb(6 9 24 / 0.6));
}

.ach-ledger__tile-value[b-pdtchwwrg7] {
    font-weight: var(--weight-bold);
    font-size: var(--text-2xl);
    line-height: 1.1;
}

.ach-ledger__tile--pur .ach-ledger__tile-value[b-pdtchwwrg7] { color: var(--pur-300); }
.ach-ledger__tile--aug .ach-ledger__tile-value[b-pdtchwwrg7] { color: var(--aug-300); }
.ach-ledger__tile--gold .ach-ledger__tile-value[b-pdtchwwrg7] { color: var(--color-gold-300); }

.ach-ledger__tile-slash[b-pdtchwwrg7] { color: var(--color-silver-500); }

.ach-ledger__tile-label[b-pdtchwwrg7] {
    margin-top: 6px;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

/* ── The ledger ─────────────────────────────────────────── */

.ach-ledger__scroll[b-pdtchwwrg7] {
    margin-top: 44px;
    overflow-x: auto;
}

.ach-ledger__table[b-pdtchwwrg7] {
    min-width: 960px;
}

.ach-ledger__columns[b-pdtchwwrg7] {
    display: grid;
    grid-template-columns: var(--ach-ledger-cols);
    gap: var(--ach-ledger-gap);
    padding: var(--ach-ledger-pad);
    padding-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-white);
}

.ach-ledger__num[b-pdtchwwrg7] { text-align: right; }

/* ── One path's block ───────────────────────────────────── */

.ach-ledger__group[b-pdtchwwrg7] {
    margin-bottom: 26px;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.28);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(150deg, rgb(var(--faction-accent-rgb) / 0.09) 0%, rgb(6 9 24 / 0.72) 55%);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 34px rgb(var(--faction-accent-rgb) / 0.08);
}

.ach-ledger__group-head[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 22px;
    border-bottom: 1px solid rgb(var(--faction-accent-rgb) / 0.2);
    background: rgb(var(--faction-accent-rgb) / 0.07);
}

.ach-ledger__sigil[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    font-size: 21px;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.5);
    border-radius: 11px;
    background: rgb(var(--faction-accent-rgb) / 0.16);
    box-shadow: 0 0 16px rgb(var(--faction-accent-rgb) / 0.3);
}

.ach-ledger__group-name[b-pdtchwwrg7] { min-width: 0; }

.ach-ledger__group-title[b-pdtchwwrg7] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 27px;
    line-height: 1.1;
    color: var(--faction-accent);
    text-shadow: 0 0 16px rgb(var(--faction-accent-rgb) / 0.45);
}

.ach-ledger__group-tagline[b-pdtchwwrg7] {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

.ach-ledger__group-stats[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 0 0 auto;
    text-align: right;
}

.ach-ledger__group-stats > div:last-child[b-pdtchwwrg7] { min-width: 70px; }

.ach-ledger__group-stats dd[b-pdtchwwrg7] {
    margin: 0;
    font-weight: var(--weight-bold);
    font-size: 17px;
    color: var(--faction-accent);
}

.ach-ledger__group-stats dt[b-pdtchwwrg7] {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

/* ── A part ─────────────────────────────────────────────── */

.ach-ledger__row[b-pdtchwwrg7] {
    display: grid;
    grid-template-columns: var(--ach-ledger-cols);
    gap: var(--ach-ledger-gap);
    align-items: center;
    padding: 17px 22px;
    border-top: 1px solid rgb(255 255 255 / 0.05);
    transition: background var(--transition-default);
}

.ach-ledger__row:hover[b-pdtchwwrg7] { background: rgb(255 255 255 / 0.045); }

/* A part still to come is dimmed rather than hidden: the shape of what is left stays readable. */
.ach-ledger__row[data-status="locked"][b-pdtchwwrg7] { opacity: 0.55; }

.ach-ledger__row[data-status="active"][b-pdtchwwrg7] { background: rgb(251 191 36 / 0.06); }

.ach-ledger__index[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-silver-500);
}

.ach-ledger__row[data-status="done"] .ach-ledger__index[b-pdtchwwrg7],
.ach-ledger__row[data-status="active"] .ach-ledger__index[b-pdtchwwrg7] { color: var(--color-silver-200); }

/* The rail carries the row's state in the corner of your eye, ahead of the badge. */
.ach-ledger__rail[b-pdtchwwrg7] {
    flex: 0 0 auto;
    width: 3px;
    height: 30px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.1);
}

.ach-ledger__row[data-status="done"] .ach-ledger__rail[b-pdtchwwrg7] { background: var(--faction-accent); }
.ach-ledger__row[data-status="active"] .ach-ledger__rail[b-pdtchwwrg7] { background: var(--color-gold-300); }

.ach-ledger__part[b-pdtchwwrg7] {
    display: block;
    min-width: 0;
}

.ach-ledger__part-title[b-pdtchwwrg7] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: 20px;
    letter-spacing: 0.02em;
    text-wrap: pretty;
    color: var(--color-silver-300);
}

.ach-ledger__row[data-status="done"] .ach-ledger__part-title[b-pdtchwwrg7],
.ach-ledger__row[data-status="active"] .ach-ledger__part-title[b-pdtchwwrg7] { color: var(--color-white); }

.ach-ledger__part-meta[b-pdtchwwrg7] {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.ach-ledger__value[b-pdtchwwrg7] {
    font-size: 15px;
    color: var(--color-silver-500);
}

.ach-ledger__row[data-status="done"] .ach-ledger__value[b-pdtchwwrg7],
.ach-ledger__row[data-status="active"] .ach-ledger__value[b-pdtchwwrg7] { color: var(--color-silver-200); }

.ach-ledger__score[b-pdtchwwrg7] {
    font-weight: var(--weight-bold);
    font-size: 15px;
    color: var(--color-silver-500);
}

.ach-ledger__row[data-status="done"] .ach-ledger__score[b-pdtchwwrg7] { color: var(--color-gold-200); }

/* ── Status badge ───────────────────────────────────────── */

.ach-ledger__status[b-pdtchwwrg7] {
    gap: 6px;
    padding: 4px var(--space-3);
    font-weight: var(--weight-extrabold);
    font-size: 11px;
    letter-spacing: 0.16em;
    border-radius: 14px;
}

[data-status="done"] .ach-ledger__status[b-pdtchwwrg7] {
    color: var(--pur-300);
    border-color: rgb(var(--pur-400-rgb) / 0.6);
    background: rgb(2 44 34 / 0.6);
    box-shadow: 0 0 16px rgb(var(--pur-400-rgb) / 0.25);
}

[data-status="active"] .ach-ledger__status[b-pdtchwwrg7] {
    color: var(--color-gold-200);
    border-color: rgb(251 191 36 / 0.75);
    background: rgb(69 42 4 / 0.6);
    box-shadow: 0 0 20px rgb(251 191 36 / 0.35);
}

[data-status="locked"] .ach-ledger__status[b-pdtchwwrg7] {
    color: var(--color-silver-400);
    border-color: rgb(148 163 184 / 0.25);
    background: rgb(255 255 255 / 0.03);
}

/* ── The Desync ─────────────────────────────────────────── */

/*
  The final card belongs to neither path, so it drops the faction tint entirely for a colourless
  hole in the page — a dark that the rest of the ledger is measured against.
*/
.ach-ledger__final[b-pdtchwwrg7] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(226 232 240 / 0.28);
    border-radius: var(--radius-xl);
    background: radial-gradient(ellipse 70% 120% at 12% 50%, #14161f 0%, #0a0b12 45%, #05060c 100%);
    box-shadow: 0 0 40px rgb(148 163 184 / 0.12), inset 0 0 60px rgb(0 0 0 / 0.9);
}

.ach-ledger__void[b-pdtchwwrg7] {
    position: absolute;
    left: -80px;
    top: 50%;
    width: 420px;
    height: 420px;
    margin-top: -210px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgb(0 0 0 / 0.95) 0%, rgb(0 0 0 / 0.6) 40%, rgb(0 0 0 / 0) 62%);
    animation: ach-ledger-void-breathe-b-pdtchwwrg7 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ach-ledger-void-breathe-b-pdtchwwrg7 {
    0%, 100% { transform: scale(0.9); opacity: 0.82; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Lifts the row clear of the breathing void behind it. */
.ach-ledger__final-table[b-pdtchwwrg7] { position: relative; }

.ach-ledger__row--final[b-pdtchwwrg7] {
    padding: 22px;
    border-top: none;
}

.ach-ledger__row--final:hover[b-pdtchwwrg7] { background: transparent; }

.ach-ledger__row--final .ach-ledger__index[b-pdtchwwrg7] { justify-content: center; }

.ach-ledger__orb[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-silver-100);
    border: 1.5px solid rgb(226 232 240 / 0.7);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #3a3f52, #14161f 55%, #05060c 100%);
    box-shadow: 0 0 26px rgb(148 163 184 / 0.4), inset 0 0 22px rgb(0 0 0 / 0.9);
}

.ach-ledger__final-title[b-pdtchwwrg7] {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 30px;
    line-height: 1.1;
    color: var(--color-silver-100);
    text-shadow: 0 0 20px rgb(148 163 184 / 0.35);
}

.ach-ledger__final-meta[b-pdtchwwrg7] {
    display: block;
    margin-top: 2px;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

/*
  The final card carries its status on the section, not on the row — the row rules above key off
  .ach-ledger__row[data-status], so it needs its own pair.
*/
.ach-ledger__final[data-status="done"] .ach-ledger__value[b-pdtchwwrg7],
.ach-ledger__final[data-status="active"] .ach-ledger__value[b-pdtchwwrg7] { color: var(--color-silver-200); }

.ach-ledger__final[data-status="done"] .ach-ledger__score[b-pdtchwwrg7] { color: var(--color-gold-200); }

/* ── Narrow screens ─────────────────────────────────────── */

@media (max-width: 720px) {
    .ach-ledger__summary[b-pdtchwwrg7] { width: 100%; }

    .ach-ledger__total[b-pdtchwwrg7] {
        flex: 1 1 100%;
        min-width: 0;
        padding: var(--space-4) var(--space-5);
    }

    .ach-ledger__total-value[b-pdtchwwrg7] { font-size: var(--text-4xl); }

    .ach-ledger__tiles[b-pdtchwwrg7] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ach-ledger__total-value[b-pdtchwwrg7],
    .ach-ledger__void[b-pdtchwwrg7] { animation: none; }
}
/* /Components/Shared/BlockOverlay.razor.rz.scp.css */
/*
  Block Mode — same full-screen overlay pattern as BreakOverlay (Rest Mode), recoloured to the
  Ember/orange "danger" spectrum from tokens/colors.css so a block reads as unmistakably different
  from a pause.
*/

.ach-block[b-fs1rs63ibd] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    font-family: var(--font-body);
    background: radial-gradient(ellipse 80% 80% at 50% 45%, #431407 0%, #1c0904 55%, #050510 100%);
}

/* ── Drifting motes ─────────────────────────────────────── */

.ach-block__mote[b-fs1rs63ibd] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: var(--color-ember-400);
    box-shadow: 0 0 14px rgb(249 115 22 / 0.9);
}

.ach-block__mote--1[b-fs1rs63ibd] {
    top: 60%;
    left: 20%;
    width: 8px;
    height: 8px;
    animation: ach-rise 12s linear infinite;
}

.ach-block__mote--2[b-fs1rs63ibd] {
    top: 70%;
    left: 40%;
    width: 6px;
    height: 6px;
    animation: ach-rise 14s linear infinite 2s;
}

.ach-block__mote--3[b-fs1rs63ibd] {
    top: 65%;
    left: 62%;
    width: 9px;
    height: 9px;
    animation: ach-rise 11s linear infinite 4s;
}

.ach-block__mote--4[b-fs1rs63ibd] {
    top: 72%;
    left: 78%;
    width: 6px;
    height: 6px;
    animation: ach-rise 15s linear infinite 1s;
}

/* ── Warning orb ────────────────────────────────────────── */

.ach-block__orb[b-fs1rs63ibd] {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ach-block__ring[b-fs1rs63ibd] {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    animation: ach-ring 4s ease-out infinite;
}

.ach-block__ring--outer[b-fs1rs63ibd] {
    border: 1px solid rgb(194 65 12 / 0.5);
}

.ach-block__ring--inner[b-fs1rs63ibd] {
    border: 1px solid rgb(249 115 22 / 0.4);
    animation-delay: 2s;
}

.ach-block__core[b-fs1rs63ibd] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--color-ember-400) 0%, var(--color-ember-600) 45%, var(--color-ember-900) 100%);
    filter: blur(2px);
    box-shadow: 0 0 60px rgb(194 65 12 / 0.7), 0 0 100px rgb(249 115 22 / 0.4);
    animation: ach-breathe 5s ease-in-out infinite;
}

.ach-block__glyph[b-fs1rs63ibd] {
    position: absolute;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--text-primary);
    text-shadow: 0 0 18px rgb(0 0 0 / 0.6);
}

/* ── Copy ───────────────────────────────────────────────── */

.ach-block__title[b-fs1rs63ibd] {
    margin: var(--space-8) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2.25rem, 7vw, 54px);
    line-height: var(--leading-none);
    color: var(--text-primary);
    text-shadow: 0 0 28px rgb(194 65 12 / 0.7);
    animation: ach-glow-pulse 4s ease-in-out infinite;
}

.ach-block__lead[b-fs1rs63ibd] {
    margin: var(--space-5) 0 0;
    max-width: 480px;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-silver-300);
}

.ach-block__note[b-fs1rs63ibd] {
    margin: var(--space-10) 0 0;
    padding: var(--space-2) var(--space-5);
    border: 1px solid rgb(249 115 22 / 0.35);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ember-300);
}

.ach-block__logout[b-fs1rs63ibd] {
    margin: var(--space-6) 0 0;
    padding: var(--space-3) var(--space-8);
    border: 1px solid rgb(249 115 22 / 0.5);
    border-radius: var(--radius-md);
    background: rgb(249 115 22 / 0.12);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ach-block__logout:hover[b-fs1rs63ibd],
.ach-block__logout:focus-visible[b-fs1rs63ibd] {
    background: rgb(249 115 22 / 0.22);
    border-color: rgb(249 115 22 / 0.8);
}

@media (max-width: 600px) {
    .ach-block__orb[b-fs1rs63ibd] {
        transform: scale(0.72);
    }
}
/* /Components/Shared/BreakOverlay.razor.rz.scp.css */
/*
  Rest Mode — ported from the full-screen overlay in "Achrona Challenge Site.dc.html".
  Faction colours come from wwwroot/css/achrona/tokens/factions.css:
  Brand blue for The Augmented, Emerald green for The Purists.
*/

.ach-rest[b-mwc807mnq5] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    font-family: var(--font-body);
    /* Centre stop is --aug-900 pulled toward the void, so the wash reads Brand-blue. */
    background: radial-gradient(ellipse 80% 80% at 50% 45%, #091942 0%, #0a0a1c 55%, #050510 100%);
}

/* ── Drifting motes ─────────────────────────────────────── */

.ach-rest__mote[b-mwc807mnq5] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ach-rest__mote--1[b-mwc807mnq5] {
    top: 60%;
    left: 20%;
    width: 8px;
    height: 8px;
    background: var(--aug-400);
    box-shadow: 0 0 14px rgb(var(--aug-400-rgb) / 0.9);
    animation: ach-rise 12s linear infinite;
}

.ach-rest__mote--2[b-mwc807mnq5] {
    top: 70%;
    left: 40%;
    width: 6px;
    height: 6px;
    background: var(--pur-300);
    box-shadow: 0 0 14px rgb(var(--pur-300-rgb) / 0.9);
    animation: ach-rise 14s linear infinite 2s;
}

.ach-rest__mote--3[b-mwc807mnq5] {
    top: 65%;
    left: 62%;
    width: 9px;
    height: 9px;
    background: var(--aug-500);
    box-shadow: 0 0 14px rgb(var(--aug-500-rgb) / 0.9);
    animation: ach-rise 11s linear infinite 4s;
}

.ach-rest__mote--4[b-mwc807mnq5] {
    top: 72%;
    left: 78%;
    width: 6px;
    height: 6px;
    background: var(--pur-300);
    box-shadow: 0 0 14px rgb(var(--pur-300-rgb) / 0.9);
    animation: ach-rise 15s linear infinite 1s;
}

/* ── Breathing orb ──────────────────────────────────────── */

.ach-rest__orb[b-mwc807mnq5] {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ach-rest__ring[b-mwc807mnq5] {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    animation: ach-ring 4s ease-out infinite;
}

.ach-rest__ring--aug[b-mwc807mnq5] {
    border: 1px solid rgb(var(--aug-600-rgb) / 0.4);
}

.ach-rest__ring--pur[b-mwc807mnq5] {
    border: 1px solid rgb(var(--pur-400-rgb) / 0.4);
    animation-delay: 2s;
}

.ach-rest__orbit[b-mwc807mnq5] {
    position: absolute;
    width: 300px;
    height: 300px;
    animation: ach-spin-slow 26s linear infinite;
}

.ach-rest__satellite[b-mwc807mnq5] {
    position: absolute;
    border-radius: 50%;
}

.ach-rest__satellite--top[b-mwc807mnq5],
.ach-rest__satellite--right[b-mwc807mnq5] {
    width: 8px;
    height: 8px;
    background: var(--aug-400);
    box-shadow: 0 0 12px rgb(var(--aug-400-rgb) / 0.9);
}

.ach-rest__satellite--bottom[b-mwc807mnq5],
.ach-rest__satellite--left[b-mwc807mnq5] {
    width: 6px;
    height: 6px;
    background: var(--pur-300);
    box-shadow: 0 0 12px rgb(var(--pur-300-rgb) / 0.9);
}

.ach-rest__satellite--top[b-mwc807mnq5] {
    top: -4px;
    left: calc(50% - 4px);
}

.ach-rest__satellite--bottom[b-mwc807mnq5] {
    bottom: -4px;
    left: calc(50% - 4px);
}

.ach-rest__satellite--left[b-mwc807mnq5] {
    left: -4px;
    top: calc(50% - 4px);
}

.ach-rest__satellite--right[b-mwc807mnq5] {
    right: -4px;
    top: calc(50% - 4px);
}

.ach-rest__core[b-mwc807mnq5] {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    /* Brand at the highlight, deep Brand through the body, Emerald at the rim. */
    background: radial-gradient(circle at 40% 35%, var(--aug-400) 0%, var(--aug-600) 35%, var(--pur-400) 100%);
    filter: blur(2px);
    box-shadow: 0 0 60px rgb(var(--aug-600-rgb) / 0.7), 0 0 100px rgb(var(--pur-400-rgb) / 0.4);
    animation: ach-breathe 5s ease-in-out infinite;
}

.ach-rest__moon[b-mwc807mnq5] {
    position: absolute;
    font-family: var(--font-display);
    font-size: 2.125rem; /* 34px, as in the design */
    color: var(--text-primary);
    text-shadow: 0 0 18px rgb(0 0 0 / 0.6);
}

/* ── Copy ───────────────────────────────────────────────── */

.ach-rest__title[b-mwc807mnq5] {
    margin: var(--space-8) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2.25rem, 7vw, 54px);
    line-height: var(--leading-none);
    color: var(--text-primary);
    white-space: nowrap;
    text-shadow: 0 0 28px rgb(var(--aug-600-rgb) / 0.7);
    animation: ach-glow-pulse 4s ease-in-out infinite;
}

.ach-rest__lead[b-mwc807mnq5] {
    margin: var(--space-5) 0 0;
    max-width: 460px;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-silver-300);
}

/* ── Readouts ───────────────────────────────────────────── */

.ach-rest__stats[b-mwc807mnq5] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.ach-rest__stat[b-mwc807mnq5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.ach-rest__value[b-mwc807mnq5] {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    font-size: clamp(1.75rem, 5vw, 40px);
    line-height: var(--leading-none);
    font-variant-numeric: tabular-nums;
}

.ach-rest__value--pur[b-mwc807mnq5] {
    color: var(--pur-300);
    text-shadow: 0 0 16px rgb(var(--pur-400-rgb) / 0.6);
}

.ach-rest__value--gold[b-mwc807mnq5] {
    color: var(--color-gold-300);
    text-shadow: 0 0 16px rgb(245 158 11 / 0.5);
}

.ach-rest__label[b-mwc807mnq5] {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.ach-rest__divider[b-mwc807mnq5] {
    width: 1px;
    height: 46px;
    background: rgb(148 163 184 / 0.25);
}

/*
  Sits where the design puts the "Exit rest mode (admin)" button. Participants
  cannot end a break, so the slot carries the status line instead.
*/
.ach-rest__note[b-mwc807mnq5] {
    margin: var(--space-10) 0 0;
    padding: var(--space-2) var(--space-5);
    border: 1px solid rgb(148 163 184 / 0.3);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

@media (max-width: 600px) {
    .ach-rest__orb[b-mwc807mnq5] {
        transform: scale(0.72);
    }

    .ach-rest__stats[b-mwc807mnq5] {
        gap: var(--space-5);
    }
}
/* /Components/Shared/OracleCompanion.razor.rz.scp.css */
/*
  The Oracle companion — GYRO-HALO (The Augmented) and GROVE-SHELL (The Purists).

  Ported from "AI Companion Finalists (Standalone).html". The design computes most of its styling
  in JS and writes it out as inline styles; here that becomes data-attribute rules
  (data-faction / data-mood / data-curious / data-finish) so only the numeric knobs stay inline.

  ── How to tune this file ────────────────────────────────────────────────────
  Every line tagged TUNE is a design knob. Anything reading var(--oa-…) is also a
  [Parameter] on OracleCompanion.razor — change the parameter default, not the CSS.

  Careful: CSS comments do not nest. Writing the TUNE tag with its comment delimiters inside this
  block would close the block early, and everything below would be parsed as CSS — which is exactly
  how the Augmented palette went missing once already.

  ── Keyframe naming ──────────────────────────────────────────────────────────
  Blazor's scoped-CSS rewriter renames @keyframes declared here and every animation that references
  them (oa-a-happy becomes oa-a-happy-b-<hash>), so they cannot collide with the ach-* set in
  wwwroot/css/achrona/tokens/animations.css. The oa- prefix is kept anyway, to make it obvious at a
  glance which file an animation belongs to.

  The flip side: an animation defined here is NOT reachable from another stylesheet, and one defined
  in animations.css is not reachable from here. Keep every companion keyframe in this file.

  Class names are deliberately ach-companion__* so the global
  @media (prefers-reduced-motion: reduce) rule in that same file — which targets [class^="ach-"] —
  stills the whole character for free.

  ── Scope ────────────────────────────────────────────────────────────────────
  The design source also carries earlier concepts (a uranium nucleus, a reactor core) and unpicked
  variants (four eye shapes, six blob shapes). Only what the two finalists actually use is ported:
  the Purists shell is the "wavy" blob with "dot" eyes, which is what the design ships as its state
  default. The Augmented orb keeps all four finishes because orbFinish is an authored prop.
*/

/* ═══════════════════════════════════════════════════════════════════════
   PALETTES

   These are the design's own hex values, used verbatim per the design call.

   TODO: reconcile with wwwroot/css/achrona/tokens/factions.css. Findings so far —

     1. Augmented: the two ladders are off by one step. The design's brand.p500 (#004fe2) is the
        repo's --aug-600; the repo inserted #2e64f5 as --aug-500 and pushed #004fe2 down one.
        Rough mapping: p50->--aug-100, p100~--aug-200, p200/p300~--aug-300, p500->--aug-600,
        p700 #0038a8 vs --aug-700 #0040b5, p800 #022a7a vs --aug-800 #083080,
        p900 #0a1f4a vs --aug-900 #081f52. Close enough that the companion still reads on-brand;
        switching to the tokens would be a small, safe change if we want one source of truth.

     2. Purists: these are genuinely different hues, and there is a naming trap. The design's
        palette entry LABELLED "Emerald" (#dcfce7 / #86efac / #4ade80 / #16a34a / #14532d) is the
        Tailwind *green* ramp. The repo's --pur-* — and AchronaPalette.Purists, also named
        "Emerald" — is the Tailwind *emerald* ramp (#d1fae5 / #a7f3d0 / #6ee7b7 / #34d399 /
        #10b981). Same label, different hue: the design's green is yellower and more saturated,
        the repo's emerald bluer. So the companion reads slightly warmer than the rest of the
        Purists UI. Needs a design call on which one is correct before the event.

     3. The orbiting spheres are #ef4444, from neither palette, so they get their own variable
        rather than being derived from the faction.
   ═══════════════════════════════════════════════════════════════════════ */

.ach-companion[data-faction="augmented"][b-66pxo0ypxs] {
    /* Design PALETTES.brand */
    --oa-p50: #eaf1ff;
    --oa-p100: #d6e4ff;
    --oa-p200: #a8c4ff;
    --oa-p300: #6fa0ff;
    --oa-p500: #004fe2;
    --oa-p600: #1f5ff0;
    --oa-p700: #0038a8;
    --oa-p800: #022a7a;
    --oa-p900: #0a1f4a;

    --oa-p200-rgb: 168 196 255;
    --oa-p500-rgb: 0 79 226;

    --oa-eye-color: var(--oa-p900);               /* TUNE: eye fill */
    --oa-core-size: 130px;                        /* TUNE: orb diameter */
    --oa-core-glow: 0 0 44px rgb(var(--oa-p500-rgb) / 0.7),
                    inset 0 0 22px rgb(var(--oa-p200-rgb) / 0.6);  /* TUNE: orb glow */

    /* TUNE: the orbiting spheres and their dashed tracks. Red on purpose — it is the one warm
       accent on an otherwise cold character. */
    --oa-orbit-ball: #ef4444;
    --oa-track-a: rgb(239 68 68 / 0.6);
    --oa-track-b: rgb(248 113 113 / 0.5);

    /* TUNE: the halo is deliberately Purist-green on the Augmented companion — a hint that the two
       factions share one Oracle. Change to var(--oa-p300) to make it monochrome. */
    --oa-halo-color: rgb(74 222 128 / 0.4);
}

.ach-companion[data-faction="purists"][b-66pxo0ypxs] {
    /* Design GPALETTES.emerald — see finding 2 above: this is the Tailwind green ramp. */
    --oa-g50: #dcfce7;
    --oa-g100: #86efac;
    --oa-g200: #4ade80;
    --oa-g300: #16a34a;
    --oa-g600: #14532d;

    --oa-g100-rgb: 134 239 172;
    --oa-g200-rgb: 74 222 128;
    --oa-g300-rgb: 22 163 74;

    --oa-core-size: 118px;                        /* TUNE: cell diameter */
    --oa-core-glow: 0 0 46px rgb(var(--oa-g300-rgb) / 0.6),
                    inset 0 0 22px rgb(var(--oa-g100-rgb) / 0.4);  /* TUNE: cell glow */

    /* TUNE: cell interior. The two dark stops are the cytoplasm shading. */
    --oa-cell-bg: radial-gradient(circle at 35% 30%, var(--oa-g200), #14352a 55%, #081711 88%);

    /* TUNE: the odd bead out — amber against green, so one ring always reads as "other". */
    --oa-bead-amber: #fde68a;
    --oa-bead-amber-glow: #d97706;

    /* Purist eyes sit on a smaller face, so they track a little less than the Augmented ones.
       0.78 is the design's own multiplier. */
    --oa-gaze-damping: 0.78;                      /* TUNE: Purist gaze travel, relative to Augmented */
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGE

   The character is authored at 180x180 design pixels. Everything inside stays in those pixels and
   the whole stage is scaled, so the launcher and the admin previews share one set of proportions.
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Every element of the companion is a <span>, so the launcher can host it inside a <button>. An
  inline box ignores width and height, so anything here that is sized but not absolutely positioned
  (which blockifies on its own) needs an explicit display.
*/

.ach-companion[b-66pxo0ypxs] {
    --oa-scale: 1;
    --oa-gaze-x: 0;                               /* written by OracleCompanion.razor.js, -1..1 */
    --oa-gaze-y: 0;
    --oa-gaze-damping: 1;

    display: block;
    position: relative;
    width: calc(180px * var(--oa-scale));
    height: calc(180px * var(--oa-scale));
    flex-shrink: 0;
    pointer-events: none;
}

.ach-companion__stage[b-66pxo0ypxs] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%) scale(var(--oa-scale));
}

.ach-companion__wrap[b-66pxo0ypxs] {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ach-companion__wrap--aug[b-66pxo0ypxs] {
    perspective: 700px;                           /* TUNE: depth of the orbital tumble */
}

.ach-companion__defs[b-66pxo0ypxs] {
    position: absolute;
}

/* Shared by both cores. */
.ach-companion__core[b-66pxo0ypxs] {
    display: block;
    position: relative;
    z-index: 3;
    width: var(--oa-core-size);
    height: var(--oa-core-size);
    overflow: hidden;
    box-shadow: var(--oa-core-glow);
}

/* ═══════════════════════════════════════════════════════════════════════
   THE AUGMENTED — GYRO-HALO
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Idle drift ────────────────────────────────────────────────────────
   idle1 is the signature figure-eight. The other two are smaller drifts the design offers as
   alternates; they are reachable through PlayAsync but nothing selects them yet. */

.ach-companion__wrap--aug[b-66pxo0ypxs] {
    animation: oa-a-infinity-b-66pxo0ypxs var(--oa-infinity-speed) linear infinite;
}

.ach-companion[data-mood="idle2"] .ach-companion__wrap--aug[b-66pxo0ypxs] {
    animation: oa-a-idle2-b-66pxo0ypxs 4s ease-in-out infinite;     /* TUNE */
}

.ach-companion[data-mood="idle3"] .ach-companion__wrap--aug[b-66pxo0ypxs] {
    animation: oa-a-idle3-b-66pxo0ypxs 3.5s ease-in-out infinite;   /* TUNE */
}

/* An expression takes the body over, so the drift stops for its duration. */
.ach-companion[data-mood="happy"] .ach-companion__wrap--aug[b-66pxo0ypxs],
.ach-companion[data-mood="sad"] .ach-companion__wrap--aug[b-66pxo0ypxs] {
    animation: none;
}

/* The design defines aBored but never wires it up — the switch only maps happy and sad. Wired here
   so Bored is actually distinguishable from Idle. */
.ach-companion[data-mood="bored"] .ach-companion__wrap--aug[b-66pxo0ypxs] {
    animation: oa-a-bored-b-66pxo0ypxs 2.8s ease-in-out 1;          /* TUNE */
}

/* ── Orbital tracks ──────────────────────────────────────────────────── */

.ach-companion__track[b-66pxo0ypxs] {
    position: absolute;
    top: 50%;
    left: 16px;
    width: calc(100% - 32px);
    height: 1px;
    /* TUNE: dash rhythm of the orbital tracks */
    background: repeating-linear-gradient(90deg, var(--oa-track-a) 0 6px, transparent 6px 12px);
    transform: translateY(-50%) rotate(var(--oa-ring-angle));
}

.ach-companion__track--b[b-66pxo0ypxs] {
    background: repeating-linear-gradient(90deg, var(--oa-track-b) 0 6px, transparent 6px 12px);
    transform: translateY(-50%) rotate(calc(var(--oa-ring-angle) * -1));
}

/* ── Orbiting spheres ────────────────────────────────────────────────────
   One nesting level per axis. From the outside in: the z-flip that swaps which sphere is in front,
   the tilted orbital plane, the sweep around that plane, the sphere's own position on the ring, a
   counter-rotation that keeps it upright, and finally the tumbling sphere itself. */

.ach-companion__orbit[b-66pxo0ypxs] {
    position: absolute;
    inset: 16px;
    transform-style: preserve-3d;
    animation: oa-ball-z-flip-a-b-66pxo0ypxs 3.5s linear var(--oa-delay) infinite;
}

.ach-companion__orbit--b[b-66pxo0ypxs] {
    animation-name: oa-ball-z-flip-b-b-66pxo0ypxs;
    animation-duration: 4.5s;                     /* TUNE: outer track lap time */
}

.ach-companion__orbit-plane[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-style: preserve-3d;
    /* 88deg rather than 90 so the ring never degenerates to a zero-width line. */
    transform: rotateZ(var(--oa-ring-angle)) rotateX(88deg);
}

.ach-companion__orbit--b .ach-companion__orbit-plane[b-66pxo0ypxs] {
    transform: rotateZ(calc(var(--oa-ring-angle) * -1)) rotateX(88deg);
}

.ach-companion__orbit-spin[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: oa-spin-z-b-66pxo0ypxs 3.5s linear var(--oa-delay) infinite;
}

.ach-companion__orbit--b .ach-companion__orbit-spin[b-66pxo0ypxs] {
    animation: oa-spin-z-b-66pxo0ypxs 4.5s linear var(--oa-delay) infinite reverse;
}

.ach-companion__ball[b-66pxo0ypxs] {
    position: absolute;
    top: calc(var(--oa-ball-size) / -2);
    left: calc(50% - var(--oa-ball-size) / 2);
    width: var(--oa-ball-size);
    height: var(--oa-ball-size);
    perspective: 200px;
    transform-style: preserve-3d;
    animation: oa-ball-depth-a-b-66pxo0ypxs 3.5s linear var(--oa-delay) infinite;
}

.ach-companion__orbit--b .ach-companion__ball[b-66pxo0ypxs] {
    top: auto;
    bottom: calc(var(--oa-ball-size) / -2);
    animation: oa-ball-depth-b-b-66pxo0ypxs 4.5s linear var(--oa-delay) infinite;
}

.ach-companion__ball-counter[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: oa-counter-z-neg-b-66pxo0ypxs 3.5s linear var(--oa-delay) infinite;
}

.ach-companion__orbit--b .ach-companion__ball-counter[b-66pxo0ypxs] {
    animation: oa-spin-z-b-66pxo0ypxs 4.5s linear var(--oa-delay) infinite;
}

.ach-companion__ball-flat[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-88deg) rotateZ(calc(var(--oa-ring-angle) * -1));
}

.ach-companion__orbit--b .ach-companion__ball-flat[b-66pxo0ypxs] {
    transform: rotateX(-88deg) rotateZ(var(--oa-ring-angle));
}

.ach-companion__ball-clip[b-66pxo0ypxs] {
    display: block;
    width: 100%;
    height: 100%;
    /* Slightly inside 50% so the stack of discs never pokes out of the silhouette. */
    clip-path: circle(48%);
}

.ach-companion__sphere[b-66pxo0ypxs] {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: oa-animate-sphere-b-66pxo0ypxs 12s linear infinite;  /* TUNE: sphere tumble speed */
}

.ach-companion__orbit--b .ach-companion__sphere[b-66pxo0ypxs] {
    animation-duration: 13s;
}

/* 15 flat discs rotated around three axes read as a solid sphere once they are spinning. */
.ach-companion__slice[b-66pxo0ypxs] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--oa-orbit-ball);
}

/* ── Halo ────────────────────────────────────────────────────────────── */

.ach-companion__halo[b-66pxo0ypxs] {
    position: absolute;
    inset: -14px;                                 /* TUNE: halo stand-off from the orb */
    border-radius: 50%;
    border: 1.5px dashed var(--oa-halo-color);
}

.ach-companion__halo-spin[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: oa-spin-z-b-66pxo0ypxs 5s linear infinite;      /* TUNE: halo node lap time */
}

.ach-companion__halo-node[b-66pxo0ypxs] {
    position: absolute;
    top: calc(50% - 5px);
    left: -5px;
    width: 10px;                                  /* TUNE: halo node size */
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--oa-p100) 45%, var(--oa-p700) 100%);
    background-size: 220% 220%;
    box-shadow: 0 0 12px var(--oa-p300), inset -2px -2px 3px rgb(0 0 0 / 0.5);
    animation: oa-node-shade-b-66pxo0ypxs 2.2s linear infinite;
}

/* ── Orb ─────────────────────────────────────────────────────────────── */

.ach-companion__core--aug[b-66pxo0ypxs] {
    border-radius: 50%;
}

.ach-companion[data-mood="happy"] .ach-companion__core--aug[b-66pxo0ypxs] {
    animation: oa-a-happy-b-66pxo0ypxs 0.9s ease-out 1;
}

.ach-companion[data-mood="sad"] .ach-companion__core--aug[b-66pxo0ypxs] {
    animation: oa-a-sad-b-66pxo0ypxs 1.4s ease-in-out 1;
}

.ach-companion__orb-base[b-66pxo0ypxs],
.ach-companion__orb-sheen[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
}

/* TUNE: the four orb finishes, from orbFinishStyles() in the design source. Swap with the
   OrbFinish parameter; "frosted" is the authored default. */

.ach-companion[data-finish="matte"] .ach-companion__orb-base[b-66pxo0ypxs] {
    background: radial-gradient(circle at 45% 40%, var(--oa-p300), var(--oa-p600) 70%, var(--oa-p800));
}

.ach-companion[data-finish="matte"] .ach-companion__orb-sheen[b-66pxo0ypxs] {
    display: none;
}

.ach-companion[data-finish="glossy"] .ach-companion__orb-base[b-66pxo0ypxs] {
    background: radial-gradient(circle at 38% 32%, var(--oa-p50), var(--oa-p500) 60%, var(--oa-p700));
}

.ach-companion[data-finish="glossy"] .ach-companion__orb-sheen[b-66pxo0ypxs] {
    inset: auto;
    top: 8%;
    left: 14%;
    width: 34%;
    height: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 0.85), transparent 70%);
    filter: blur(2px);
    mix-blend-mode: screen;
}

.ach-companion[data-finish="metallic"] .ach-companion__orb-base[b-66pxo0ypxs] {
    background: linear-gradient(125deg,
        var(--oa-p800) 0%, var(--oa-p300) 42%, var(--oa-p700) 52%, var(--oa-p500) 75%, var(--oa-p800) 100%);
}

.ach-companion[data-finish="metallic"] .ach-companion__orb-sheen[b-66pxo0ypxs] {
    inset: auto;
    top: 0;
    left: -10%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
    transform: rotate(20deg);
    filter: blur(3px);
    mix-blend-mode: screen;
}

.ach-companion[data-finish="frosted"] .ach-companion__orb-base[b-66pxo0ypxs] {
    background: radial-gradient(circle at 50% 45%, var(--oa-p200), var(--oa-p500) 65%, var(--oa-p700));
}

.ach-companion[data-finish="frosted"] .ach-companion__orb-sheen[b-66pxo0ypxs] {
    background: radial-gradient(circle at 50% 40%, rgb(255 255 255 / 0.35), transparent 70%);
    mix-blend-mode: overlay;
}

/* ── Maze ────────────────────────────────────────────────────────────────
   Two crossed line grids multiplied over the orb. They drift opposite to the figure-eight so the
   pattern looks like it belongs to the world rather than the orb — hence a counter-animation with
   the same period as the body drift. */

.ach-companion__maze[b-66pxo0ypxs] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--oa-maze-size);
    height: var(--oa-maze-size);
    background-image: repeating-linear-gradient(var(--oa-maze-rotation),
        rgb(0 0 0 / var(--oa-maze-opacity)) 0 var(--oa-maze-thickness),
        transparent var(--oa-maze-thickness) var(--oa-maze-spacing));
    mix-blend-mode: multiply;
    animation: oa-maze-counter-b-66pxo0ypxs var(--oa-infinity-speed) linear infinite;
}

.ach-companion__maze--h[b-66pxo0ypxs] {
    background-image: repeating-linear-gradient(calc(var(--oa-maze-rotation) + 90deg),
        rgb(0 0 0 / var(--oa-maze-opacity)) 0 var(--oa-maze-thickness),
        transparent var(--oa-maze-thickness) var(--oa-maze-spacing));
}

/* ── Eyes ────────────────────────────────────────────────────────────── */

.ach-companion__eyes[b-66pxo0ypxs] {
    position: absolute;
    display: flex;
    z-index: 6;
}

.ach-companion__eyes--aug[b-66pxo0ypxs] {
    gap: 16px;                                    /* TUNE: eye spacing */
}

.ach-companion__eyes--aug .ach-companion__eye[b-66pxo0ypxs] {
    width: 10px;                                  /* TUNE: eye size */
    height: 20px;
    border-radius: 3px;
    background: var(--oa-eye-color);
    overflow: visible;
    transform: translate(
        calc(var(--oa-gaze-x) * var(--oa-gaze-intensity) * var(--oa-gaze-damping)),
        calc(var(--oa-gaze-y) * var(--oa-gaze-intensity) * var(--oa-gaze-damping)));
    animation: oa-eye-blink-b-66pxo0ypxs 4.4s infinite;        /* TUNE: blink rhythm */
}

/* ═══════════════════════════════════════════════════════════════════════
   THE PURISTS — GROVE-SHELL
   ═══════════════════════════════════════════════════════════════════════ */

/* The Purist body has no drift of its own — its life comes from the breathing core, so the wrap
   stays put in every mood. (wrapAnimFor returns 'none' for this prefix in the design.) */

/* ── Gyroscope rings ─────────────────────────────────────────────────── */

/*
  A note on the tilt, because it is not what it looks like.

  Each ring carries transform: rotate(Xdeg) scaleY(0.42) — a tilted, flattened ellipse — and a
  spin animation that also drives transform. A CSS animation outranks the specified value for any
  property it animates, so while the spin is running the tilt and the flattening are DISCARDED and
  the rings render as three plain concentric circles with beads orbiting them. That is how the
  design export itself renders, so it is reproduced faithfully here.

  TUNE: to keep the tilt instead — three flattened ellipses tumbling at different angles, which is
  what "gyroscope" suggests and is very likely what was intended — change each ring's
  animation-name below from oa-gyro-spin to oa-gyro-spin-1 / -2 / -3. Those keyframes are defined
  and fold the tilt into every frame. Worth showing both to the designer before the event.

  The specified transform is not wasted either way: under prefers-reduced-motion the animations are
  suppressed and the rings settle into their tilted, flattened pose.
*/

.ach-companion__gyro[b-66pxo0ypxs] {
    position: absolute;
    width: 178px;
    height: 178px;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--oa-g200-rgb) / 0.4);
}

.ach-companion__gyro--1[b-66pxo0ypxs] {
    transform: rotate(20deg) scaleY(0.42);        /* TUNE: ring tilt and flatness */
    animation: oa-gyro-spin-b-66pxo0ypxs 9s linear infinite;   /* TUNE: ring speed; see note above */
}

.ach-companion__gyro--2[b-66pxo0ypxs] {
    border-color: rgb(var(--oa-g300-rgb) / 0.35);
    transform: rotate(-35deg) scaleY(0.42);
    animation: oa-gyro-spin-b-66pxo0ypxs 12s linear infinite reverse;
}

.ach-companion__gyro--3[b-66pxo0ypxs] {
    border-color: rgb(var(--oa-g200-rgb) / 0.28);
    transform: rotate(80deg) scaleY(0.42);
    animation: oa-gyro-spin-b-66pxo0ypxs 15s linear infinite;
}

.ach-companion__bead[b-66pxo0ypxs] {
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 8px;                                   /* TUNE: bead size */
    height: 8px;
    border-radius: 50%;
    background: var(--oa-g100);
    box-shadow: 0 0 10px var(--oa-g200);
}

.ach-companion__gyro--2 .ach-companion__bead[b-66pxo0ypxs] {
    top: auto;
    bottom: -4px;
    background: var(--oa-bead-amber);
    box-shadow: 0 0 10px var(--oa-bead-amber-glow);
}

.ach-companion__gyro--3 .ach-companion__bead[b-66pxo0ypxs] {
    top: -3px;
    left: calc(50% - 3px);
    width: 7px;
    height: 7px;
    box-shadow: 0 0 8px var(--oa-g200);
}

/* ── Cell ────────────────────────────────────────────────────────────────
   Two animations run together on purpose: one drives transform (breathe or an expression), the
   other drives the individual rotate and scale properties (the blob's slow wobble), so they never
   fight over the same property — rotate and scale compose with transform rather than replace it.

   The wobble used to be a border-radius morph. That cannot run on the compositor, and the cell
   clips six blurred organelles and an SVG turbulence grain, so every frame re-rasterised all of it
   on the main thread: 131 frames over 25 ms per 10 s on /preview/perf, against 3 without it
   (docs/performance.md). Turning and squashing a fixed blob reads much the same and costs nothing.
   The eyes and the gloss counter-turn, so the face stays upright and the light stays top-left. */

.ach-companion__core--pur[b-66pxo0ypxs] {
    border-radius: 38% 62% 58% 42% / 62% 45% 55% 38%;   /* TUNE: resting blob shape */
    animation:
        oa-g-breathe-b-66pxo0ypxs var(--oa-breathe-speed) ease-in-out infinite,
        oa-blob-turn-b-66pxo0ypxs 10s ease-in-out infinite;           /* TUNE: wobble speed — keep the counter's in step */
}

.ach-companion[data-mood="happy"] .ach-companion__core--pur[b-66pxo0ypxs] {
    animation:
        oa-g-happy-b-66pxo0ypxs 0.9s ease-out 1,
        oa-blob-turn-b-66pxo0ypxs 10s ease-in-out infinite;
}

.ach-companion[data-mood="sad"] .ach-companion__core--pur[b-66pxo0ypxs] {
    animation:
        oa-g-sad-b-66pxo0ypxs 1.4s ease-in-out 1,
        oa-blob-turn-b-66pxo0ypxs 10s ease-in-out infinite;
}

/* As with the Augmented, the design defines gBored but never wires it up. */
.ach-companion[data-mood="bored"] .ach-companion__core--pur[b-66pxo0ypxs] {
    animation:
        oa-g-bored-b-66pxo0ypxs 2.8s ease-in-out 1,
        oa-blob-turn-b-66pxo0ypxs 10s ease-in-out infinite;
}

.ach-companion__cell-bg[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
    background: var(--oa-cell-bg);
}

/* ── Organelles ──────────────────────────────────────────────────────────
   Six blurred blobs on long, mutually-prime loops so the interior never visibly repeats.
   TUNE: each one's size, position and loop length is independent. */

.ach-companion__organelles[b-66pxo0ypxs] {
    position: absolute;
    inset: 0;
}

.ach-companion__organelle[b-66pxo0ypxs] {
    position: absolute;
    border-radius: 50%;
}

.ach-companion__organelle--1[b-66pxo0ypxs] {
    width: 50px; height: 40px; top: 12px; left: 12px;
    background: rgb(235 255 245 / 0.92);
    filter: blur(5px);
    animation: oa-organelle-1-b-66pxo0ypxs 18s ease-in-out infinite;
}

.ach-companion__organelle--2[b-66pxo0ypxs] {
    width: 46px; height: 56px; top: 56px; left: 62px;
    background: rgb(2 12 7 / 0.95);
    filter: blur(6px);
    animation: oa-organelle-2-b-66pxo0ypxs 22s ease-in-out infinite;
}

.ach-companion__organelle--3[b-66pxo0ypxs] {
    width: 32px; height: 36px; top: 6px; left: 66px;
    background: rgb(190 255 215 / 0.85);
    filter: blur(4px);
    animation: oa-organelle-3-b-66pxo0ypxs 16s ease-in-out infinite;
}

.ach-companion__organelle--4[b-66pxo0ypxs] {
    width: 40px; height: 30px; top: 84px; left: 24px;
    background: rgb(1 10 6 / 0.92);
    filter: blur(5px);
    animation: oa-organelle-4-b-66pxo0ypxs 20s ease-in-out infinite;
}

.ach-companion__organelle--5[b-66pxo0ypxs] {
    width: 24px; height: 24px; top: 36px; left: 88px;
    background: rgb(1 16 9 / 0.9);
    filter: blur(4px);
    animation: oa-organelle-5-b-66pxo0ypxs 17s ease-in-out infinite;
}

.ach-companion__organelle--6[b-66pxo0ypxs] {
    width: 20px; height: 20px; top: 66px; left: 4px;
    background: rgb(215 255 230 / 0.75);
    filter: blur(3px);
    animation: oa-organelle-6-b-66pxo0ypxs 14s ease-in-out infinite;
}

/* Film grain over the cytoplasm. Oversized and drifting so the noise never sits still. */
.ach-companion__grain[b-66pxo0ypxs] {
    position: absolute;
    inset: -25%;
    opacity: 0.45;                                /* TUNE: grain strength */
    mix-blend-mode: soft-light;
    animation: oa-grain-drift-b-66pxo0ypxs 22s ease-in-out infinite;
}

/* Specular highlight — the one thing that makes the cell read as wet rather than flat. */
.ach-companion__gloss[b-66pxo0ypxs] {
    position: absolute;
    top: 11%;
    left: 17%;
    width: 22%;
    height: 14%;
    /* Counter-turned about the cell's centre, not its own, so the light stays where it is:
       (50% - left) / width and (50% - top) / height, in the gloss's own percentages. */
    transform-origin: 150% 278.6%;
    animation: oa-blob-turn-counter-b-66pxo0ypxs 10s ease-in-out infinite;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 0.65), transparent 70%);
    filter: blur(1.5px);
    mix-blend-mode: screen;
}

/* ── Eyes ────────────────────────────────────────────────────────────── */

.ach-companion__eyes--pur[b-66pxo0ypxs] {
    inset: 0;
    animation: oa-blob-turn-counter-b-66pxo0ypxs 10s ease-in-out infinite;
    align-items: center;
    justify-content: center;
    gap: 16px;                                    /* TUNE: eye spacing */
}

.ach-companion__eyes--pur .ach-companion__eye[b-66pxo0ypxs] {
    width: 11px;                                  /* TUNE: eye size */
    height: 11px;
    border-radius: 50%;
    background: #0a0f0c;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), 0 0 6px rgb(255 255 255 / 0.3);
    transform: translate(
        calc(var(--oa-gaze-x) * var(--oa-gaze-intensity) * var(--oa-gaze-damping)),
        calc(var(--oa-gaze-y) * var(--oa-gaze-intensity) * var(--oa-gaze-damping)));
}

/* ═══════════════════════════════════════════════════════════════════════
   EXPRESSIONS — EYES

   An expression overrides gaze: the design zeroes the gaze vector whenever a mood fires, so these
   rules simply win over the translate above.
   ═══════════════════════════════════════════════════════════════════════ */

.ach-companion[data-mood="happy"] .ach-companion__eyes--aug .ach-companion__eye[b-66pxo0ypxs] {
    transform: scaleY(0.45) translateY(-3px);
    opacity: 1;
    animation: none;
}

.ach-companion[data-mood="sad"] .ach-companion__eyes--aug .ach-companion__eye[b-66pxo0ypxs] {
    transform: none;
    animation: oa-a-sad-eyes-b-66pxo0ypxs 1.4s ease-in-out 1;
}

.ach-companion[data-mood="bored"] .ach-companion__eyes--aug .ach-companion__eye[b-66pxo0ypxs] {
    transform: scaleY(0.35);
    opacity: 0.5;
    animation: none;
}

.ach-companion[data-mood="happy"] .ach-companion__eyes--pur .ach-companion__eye[b-66pxo0ypxs] {
    transform: scaleY(0.4) translateY(-2px);
}

.ach-companion[data-mood="sad"] .ach-companion__eyes--pur .ach-companion__eye[b-66pxo0ypxs] {
    transform: translateY(20px);
    opacity: 0.5;
}

.ach-companion[data-mood="bored"] .ach-companion__eyes--pur .ach-companion__eye[b-66pxo0ypxs] {
    transform: scaleY(0.4);
    opacity: 0.5;
}

/* Curious is a gaze sweep rather than an expression, so it only claims the eyes and only while no
   one-shot mood is running. */
.ach-companion[data-curious="true"][data-mood^="idle"] .ach-companion__eyes--aug .ach-companion__eye[b-66pxo0ypxs] {
    transform: none;
    animation: oa-a-curious-b-66pxo0ypxs var(--oa-curious-hold) ease-in-out 1;
}

.ach-companion[data-curious="true"][data-mood^="idle"] .ach-companion__eyes--pur .ach-companion__eye[b-66pxo0ypxs] {
    transform: none;
    animation: oa-g-curious-b-66pxo0ypxs var(--oa-curious-hold) ease-in-out 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   KEYFRAMES

   All oa- prefixed: @keyframes are global even in a scoped stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */

/* The signature figure-eight. 24 steps sampled off a lemniscate; --oa-infinity-scale sizes it. */
@keyframes oa-a-infinity-b-66pxo0ypxs {
    0%     { transform: translate(calc(var(--oa-infinity-scale) *  17.00px), calc(var(--oa-infinity-scale) *  0.00px)); }
    4.167% { transform: translate(calc(var(--oa-infinity-scale) *  15.39px), calc(var(--oa-infinity-scale) *  3.98px)); }
    8.333% { transform: translate(calc(var(--oa-infinity-scale) *  11.78px), calc(var(--oa-infinity-scale) *  5.89px)); }
    12.5%  { transform: translate(calc(var(--oa-infinity-scale) *   8.01px), calc(var(--oa-infinity-scale) *  5.67px)); }
    16.667%{ transform: translate(calc(var(--oa-infinity-scale) *   4.86px), calc(var(--oa-infinity-scale) *  4.21px)); }
    20.833%{ transform: translate(calc(var(--oa-infinity-scale) *   2.28px), calc(var(--oa-infinity-scale) *  2.20px)); }
    25%    { transform: translate(0, 0); }
    29.167%{ transform: translate(calc(var(--oa-infinity-scale) *  -2.28px), calc(var(--oa-infinity-scale) * -2.20px)); }
    33.333%{ transform: translate(calc(var(--oa-infinity-scale) *  -4.86px), calc(var(--oa-infinity-scale) * -4.21px)); }
    37.5%  { transform: translate(calc(var(--oa-infinity-scale) *  -8.01px), calc(var(--oa-infinity-scale) * -5.67px)); }
    41.667%{ transform: translate(calc(var(--oa-infinity-scale) * -11.78px), calc(var(--oa-infinity-scale) * -5.89px)); }
    45.833%{ transform: translate(calc(var(--oa-infinity-scale) * -15.39px), calc(var(--oa-infinity-scale) * -3.98px)); }
    50%    { transform: translate(calc(var(--oa-infinity-scale) * -17.00px), 0); }
    54.167%{ transform: translate(calc(var(--oa-infinity-scale) * -15.39px), calc(var(--oa-infinity-scale) *  3.98px)); }
    58.333%{ transform: translate(calc(var(--oa-infinity-scale) * -11.78px), calc(var(--oa-infinity-scale) *  5.89px)); }
    62.5%  { transform: translate(calc(var(--oa-infinity-scale) *  -8.01px), calc(var(--oa-infinity-scale) *  5.67px)); }
    66.667%{ transform: translate(calc(var(--oa-infinity-scale) *  -4.86px), calc(var(--oa-infinity-scale) *  4.21px)); }
    70.833%{ transform: translate(calc(var(--oa-infinity-scale) *  -2.28px), calc(var(--oa-infinity-scale) *  2.20px)); }
    75%    { transform: translate(0, 0); }
    79.167%{ transform: translate(calc(var(--oa-infinity-scale) *   2.28px), calc(var(--oa-infinity-scale) * -2.20px)); }
    83.333%{ transform: translate(calc(var(--oa-infinity-scale) *   4.86px), calc(var(--oa-infinity-scale) * -4.21px)); }
    87.5%  { transform: translate(calc(var(--oa-infinity-scale) *   8.01px), calc(var(--oa-infinity-scale) * -5.67px)); }
    91.667%{ transform: translate(calc(var(--oa-infinity-scale) *  11.78px), calc(var(--oa-infinity-scale) * -5.89px)); }
    95.833%{ transform: translate(calc(var(--oa-infinity-scale) *  15.39px), calc(var(--oa-infinity-scale) * -3.98px)); }
    100%   { transform: translate(calc(var(--oa-infinity-scale) *  17.00px), 0); }
}

/* The maze runs the figure-eight backwards, so it appears to stay still in world space while the
   orb moves across it. translate(-50%,-50%) is folded in because the plane is centre-anchored. */
@keyframes oa-maze-counter-b-66pxo0ypxs {
    0%     { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) * -17.00px), 0); }
    4.167% { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) * -15.39px), calc(var(--oa-infinity-scale) * -3.98px)); }
    8.333% { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) * -11.78px), calc(var(--oa-infinity-scale) * -5.89px)); }
    12.5%  { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  -8.01px), calc(var(--oa-infinity-scale) * -5.67px)); }
    16.667%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  -4.86px), calc(var(--oa-infinity-scale) * -4.21px)); }
    20.833%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  -2.28px), calc(var(--oa-infinity-scale) * -2.20px)); }
    25%    { transform: translate(-50%, -50%); }
    29.167%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *   2.28px), calc(var(--oa-infinity-scale) *  2.20px)); }
    33.333%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *   4.86px), calc(var(--oa-infinity-scale) *  4.21px)); }
    37.5%  { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *   8.01px), calc(var(--oa-infinity-scale) *  5.67px)); }
    41.667%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  11.78px), calc(var(--oa-infinity-scale) *  5.89px)); }
    45.833%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  15.39px), calc(var(--oa-infinity-scale) *  3.98px)); }
    50%    { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  17.00px), 0); }
    54.167%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  15.39px), calc(var(--oa-infinity-scale) * -3.98px)); }
    58.333%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  11.78px), calc(var(--oa-infinity-scale) * -5.89px)); }
    62.5%  { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *   8.01px), calc(var(--oa-infinity-scale) * -5.67px)); }
    66.667%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *   4.86px), calc(var(--oa-infinity-scale) * -4.21px)); }
    70.833%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *   2.28px), calc(var(--oa-infinity-scale) * -2.20px)); }
    75%    { transform: translate(-50%, -50%); }
    79.167%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  -2.28px), calc(var(--oa-infinity-scale) *  2.20px)); }
    83.333%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  -4.86px), calc(var(--oa-infinity-scale) *  4.21px)); }
    87.5%  { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) *  -8.01px), calc(var(--oa-infinity-scale) *  5.67px)); }
    91.667%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) * -11.78px), calc(var(--oa-infinity-scale) *  5.89px)); }
    95.833%{ transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) * -15.39px), calc(var(--oa-infinity-scale) *  3.98px)); }
    100%   { transform: translate(-50%, -50%) translate(calc(var(--oa-infinity-scale) * -17.00px), 0); }
}

@keyframes oa-a-idle2-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(6px, 3px) rotate(4deg); }
}

@keyframes oa-a-idle3-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-5px, -4px) scale(1.05); }
}

@keyframes oa-a-happy-b-66pxo0ypxs {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-16px) scale(1.12); }
    55%  { transform: translateY(2px) scale(0.92); }
    75%  { transform: translateY(-6px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes oa-a-sad-b-66pxo0ypxs {
    0%   { transform: translateY(0) rotate(0deg); }
    15%  { transform: translateY(4px) rotate(-9deg); }
    30%  { transform: translateY(7px) rotate(8deg); }
    45%  { transform: translateY(9px) rotate(-7deg); }
    60%  { transform: translateY(11px) rotate(5deg); }
    75%  { transform: translateY(12px) rotate(-3deg); }
    100% { transform: translateY(12px) rotate(0deg); }
}

@keyframes oa-a-sad-eyes-b-66pxo0ypxs {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    15%  { transform: translateY(12px) rotate(-9deg); opacity: 0.85; }
    30%  { transform: translateY(20px) rotate(8deg); opacity: 0.7; }
    45%  { transform: translateY(26px) rotate(-7deg); opacity: 0.6; }
    60%  { transform: translateY(31px) rotate(5deg); opacity: 0.56; }
    75%  { transform: translateY(34px) rotate(-3deg); opacity: 0.55; }
    100% { transform: translateY(34px) rotate(0deg); opacity: 0.55; }
}

@keyframes oa-a-bored-b-66pxo0ypxs {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    50%      { transform: rotate(-3deg) translateX(-4px); filter: brightness(0.8); }
}

/* Sweeps the gaze around all four corners, then recentres. */
@keyframes oa-a-curious-b-66pxo0ypxs {
    0%        { transform: translate(0, 0); }
    8%, 22%   { transform: translate(calc(var(--oa-gaze-intensity) * -0.75), calc(var(--oa-gaze-intensity) * -0.65)); }
    30%, 44%  { transform: translate(calc(var(--oa-gaze-intensity) *  0.75), calc(var(--oa-gaze-intensity) * -0.65)); }
    52%, 66%  { transform: translate(calc(var(--oa-gaze-intensity) *  0.75), calc(var(--oa-gaze-intensity) *  0.65)); }
    74%, 88%  { transform: translate(calc(var(--oa-gaze-intensity) * -0.75), calc(var(--oa-gaze-intensity) *  0.65)); }
    96%, 100% { transform: translate(0, 0); }
}

@keyframes oa-g-curious-b-66pxo0ypxs {
    0%        { transform: translate(0, 0); }
    8%, 22%   { transform: translate(calc(var(--oa-gaze-intensity) * -0.6), calc(var(--oa-gaze-intensity) * -0.5)); }
    30%, 44%  { transform: translate(calc(var(--oa-gaze-intensity) *  0.6), calc(var(--oa-gaze-intensity) * -0.5)); }
    52%, 66%  { transform: translate(calc(var(--oa-gaze-intensity) *  0.6), calc(var(--oa-gaze-intensity) *  0.5)); }
    74%, 88%  { transform: translate(calc(var(--oa-gaze-intensity) * -0.6), calc(var(--oa-gaze-intensity) *  0.5)); }
    96%, 100% { transform: translate(0, 0); }
}

/* A long hold at full opacity with one quick dip — reads as a blink rather than a pulse. */
@keyframes oa-eye-blink-b-66pxo0ypxs {
    0%, 88%, 100% { opacity: 1; }
    94%           { opacity: 0.15; }
}

@keyframes oa-g-breathe-b-66pxo0ypxs {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(var(--oa-breathe-scale)); }
}

@keyframes oa-g-happy-b-66pxo0ypxs {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-14px) scale(1.1); }
    55%  { transform: translateY(2px) scale(0.93); }
    75%  { transform: translateY(-5px) scale(1.03); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes oa-g-sad-b-66pxo0ypxs {
    0%   { transform: translateY(0) rotate(0deg); }
    15%  { transform: translateY(3px) rotate(-9deg); }
    30%  { transform: translateY(6px) rotate(8deg); }
    45%  { transform: translateY(8px) rotate(-7deg); }
    60%  { transform: translateY(9px) rotate(5deg); }
    75%  { transform: translateY(10px) rotate(-3deg); }
    100% { transform: translateY(10px) rotate(0deg); }
}

@keyframes oa-g-bored-b-66pxo0ypxs {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    50%      { transform: rotate(-3deg) translateX(-4px); filter: brightness(0.82); }
}

/* The cell's wobble: the resting blob turned and squashed a little, compositor-only. */
@keyframes oa-blob-turn-b-66pxo0ypxs {
    0%, 100% { rotate: 0deg;   scale: 1 1; }
    25%      { rotate: 14deg;  scale: 1.05 0.95; }
    50%      { rotate: -8deg;  scale: 0.96 1.04; }
    75%      { rotate: 9deg;   scale: 1.03 0.97; }
}

/*
  Undoes oa-blob-turn for what sits inside the cell and should not turn with it — near enough: a
  non-uniform scale and a rotation do not commute, so a few percent of squash is left over.
*/
@keyframes oa-blob-turn-counter-b-66pxo0ypxs {
    0%, 100% { rotate: 0deg;   scale: 1 1; }
    25%      { rotate: -14deg; scale: 0.952 1.053; }
    50%      { rotate: 8deg;   scale: 1.042 0.962; }
    75%      { rotate: -9deg;  scale: 0.971 1.031; }
}

@keyframes oa-gyro-spin-b-66pxo0ypxs {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Tilt-preserving alternatives — see the note in the gyro section above. Unused by default. */
@keyframes oa-gyro-spin-1-b-66pxo0ypxs {
    from { transform: rotate(20deg) scaleY(0.42) rotate(0deg); }
    to   { transform: rotate(20deg) scaleY(0.42) rotate(360deg); }
}

@keyframes oa-gyro-spin-2-b-66pxo0ypxs {
    from { transform: rotate(-35deg) scaleY(0.42) rotate(0deg); }
    to   { transform: rotate(-35deg) scaleY(0.42) rotate(360deg); }
}

@keyframes oa-gyro-spin-3-b-66pxo0ypxs {
    from { transform: rotate(80deg) scaleY(0.42) rotate(0deg); }
    to   { transform: rotate(80deg) scaleY(0.42) rotate(360deg); }
}

@keyframes oa-spin-z-b-66pxo0ypxs {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(360deg); }
}

@keyframes oa-counter-z-neg-b-66pxo0ypxs {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(-360deg); }
}

/* Swaps which track is painted in front, so the two rings appear to interleave. */
@keyframes oa-ball-z-flip-a-b-66pxo0ypxs {
    0%   { z-index: 5; }
    50%  { z-index: 1; }
    100% { z-index: 5; }
}

@keyframes oa-ball-z-flip-b-b-66pxo0ypxs {
    0%   { z-index: 1; }
    50%  { z-index: 5; }
    100% { z-index: 1; }
}

/* Fakes distance: the sphere shrinks as it swings behind the orb. */
@keyframes oa-ball-depth-a-b-66pxo0ypxs {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.62); }
    100% { transform: scale(1); }
}

@keyframes oa-ball-depth-b-b-66pxo0ypxs {
    0%   { transform: scale(0.62); }
    50%  { transform: scale(1); }
    100% { transform: scale(0.62); }
}

@keyframes oa-animate-sphere-b-66pxo0ypxs {
    0%   { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
    50%  { transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg); }
    100% { transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg); }
}

/* Slides the node's radial gradient so its lit side tracks its travel. */
@keyframes oa-node-shade-b-66pxo0ypxs {
    0%   { background-position: 30% 28%; }
    50%  { background-position: 70% 72%; }
    100% { background-position: 30% 28%; }
}

@keyframes oa-organelle-1-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    14%      { transform: translate(18px, 10px) scale(1.1); }
    30%      { transform: translate(26px, -14px) scale(0.95); }
    50%      { transform: translate(8px, 26px) scale(0.92); }
    66%      { transform: translate(-20px, 20px) scale(1.12); }
    82%      { transform: translate(-14px, 12px) scale(1.05); }
}

@keyframes oa-organelle-2-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    18%      { transform: translate(-22px, -8px) scale(0.88); }
    38%      { transform: translate(-28px, 16px) scale(1.05); }
    58%      { transform: translate(-10px, -26px) scale(1.08); }
    78%      { transform: translate(16px, -6px) scale(0.9); }
    90%      { transform: translate(12px, -14px) scale(0.96); }
}

@keyframes oa-organelle-3-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20%      { transform: translate(-20px, 18px) scale(1.15); }
    45%      { transform: translate(-8px, -20px) scale(0.88); }
    70%      { transform: translate(10px, 10px) scale(0.9); }
    88%      { transform: translate(22px, -8px) scale(1.06); }
}

@keyframes oa-organelle-4-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    16%      { transform: translate(20px, -16px) scale(1.08); }
    34%      { transform: translate(24px, 14px) scale(0.92); }
    58%      { transform: translate(4px, -4px) scale(0.85); }
    76%      { transform: translate(-16px, 8px) scale(1.02); }
    92%      { transform: translate(-8px, -22px) scale(1.1); }
}

@keyframes oa-organelle-5-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    24%      { transform: translate(-24px, 14px) scale(1.2); }
    48%      { transform: translate(-12px, -22px) scale(0.92); }
    68%      { transform: translate(18px, -10px) scale(1.05); }
    85%      { transform: translate(-6px, -10px) scale(0.9); }
}

@keyframes oa-organelle-6-b-66pxo0ypxs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20%      { transform: translate(20px, 14px) scale(0.8); }
    42%      { transform: translate(-14px, 20px) scale(1.05); }
    62%      { transform: translate(6px, -8px) scale(1.1); }
    82%      { transform: translate(-20px, -14px) scale(0.92); }
}

@keyframes oa-grain-drift-b-66pxo0ypxs {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(-3%, 2%) rotate(4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
/* /Components/Shared/OracleFamiliar.razor.rz.scp.css */
/*
  The Oracle — the AI familiar in the corner.
  Ported from the ORACLE section of "Achrona Challenge Site.dc.html"; the design's two
  oTheme objects become the two data-faction blocks below.
*/

.ach-oracle[b-54x34auu1g] {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    font-family: var(--font-body);
}

/* ── Faction theming ────────────────────────────────────── */

.ach-oracle[data-faction="augmented"][b-54x34auu1g] {
    --o-accent: var(--aug-400);
    --o-orb: radial-gradient(circle at 38% 32%, var(--aug-100) 0%, var(--aug-300) 22%, var(--aug-600) 60%, var(--aug-800) 100%);
    --o-orb-glow-sm: 0 0 10px rgb(var(--aug-600-rgb) / 0.6);
    --o-orb-glow-md: 0 0 14px rgb(var(--aug-600-rgb) / 0.7), inset 0 0 8px rgb(var(--aug-300-rgb) / 0.6);
    --o-orb-glow-lg: 0 0 24px rgb(var(--aug-600-rgb) / 0.75), inset 0 0 12px rgb(var(--aug-300-rgb) / 0.6);
    --o-eye: var(--aug-900);
    --o-ring-color: rgb(var(--aug-600-rgb) / 0.4);
    --o-ring-style: solid;
    --o-particle-a: var(--pur-300);
    --o-particle-b: var(--aug-400);
    --o-panel-bg: linear-gradient(180deg, var(--aug-900) 0%, #0b0c20 100%);
    --o-panel-border: rgb(var(--aug-500-rgb) / 0.4);
    --o-panel-shadow: 0 20px 60px rgb(0 0 0 / 0.6), 0 0 40px rgb(var(--aug-600-rgb) / 0.25);
    --o-header-bg: linear-gradient(135deg, rgb(var(--aug-800-rgb) / 0.4), rgb(19 21 38 / 0.6));
    --o-header-border: rgb(var(--aug-500-rgb) / 0.25);
    --o-name-shadow: 0 0 12px rgb(var(--aug-600-rgb) / 0.7);
    --o-close-hover: var(--aug-400);
    --o-bubble-bg: linear-gradient(150deg, rgb(var(--aug-800-rgb) / 0.55), rgb(var(--aug-900-rgb) / 0.85));
    --o-bubble-border: rgb(var(--aug-500-rgb) / 0.45);
    --o-bubble-text: var(--aug-200);
    --o-typing-dot: var(--aug-400);
    --o-input-border: rgb(var(--aug-500-rgb) / 0.3);
    --o-input-focus-border: var(--aug-400);
    --o-input-focus-shadow: 0 0 0 3px rgb(var(--aug-600-rgb) / 0.2);
    --o-send-bg: linear-gradient(135deg, var(--aug-800), var(--aug-600));
    --o-send-border: var(--aug-400);
    --o-send-shadow: 0 0 16px rgb(var(--aug-600-rgb) / 0.5);
    --o-send-shadow-hover: 0 0 26px rgb(var(--aug-600-rgb) / 0.8);
    --o-speech-bg: linear-gradient(155deg, var(--aug-900) 0%, var(--color-abyss) 100%);
    --o-speech-border: rgb(var(--aug-500-rgb) / 0.45);
    --o-speech-shadow: 0 14px 40px rgb(0 0 0 / 0.55), 0 0 26px rgb(var(--aug-600-rgb) / 0.3);
    --o-speech-title: var(--aug-400);
    --o-speech-cta: var(--pur-300);
}

.ach-oracle[data-faction="purists"][b-54x34auu1g] {
    --o-accent: var(--pur-400);
    --o-orb:
        radial-gradient(circle at 66% 72%, rgb(var(--pur-600-rgb) / 0.6) 0%, transparent 42%),
        radial-gradient(circle at 38% 32%, var(--pur-100) 0%, var(--pur-200) 20%, var(--pur-500) 55%, var(--pur-700) 100%);
    --o-orb-glow-sm: 0 0 10px rgb(var(--pur-500-rgb) / 0.55);
    --o-orb-glow-md: 0 0 14px rgb(var(--pur-500-rgb) / 0.65), inset 0 0 8px rgb(var(--pur-200-rgb) / 0.55);
    --o-orb-glow-lg: 0 0 24px rgb(var(--pur-500-rgb) / 0.7), inset 0 0 12px rgb(var(--pur-200-rgb) / 0.55);
    --o-eye: var(--pur-800);
    --o-ring-color: rgb(var(--pur-500-rgb) / 0.4);
    --o-ring-style: dashed;
    --o-particle-a: var(--color-gold-300);
    --o-particle-b: var(--pur-300);
    --o-panel-bg: linear-gradient(180deg, var(--pur-800) 0%, #071410 100%);
    --o-panel-border: rgb(var(--pur-400-rgb) / 0.4);
    --o-panel-shadow: 0 20px 60px rgb(0 0 0 / 0.6), 0 0 40px rgb(var(--pur-500-rgb) / 0.22);
    --o-header-bg: linear-gradient(135deg, rgb(var(--pur-600-rgb) / 0.4), rgb(15 30 26 / 0.6));
    --o-header-border: rgb(var(--pur-400-rgb) / 0.25);
    --o-name-shadow: 0 0 12px rgb(var(--pur-500-rgb) / 0.65);
    --o-close-hover: var(--pur-300);
    --o-bubble-bg: linear-gradient(150deg, rgb(var(--pur-600-rgb) / 0.55), rgb(7 20 16 / 0.85));
    --o-bubble-border: rgb(var(--pur-400-rgb) / 0.45);
    --o-bubble-text: var(--pur-100);
    --o-typing-dot: var(--pur-300);
    --o-input-border: rgb(var(--pur-400-rgb) / 0.3);
    --o-input-focus-border: var(--pur-300);
    --o-input-focus-shadow: 0 0 0 3px rgb(var(--pur-500-rgb) / 0.2);
    --o-send-bg: linear-gradient(135deg, var(--pur-600), var(--pur-500));
    --o-send-border: var(--pur-300);
    --o-send-shadow: 0 0 16px rgb(var(--pur-500-rgb) / 0.5);
    --o-send-shadow-hover: 0 0 26px rgb(var(--pur-500-rgb) / 0.8);
    --o-speech-bg: linear-gradient(155deg, var(--pur-800) 0%, #081512 100%);
    --o-speech-border: rgb(var(--pur-400-rgb) / 0.45);
    --o-speech-shadow: 0 14px 40px rgb(0 0 0 / 0.55), 0 0 26px rgb(var(--pur-500-rgb) / 0.3);
    --o-speech-title: var(--pur-300);
    --o-speech-cta: var(--color-gold-300);
}

/*
  The simple two-eyed orb that used to appear in the panel header and beside every Oracle message is
  gone. The companion now says who is speaking, and repeating a cruder version of its face at 26px
  next to each bubble only competed with it. The --o-orb* / --o-eye variables in the faction blocks
  above are kept: they still describe the Oracle's palette and cost nothing while unused.
*/

/* ── Launcher ─────────────────────────────────────────────
   The launcher is now just a hit target around <OracleCompanion>. The old ring / orbit / particle
   decoration has been dropped: the new designs carry their own halo and orbiting bodies, so keeping
   it would have put two sets of rings around one character.

   Size follows the companion, which is authored at 180px and scaled by LauncherScale in
   OracleFamiliar.razor — keep the two in step.
   TUNE: 180 * 0.62 = 112px. */

.ach-oracle__launcher[b-54x34auu1g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Chat panel ─────────────────────────────────────────── */

.ach-oracle__panel[b-54x34auu1g] {
    width: 352px;
    height: 498px;
    max-width: calc(100vw - var(--space-12));
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--o-panel-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--o-panel-bg);
    box-shadow: var(--o-panel-shadow);
    animation: ach-bubble-in 0.3s ease-out;
}

.ach-oracle__header[b-54x34auu1g] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--o-header-border);
    background: var(--o-header-bg);
}

.ach-oracle__identity[b-54x34auu1g] {
    flex: 1;
    min-width: 0;
}

.ach-oracle__name[b-54x34auu1g] {
    display: block;
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1;
    color: var(--text-primary);
    text-shadow: var(--o-name-shadow);
}

.ach-oracle__close[b-54x34auu1g] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgb(148 163 184 / 0.3);
    border-radius: var(--radius-md);
    color: var(--color-silver-300);
    font-size: 14px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ach-oracle__close:hover[b-54x34auu1g] {
    color: var(--text-primary);
    border-color: var(--o-close-hover);
}

/* Start over: same frame as close, with a glyph that reads a touch larger. */
.ach-oracle__reset[b-54x34auu1g] {
    font-size: 17px;
    line-height: 1;
}

.ach-oracle__reset:disabled[b-54x34auu1g] {
    opacity: 0.4;
    cursor: default;
}

.ach-oracle__reset:disabled:hover[b-54x34auu1g] {
    color: var(--color-silver-300);
    border-color: rgb(148 163 184 / 0.3);
}

/* ── Messages ───────────────────────────────────────────── */

.ach-oracle__messages[b-54x34auu1g] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 15px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ach-oracle__row[b-54x34auu1g] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}

.ach-oracle__row--user[b-54x34auu1g] { justify-content: flex-end; }

.ach-oracle__bubble[b-54x34auu1g] {
    max-width: 80%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: var(--leading-normal);
    background: rgb(34 36 68 / 0.85);
    border: 1px solid rgb(148 163 184 / 0.25);
    color: var(--color-silver-100);
    overflow-wrap: anywhere;
}

.ach-oracle__row--oracle .ach-oracle__bubble[b-54x34auu1g] {
    background: var(--o-bubble-bg);
    border-color: var(--o-bubble-border);
    color: var(--o-bubble-text);
}

/* The assistant could not be reached. Kept in the Oracle's voice but visibly not an answer, so a
   player does not mistake "the engine is down" for lore. */
.ach-oracle__row--oracle .ach-oracle__bubble--error[b-54x34auu1g] {
    background: linear-gradient(150deg, rgb(120 30 45 / 0.5), rgb(38 12 20 / 0.85));
    border-color: rgb(248 113 113 / 0.45);
    color: #fecaca;
}

.ach-oracle__bubble--typing[b-54x34auu1g] {
    display: flex;
    gap: 5px;
    padding: 13px 15px;
}

.ach-oracle__bubble--typing span[b-54x34auu1g] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--o-typing-dot);
    animation: ach-dot-fade 1.2s infinite;
}

.ach-oracle__bubble--typing span:nth-child(2)[b-54x34auu1g] { animation-delay: 0.2s; }
.ach-oracle__bubble--typing span:nth-child(3)[b-54x34auu1g] { animation-delay: 0.4s; }

/* ── Compose ────────────────────────────────────────────── */

.ach-oracle__compose[b-54x34auu1g] {
    display: flex;
    gap: var(--space-2);
    padding: 10px 14px 14px;
}

.ach-oracle__input[b-54x34auu1g] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--color-silver-100);
    background: #0a0c1c;
    border: 1px solid var(--o-input-border);
    border-radius: var(--radius-lg);
    padding: 10px 13px;
    outline: none;
}

.ach-oracle__input:focus[b-54x34auu1g] {
    border-color: var(--o-input-focus-border);
    box-shadow: var(--o-input-focus-shadow);
}

.ach-oracle__input:disabled[b-54x34auu1g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ach-oracle__send[b-54x34auu1g] {
    width: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: var(--o-send-bg);
    border: 1px solid var(--o-send-border);
    color: var(--text-primary);
    font-size: 15px;
    box-shadow: var(--o-send-shadow);
    transition: box-shadow var(--transition-default);
}

.ach-oracle__send:hover[b-54x34auu1g] { box-shadow: var(--o-send-shadow-hover); }

.ach-oracle__send:disabled[b-54x34auu1g] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Proactive speech bubble ────────────────────────────── */

.ach-oracle__speech[b-54x34auu1g] {
    position: relative;
    max-width: 292px;
    padding: 14px 16px;
    border: 1px solid var(--o-speech-border);
    border-radius: 16px 16px 4px 16px;
    background: var(--o-speech-bg);
    box-shadow: var(--o-speech-shadow);
    cursor: pointer;
    animation: ach-bubble-in 0.4s ease-out;
}

.ach-oracle__speech-head[b-54x34auu1g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ach-oracle__speech-title[b-54x34auu1g] {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--o-speech-title);
}

.ach-oracle__speech-dismiss[b-54x34auu1g] {
    background: transparent;
    border: none;
    color: var(--color-silver-400);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 0 0 var(--space-2);
}

.ach-oracle__speech-dismiss:hover[b-54x34auu1g] { color: var(--color-silver-100); }

.ach-oracle__speech-text[b-54x34auu1g] {
    font-size: 13.5px;
    line-height: var(--leading-normal);
    color: var(--o-bubble-text);
}

.ach-oracle__speech-cta[b-54x34auu1g] {
    margin-top: 9px;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: var(--o-speech-cta);
}

@media (max-width: 600px) {
    .ach-oracle[b-54x34auu1g] {
        bottom: var(--space-4);
        right: var(--space-4);
    }

    .ach-oracle__panel[b-54x34auu1g] {
        width: calc(100vw - var(--space-8));
        height: min(498px, calc(100vh - 140px));
    }

    /* The companion gives up a third of its size on a phone, where it would otherwise eat the
       corner of the board. TUNE: 180 * 0.42 = 76px — keep the two values in step.

       !important is load-bearing here, not sloppiness: OracleCompanion writes --oa-scale as an
       inline style so the admin sliders can retune it live, and a plain rule would lose to that. */
    .ach-oracle__launcher[b-54x34auu1g] {
        width: 76px;
        height: 76px;
    }

    .ach-oracle__launcher[b-54x34auu1g]  .ach-companion {
        --oa-scale: 0.42 !important;
    }
}
/* /Components/Shared/PerfBench.razor.rz.scp.css */
/*
  The performance bench. Preview chrome only — nothing here ships to a player.

  Deliberately plain: no blur, no shadows, no transitions. Anything the bench animates or filters
  shows up in its own numbers.
*/

.ach-bench__frame[b-nh3igr12bt] {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ach-bench__summary[b-nh3igr12bt] {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold-300);
}

/* Over the page rather than in it: a corner, above full-screen scenes, out of the way when shut. */
.ach-bench--floating[b-nh3igr12bt] {
    position: fixed;
    /* Bottom-left: the top corners carry the screens' own exits and clocks. */
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 5000;
    max-width: min(1100px, calc(100vw - 2 * var(--space-3)));
    max-height: calc(100vh - 2 * var(--space-3));
    overflow: auto;
}

.ach-bench--floating .ach-bench__frame:not([open])[b-nh3igr12bt] {
    padding: var(--space-2) var(--space-3);
}

.ach-bench__controls[b-nh3igr12bt],
.ach-bench__actions[b-nh3igr12bt] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.ach-bench__controls label[b-nh3igr12bt] {
    display: grid;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.ach-bench__controls select[b-nh3igr12bt],
.ach-bench__controls input[b-nh3igr12bt] {
    min-width: 7rem;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-silver-100);
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.ach-bench__wide input[b-nh3igr12bt] {
    min-width: 14rem;
}

.ach-bench button[b-nh3igr12bt] {
    padding: var(--space-1) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-200);
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.ach-bench button:hover:not(:disabled)[b-nh3igr12bt] {
    border-color: var(--aug-400);
    color: var(--color-white);
}

.ach-bench button:disabled[b-nh3igr12bt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ach-bench .ach-bench__run[b-nh3igr12bt] {
    border-color: rgb(var(--aug-400-rgb) / 0.6);
    color: var(--aug-300);
}

.ach-bench__status[b-nh3igr12bt],
.ach-bench__live[b-nh3igr12bt] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

.ach-bench__live[b-nh3igr12bt] {
    margin-top: var(--space-2);
    color: var(--color-gold-300);
}

.ach-bench__table-wrap[b-nh3igr12bt] {
    margin-top: var(--space-3);
    overflow-x: auto;
}

.ach-bench__table[b-nh3igr12bt] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-silver-200);
}

.ach-bench__table th[b-nh3igr12bt] {
    padding: var(--space-1) var(--space-2);
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
    color: var(--color-silver-400);
    border-bottom: 1px solid var(--border-default);
}

/* The rows are written by PerfBench.razor.js, so they carry no scope attribute. */
.ach-bench__table[b-nh3igr12bt]  td {
    padding: var(--space-1) var(--space-2);
    vertical-align: top;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
}

.ach-bench__table[b-nh3igr12bt]  td:last-child {
    white-space: normal;
    min-width: 16rem;
}
/* /Components/Shared/PlayerGate.razor.rz.scp.css */
/* Access notice shown in the player chrome instead of a MudBlazor alert. */

.ach-gate__action[b-xmv0jwhjo6] {
    display: inline-flex;
    margin-top: var(--space-6);
    text-decoration: none;
}
/* /Components/Shared/PreviewBanner.razor.rz.scp.css */
/* Marks the /preview/* design pages so they are never mistaken for the live screens. */

.ach-preview-banner[b-tc6f7qgoe1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-6);
    background: repeating-linear-gradient(
        135deg,
        rgb(245 158 11 / 0.10) 0 10px,
        transparent 10px 20px
    );
    border-bottom: 1px dashed rgb(245 158 11 / 0.45);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

.ach-preview-banner__tag[b-tc6f7qgoe1] {
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    padding: 2px var(--space-2);
    border: 1px solid rgb(245 158 11 / 0.5);
    border-radius: var(--radius-sm);
    color: var(--color-gold-300);
}

.ach-preview-banner__title[b-tc6f7qgoe1] {
    font-weight: var(--weight-bold);
    color: var(--color-silver-100);
}

.ach-preview-banner__note[b-tc6f7qgoe1] {
    color: var(--color-silver-400);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
}

.ach-preview-banner__links[b-tc6f7qgoe1] {
    margin-left: auto;
    display: flex;
    gap: var(--space-4);
}

.ach-preview-banner__links a[b-tc6f7qgoe1] {
    color: var(--aug-300);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.ach-preview-banner__links a:hover[b-tc6f7qgoe1] {
    border-bottom-color: currentColor;
}
/* /Components/Wall/WallJourneyMap.razor.rz.scp.css */
/*
    The wall's journey map, ported from "Achrona Admin - Journey Map View" in "Achrona Admin.html".
    Every size and colour below is the design's; the per-faction ones are set once on the node and
    the coin, as local properties, and read everywhere else.
*/
.ach-wmap[b-lrbnxu9dmm] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--color-silver-100);
}

.ach-wmap__vignette[b-lrbnxu9dmm] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgb(7 9 24 / 0.55) 100%);
}

/* The 1000 x 500 box every marker and road is placed in, centred like the design's. */
.ach-wmap__field[b-lrbnxu9dmm] {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 30px;
}

.ach-wmap__trails[b-lrbnxu9dmm] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* ── Faction colours ───────────────────────────────────────────────────── */

.ach-wmap [data-faction="augmented"][b-lrbnxu9dmm] {
    --wm-border: 46 100 245;
    --wm-core: 0 79 226;
    --wm-deep: 8 31 82;
    --wm-ink: var(--aug-300);
    --wm-ink-strong: var(--aug-200);
    --wm-coin: linear-gradient(135deg, var(--aug-800), var(--aug-600));
    --wm-coin-ink: var(--color-white);
    --wm-card-border: rgb(46 100 245 / 0.4);
    --wm-card-bg: linear-gradient(150deg, rgb(8 31 82 / 0.5) 0%, rgb(10 14 28 / 0.97) 65%);
    --wm-card-members: #d5e2fb;
}

.ach-wmap [data-faction="purists"][b-lrbnxu9dmm] {
    --wm-border: 52 211 153;
    --wm-core: 16 185 129;
    --wm-deep: 2 44 34;
    --wm-ink: var(--pur-300);
    --wm-ink-strong: var(--pur-200);
    --wm-coin: linear-gradient(135deg, var(--pur-700), var(--pur-400));
    --wm-coin-ink: #022c22;
    --wm-card-border: rgb(52 211 153 / 0.45);
    --wm-card-bg: linear-gradient(150deg, rgb(4 120 87 / 0.32) 0%, rgb(10 14 28 / 0.97) 65%);
    --wm-card-members: #cfe9dc;
}

/* A team with no path yet never stands on the map, but its coin should still read. */
.ach-wmap [data-faction="void"][b-lrbnxu9dmm] {
    --wm-ink: var(--color-silver-200);
    --wm-ink-strong: var(--color-silver-100);
    --wm-coin: linear-gradient(135deg, #1e293b, #475569);
    --wm-coin-ink: var(--color-white);
    --wm-card-border: rgb(148 163 184 / 0.4);
    --wm-card-bg: linear-gradient(150deg, rgb(30 41 59 / 0.5) 0%, rgb(10 14 28 / 0.97) 65%);
    --wm-card-members: var(--color-silver-200);
}

/* ── Nodes ─────────────────────────────────────────────────────────────── */

.ach-wmap__node[b-lrbnxu9dmm] {
    position: absolute;
    width: 0;
    height: 0;
}

.ach-wmap__disc[b-lrbnxu9dmm] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgb(var(--wm-border) / 0.5);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgb(var(--wm-core) / 0.3), rgb(var(--wm-deep) / 0.92) 72%);
    box-shadow: 0 0 14px rgb(var(--wm-core) / 0.28);
}

.ach-wmap__node[data-part="middle"] .ach-wmap__disc[b-lrbnxu9dmm] {
    border-color: rgb(var(--wm-border) / 0.6);
    background: radial-gradient(circle at 34% 28%, rgb(var(--wm-core) / 0.34), rgb(var(--wm-deep) / 0.92) 72%);
    box-shadow: 0 0 16px rgb(var(--wm-core) / 0.32);
}

.ach-wmap__node[data-part="last"] .ach-wmap__disc[b-lrbnxu9dmm] {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--wm-ink) 80%, transparent);
    background: radial-gradient(circle at 34% 28%, rgb(var(--wm-border) / 0.42), rgb(var(--wm-deep) / 0.92) 72%);
    box-shadow: 0 0 22px rgb(var(--wm-border) / 0.45);
}

.ach-wmap__label[b-lrbnxu9dmm] {
    position: absolute;
    left: 0;
    width: 164px;
    text-align: center;
}

.ach-wmap__node[data-part="last"] .ach-wmap__label[b-lrbnxu9dmm] { width: 172px; }

.ach-wmap__label--above[b-lrbnxu9dmm] {
    top: -43px;
    transform: translate(-50%, -100%);
}

.ach-wmap__label--below[b-lrbnxu9dmm] {
    top: 43px;
    transform: translate(-50%, 0);
}

.ach-wmap__label-name[b-lrbnxu9dmm] {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--wm-ink);
}

.ach-wmap__node[data-part="last"] .ach-wmap__label-name[b-lrbnxu9dmm] { color: var(--wm-ink-strong); }

.ach-wmap__label-meta[b-lrbnxu9dmm] {
    margin-top: 3px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--wm-ink-strong);
    opacity: 0.7;
}

/* ── The Desync ────────────────────────────────────────────────────────── */

.ach-wmap__final[b-lrbnxu9dmm] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
}

.ach-wmap__final-ring[b-lrbnxu9dmm] {
    position: absolute;
    inset: -9px;
    /*
      A gradient, not a round border. Firefox draws a border-radius circle as four corner pieces
      meeting on the centre lines, and under the animated scale their seams flash as a crosshair.
    */
    background: radial-gradient(closest-side,
            transparent calc(100% - 1.75px),
            rgb(226 232 240 / 0.4) calc(100% - 1px),
            rgb(226 232 240 / 0.4) calc(100% - 0.5px),
            transparent 100%);
    animation: ach-wmap-ring-b-lrbnxu9dmm 3s ease-in-out infinite;
}

.ach-wmap__final-disc[b-lrbnxu9dmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border: 1.5px solid rgb(226 232 240 / 0.7);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #3a3f52, #14161f 55%, #05060c 100%);
    box-shadow: 0 0 26px rgb(148 163 184 / 0.4), inset 0 0 22px rgb(0 0 0 / 0.9);
    font-family: serif;
    font-size: 46px;
    line-height: 1;
    color: var(--color-silver-100);
}

.ach-wmap__label--final[b-lrbnxu9dmm] {
    top: 52px;
    width: 172px;
    transform: translate(-50%, 0);
}

.ach-wmap__final-name[b-lrbnxu9dmm] {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.1;
    color: var(--color-silver-100);
}

.ach-wmap__final-meta[b-lrbnxu9dmm] {
    margin-top: 3px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-silver-300);
    opacity: 0.75;
}

/* ── Team coins ────────────────────────────────────────────────────────── */

.ach-wmap__tokens[b-lrbnxu9dmm] {
    position: absolute;
    left: 0;
    z-index: 3;
    display: flex;
    gap: 5px;
    transform: translate(-50%, -50%);
}

.ach-wmap__tokens--above[b-lrbnxu9dmm] { top: -41px; }
.ach-wmap__tokens--below[b-lrbnxu9dmm] { top: 41px; }
.ach-wmap__tokens--final[b-lrbnxu9dmm] { top: -64px; }

.ach-wmap__token[b-lrbnxu9dmm] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--wm-ink);
    border-radius: 50%;
    background: var(--wm-coin);
    cursor: pointer;
    outline: none;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--weight-bold);
    color: var(--wm-coin-ink);
    animation: ach-wmap-token-b-lrbnxu9dmm 2.4s infinite;
}

/* The hover card: who is on the team, where they are, and their whole road. */
.ach-wmap__card[b-lrbnxu9dmm] {
    position: absolute;
    left: 50%;
    z-index: 9;
    width: 260px;
    padding: 11px 13px;
    transform: translateX(-50%);
    border: 1px solid var(--wm-card-border);
    border-radius: 10px;
    /* The design's gradient over a solid base, so nothing behind the card reads through it. */
    background: var(--wm-card-bg), rgb(10 14 28);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s;
    cursor: default;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: 11px;
    text-align: left;
    color: var(--color-silver-100);
}

.ach-wmap__card--above[b-lrbnxu9dmm] { bottom: calc(100% + 19px); }
.ach-wmap__card--below[b-lrbnxu9dmm] { top: calc(100% + 19px); }

/*
    Every node's coins are their own stacking context (z-index 3), so a card raised inside one
    would still sit under the coins of any node drawn after it. The row being hovered is lifted
    above them all instead, and the hovered coin above its neighbours in that row.
*/
.ach-wmap__tokens:has(.ach-wmap__token:hover)[b-lrbnxu9dmm],
.ach-wmap__tokens:has(.ach-wmap__token:focus-visible)[b-lrbnxu9dmm] { z-index: 20; }

.ach-wmap__token:hover[b-lrbnxu9dmm],
.ach-wmap__token:focus-visible[b-lrbnxu9dmm] { z-index: 10; }

.ach-wmap__token:hover .ach-wmap__card[b-lrbnxu9dmm],
.ach-wmap__token:focus-visible .ach-wmap__card[b-lrbnxu9dmm] { opacity: 1; }

.ach-wmap__card-head[b-lrbnxu9dmm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ach-wmap__card-name[b-lrbnxu9dmm] {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--wm-ink);
}

.ach-wmap__card-where[b-lrbnxu9dmm] {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--wm-ink-strong);
    opacity: 0.75;
}

.ach-wmap__card-members[b-lrbnxu9dmm] {
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
    color: var(--wm-card-members);
}

.ach-wmap__steps[b-lrbnxu9dmm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

.ach-wmap__step[b-lrbnxu9dmm] {
    display: flex;
    align-items: center;
    gap: 7px;
    --wm-step-ink: var(--color-silver-400);
    --wm-step-bg: transparent;
    --wm-step-border: rgb(148 163 184 / 0.3);
    --wm-step-name: var(--color-silver-400);
    --wm-step-status: var(--color-silver-400);
}

.ach-wmap__step[data-status="cleared"][b-lrbnxu9dmm] {
    --wm-step-ink: #0a0e1c;
    --wm-step-bg: var(--wm-ink);
    --wm-step-border: var(--wm-ink);
    --wm-step-name: var(--color-silver-100);
    --wm-step-status: var(--wm-ink);
}

.ach-wmap__step[data-status="now"][b-lrbnxu9dmm] {
    --wm-step-ink: var(--color-gold-200);
    --wm-step-bg: rgb(251 191 36 / 0.16);
    --wm-step-border: rgb(251 191 36 / 0.8);
    --wm-step-name: var(--color-white);
    --wm-step-status: var(--color-gold-200);
}

/*
  A road the team finished (or started) before switching, folded into one row. Its data-faction
  re-points --wm-ink at that road's colour, so the tick reads as the other side's.
*/
.ach-wmap__step[data-status="partial"][b-lrbnxu9dmm] {
    --wm-step-ink: var(--wm-ink);
    --wm-step-border: var(--wm-ink);
    --wm-step-name: var(--color-silver-200);
    --wm-step-status: var(--wm-ink);
}

.ach-wmap__step--road .ach-wmap__step-name[b-lrbnxu9dmm] {
    font-style: italic;
}

.ach-wmap__step--road + .ach-wmap__step:not(.ach-wmap__step--road)[b-lrbnxu9dmm] {
    margin-top: 3px;
    padding-top: 8px;
    border-top: 1px dashed rgb(255 255 255 / 0.1);
}

.ach-wmap__step-icon[b-lrbnxu9dmm] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid var(--wm-step-border);
    border-radius: 50%;
    background: var(--wm-step-bg);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: var(--weight-bold);
    color: var(--wm-step-ink);
}

.ach-wmap__step-name[b-lrbnxu9dmm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--wm-step-name);
}

.ach-wmap__step-status[b-lrbnxu9dmm] {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wm-step-status);
}

@keyframes ach-wmap-token-b-lrbnxu9dmm {
    0%, 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.32); }
    70%      { box-shadow: 0 0 0 9px rgb(255 255 255 / 0); }
}

@keyframes ach-wmap-ring-b-lrbnxu9dmm {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.14); opacity: 0.18; }
}