/*
  Shared Achrona primitives used across the player screens.
  Anything specific to one screen lives in that component's scoped stylesheet.
*/

/* ── Page scaffolding ───────────────────────────────────── */

.ach-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) var(--space-24);
    font-family: var(--font-body);
    color: var(--color-silver-100);
}

.ach-page--wide { max-width: 1100px; }
.ach-page--narrow { max-width: 1040px; }
.ach-page--center { text-align: center; }

/*
  Available to a screen reader, invisible to everyone else. Used for the column headers repeated
  inside each block of the Team Stats ledger, whose visible header strip sits outside the blocks.
*/
.ach-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Type ───────────────────────────────────────────────── */

.ach-display {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-none);
    color: var(--text-primary);
    font-size: clamp(2.5rem, 6vw, 54px);
    text-shadow: 0 0 24px rgb(var(--aug-600-rgb) / 0.5);
}

.ach-display--hero { font-size: clamp(2.75rem, 7vw, 62px); }

.ach-lead {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-silver-300);
}

.ach-eyebrow {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.ach-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Surfaces ───────────────────────────────────────────── */

.ach-panel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

/*
  Faction-tinted surfaces. Pair with data-faction on the element (or an ancestor)
  so --faction-* resolves; see tokens/factions.css.
*/
.ach-panel--faction {
    border-color: var(--faction-border);
    background: var(--faction-panel-bg);
    box-shadow: var(--faction-panel-shadow);
}

/* ── Buttons ────────────────────────────────────────────── */

.ach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-lg);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow var(--transition-default), transform var(--transition-fast);
}

.ach-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.ach-btn:not(:disabled):active { transform: scale(0.97); }

.ach-btn--faction {
    background: var(--faction-gradient);
    border-color: var(--faction-accent);
    color: var(--faction-on-accent);
    box-shadow: 0 0 20px rgb(var(--faction-accent-rgb) / 0.45);
}

.ach-btn--faction:not(:disabled):hover {
    box-shadow: 0 0 36px rgb(var(--faction-accent-rgb) / 0.75);
}

.ach-btn--ghost {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    padding: var(--space-2) var(--space-5);
    background: transparent;
    border-color: rgb(148 163 184 / 0.3);
    color: var(--color-silver-400);
}

.ach-btn--ghost:not(:disabled):hover {
    color: var(--color-silver-100);
    border-color: var(--color-silver-300);
}

/* ── Badges ─────────────────────────────────────────────── */

.ach-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px var(--space-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

.ach-badge--faction {
    color: var(--faction-accent);
    border-color: var(--faction-border);
    background: var(--faction-surface);
}

/* ── Status colours shared by journey + stats ───────────── */

.ach-status-done { color: var(--pur-400); }
.ach-status-active { color: var(--color-gold-300); }
.ach-status-locked { color: var(--color-silver-400); }

/* ── Auth modal ─────────────────────────────────────────── */

/*
  The login modal from "Achrona - The Death of Randomness.html". Global rather than scoped to one
  component: both auth dialogs — logging in and setting an invited account's password — wear it.
*/

.ach-login {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    /*
      No backdrop-filter here, deliberately. This overlay covers the whole viewport, and the home
      hero's starfield twinkles underneath it — fifteen opacity animations staggered so at least one
      changes on every frame. A backdrop-filter has to re-blur everything beneath it whenever that
      content changes, so the pair cost a full-viewport blur pass per frame: profiling the home page
      measured 7.9 fps with the blur against 82 fps without. The same trade the top bar makes at
      tier 2 (see PlayerTopBar.razor.css) — a more opaque panel reads almost the same and costs
      nothing per frame — so the alpha below carries what the blur used to.
    */
    background: rgb(4 6 15 / 0.88);
}

.ach-login__panel {
    position: relative;
    width: 380px;
    max-width: 100%;
    padding: 34px 32px;
    border: 1px solid rgb(var(--aug-400-rgb) / 0.35);
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, #0d1428 0%, #060a18 100%);
    box-shadow: 0 0 50px rgb(var(--aug-600-rgb) / 0.25), 0 20px 60px rgb(0 0 0 / 0.6);
    text-align: left;
}

.ach-login__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-silver-400);
    transition: color var(--transition-fast);
}

.ach-login__close:hover { color: var(--color-silver-100); }

.ach-login__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-shadow: 0 0 16px rgb(var(--aug-600-rgb) / 0.6);
}

.ach-login__sub {
    margin: 6px 0 22px;
    font-size: var(--text-sm);
    color: var(--color-silver-300);
}

.ach-login__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ach-login__field {
    display: block;
}

.ach-login__label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

.ach-login__input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-silver-100);
    background: #04060f;
    border: 1px solid rgb(148 163 184 / 0.25);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ach-login__input:focus {
    border-color: var(--aug-400);
    box-shadow: 0 0 0 3px rgb(var(--aug-600-rgb) / 0.2);
}

.ach-login__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgb(234 88 12 / 0.5);
    border-radius: var(--radius-md);
    background: rgb(67 20 7 / 0.4);
    color: var(--color-ember-200);
    font-size: var(--text-sm);
}

.ach-login__submit {
    margin-top: var(--space-2);
    width: 100%;
    font-size: var(--text-base);
    padding: 12px;
    background: linear-gradient(135deg, var(--aug-800), var(--aug-600));
    border-color: var(--aug-400);
    color: var(--color-white);
    box-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.4);
}

.ach-login__submit:not(:disabled):hover {
    box-shadow: 0 0 34px rgb(var(--aug-600-rgb) / 0.7);
}

/* ── The team unlock codes ──────────────────────────────── */

/*
  The list inside TeamCodesDialog. The dialog itself wears the .ach-login chrome above; only the
  rows are its own, and they are here rather than scoped for the same reason that chrome is — the
  Desync ritual opens the same dialog, at a higher z-index.
*/

.ach-codes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ach-codes__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 9px 12px;
    border: 1px solid rgb(148 163 184 / 0.2);
    border-radius: var(--radius-md);
    background: rgb(4 6 15 / 0.6);
}

.ach-codes__puzzle {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-silver-200);
}

.ach-codes__code {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: 0.22em;
    /* Balances the trailing letter-space so the five characters sit square in the row. */
    text-indent: 0.22em;
    color: var(--pur-300);
}

.ach-codes__tally {
    margin: var(--space-3) 0 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    color: var(--color-silver-400);
}

.ach-codes__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-silver-400);
}

/* ── Top bar ──────────────────────────────────────────────

  The sticky header from "Achrona Challenge Site.dc.html". Global rather than scoped to
  PlayerTopBar because the leaderboard wall's LeaderboardTopBar is the same bar with other links,
  and a scoped sheet never reaches another component's markup.
*/

.ach-top {
    position: sticky;
    top: 0;
    z-index: var(--z-floating);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 62px;
    padding: 0 var(--space-6);
    /*
      Opaque and unfiltered, unconditionally. This bar spans the viewport and sits above content
      that animates — the home hero's starfield, and the backdrop canvas when it runs — and a
      backdrop-filter has to recompute its blur whenever anything beneath it changes. Full width,
      every frame. Profiling the home page put that at roughly 60 fps with the blur against 82
      without, on top of the same cost the auth modal used to pay (see .ach-login in
      achrona/components.css).

      A solid fill also means no per-frame backdrop read at all, which is why the alpha is gone
      too. This used to be a tier-2 concession the backdrop worker switched on once a machine
      proved slow; it is the default now, so that override is gone.
    */
    background: rgb(7 9 24);
    border-bottom: 1px solid rgb(var(--aug-500-rgb) / 0.22);
}

.ach-top__left {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}

.ach-top__wordmark {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    text-decoration: none;
    text-shadow: 0 0 14px rgb(var(--aug-600-rgb) / 0.6);
    white-space: nowrap;
}

.ach-top__nav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ach-top__nav::-webkit-scrollbar { display: none; }

.ach-top__link {
    position: relative;
    display: block;
    padding: 20px 13px;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-silver-300);
    transition: color var(--transition-fast);
}

.ach-top__link:hover { color: var(--text-primary); }

.ach-top__link--active { color: var(--text-primary); }

/* Only the active link shows the glowing underline. */
.ach-top__underline { display: none; }

.ach-top__link--active .ach-top__underline {
    display: block;
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 0;
    height: 2px;
    background: var(--aug-500);
    box-shadow: 0 0 10px rgb(var(--aug-600-rgb) / 0.9);
}

.ach-top__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ach-top__clock {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--pur-300);
    white-space: nowrap;
}

.ach-top__user {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-200);
    white-space: nowrap;
}

.ach-top__action {
    text-decoration: none;
    font-size: var(--text-xs);
}

@media (max-width: 900px) {
    .ach-top {
        flex-wrap: wrap;
        padding: var(--space-2) var(--space-4);
    }

    .ach-top__left {
        order: 1;
        width: 100%;
        gap: var(--space-4);
    }

    .ach-top__right {
        order: 0;
        width: 100%;
        justify-content: space-between;
    }

    .ach-top__link { padding: 10px 10px; }

    .ach-top__user { display: none; }
}