/*
 * The Mini App's look: a scoreboard with weight.
 *
 * The first version of this was flat on purpose — hairlines, one accent, no texture — and flat is
 * what it read as. Spec section 16 asks for competitive, alive and slightly chaotic, so the depth
 * is back and doing work: every faction's own hue washes its panel, crests carry real modelling,
 * medals are struck rather than printed, and the things that change are the things that move.
 *
 * Depth here is layered, not dropped. A panel is a gradient over a tint over a grain, with an
 * inner top highlight and a coloured edge — the same recipe a physical scoreboard gets from
 * lighting. A drop shadow alone just makes a card hover.
 *
 * Everything is drawn or generated. No image is fetched: the Content-Security-Policy admits
 * Telegram's script and Google Fonts and nothing else, so the grain is a data-URI SVG, the crests
 * are paths, and every colour is derived from --hue.
 */

:root {
    --bg: var(--tg-bg-color, #05060a);
    --panel: var(--tg-secondary-bg-color, #161b24);
    --panel-2: #10141b;
    --ink: var(--tg-text-color, #eef1f6);
    --muted: var(--tg-hint-color, #9aa4b2);
    --faint: #6b7686;
    --rule: #2a3242;
    --rule-soft: #212836;
    --gold: #ffca3a;
    --gold-deep: #e0972a;
    --up: #4ade80;
    --down: #f87171;
    --live: #ff3b30;

    /* The faction hue. view.ts sets it per element through the CSSOM. */
    --hue: 210;
    --chip: 10px;

    --radius: 5px;
    --shadow: 0 10px 28px rgb(0 0 0 / 0.45);

    /*
     * Grain. A 2px SVG noise tile as a data URI — img-src admits data:, and this is the only
     * texture in the design that is not a gradient. It keeps large dark areas from banding.
     */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80'\
 height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'\
 numOctaves='3'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'\
 opacity='.035'/%3E%3C/svg%3E");
    color-scheme: dark light;
}

:root[data-scheme="light"] {
    --bg: var(--tg-bg-color, #eef1f5);
    --panel: var(--tg-secondary-bg-color, #ffffff);
    --panel-2: #f6f8fa;
    --ink: var(--tg-text-color, #0d1014);
    --muted: var(--tg-hint-color, #58616e);
    --faint: #78828f;
    --rule: #dde2e9;
    --rule-soft: #e9edf2;
    --gold: #b3820a;
    --gold-deep: #8a6206;
    --shadow: 0 8px 22px rgb(16 21 29 / 0.10);
}

:root[data-scheme="light"] *,
:root[data-scheme="light"] ::before,
:root[data-scheme="light"] ::after {
    --crest-base: hsl(var(--hue) 55% 44%);
    --crest-band: hsl(var(--hue) 82% 58%);
    --crest-detail: hsl(var(--hue) 92% 88%);
    --accent-text: hsl(var(--hue) 80% 38%);
}

*, ::before, ::after {
    box-sizing: border-box;

    /*
     * Every hue-derived colour is computed HERE, on the universal selector, and not once on
     * :root. That is not a stylistic choice -- it is the only thing that works.
     *
     * A custom property computes to its specified value WITH ITS var() REFERENCES ALREADY
     * SUBSTITUTED, at the element it is declared on. Declared once on :root, --accent would bake
     * in :root's --hue of 210 and inherit that fixed blue everywhere; the per-faction --hue set
     * further down the tree would never be consulted again. Every faction rendered the same blue,
     * which is most of what "it looks flat" turned out to mean.
     *
     * Re-declaring them per element forces the substitution to happen where the element's own
     * inherited --hue is in scope, which is what makes four factions look like four factions.
     */
    --accent: hsl(var(--hue) 90% 58%);
    --accent-text: hsl(var(--hue) 92% 74%);
    --accent-wash: hsl(var(--hue) 70% 45% / 0.14);
    --accent-edge: hsl(var(--hue) 70% 50% / 0.6);
    --accent-glow: hsl(var(--hue) 95% 55% / 0.45);

    /* Crest modelling: a shaded face, a lit band, a bright detail. */
    --crest-base: hsl(var(--hue) 65% 30%);
    --crest-band: hsl(var(--hue) 88% 52%);
    --crest-detail: hsl(var(--hue) 96% 84%);
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    color: var(--ink);
    /*
     * Vazirmatn is the Persian face this is drawn in; the platform stack behind it covers a client
     * that cannot reach Google Fonts, which is the one font host the policy admits.
     */
    font-family: Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, "Iranian Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Two dim coloured pools behind everything, plus grain. Depth before a single panel paints. */
    background:
        var(--grain),
        radial-gradient(90% 55% at 12% -6%, hsl(210 80% 30% / 0.22), transparent 70%),
        radial-gradient(85% 50% at 92% 4%, hsl(145 70% 26% / 0.18), transparent 70%),
        var(--bg);
    background-attachment: fixed;
}

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.03em;
}

.name { font-weight: 600; }

.lbl {
    font-size: 11px;
    letter-spacing: 0.13em;
    color: var(--faint);
    font-weight: 700;
    white-space: nowrap;
}

.spacer { flex: 1; }
.up { color: var(--up); }
.down { color: var(--down); }
.gold { color: var(--gold); }

.empty {
    color: var(--faint);
    font-size: 13px;
}

.cell-icon,
.head-icon,
.note-icon,
.gold {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.head-icon { color: var(--accent-text); }
.cell-icon { color: var(--faint); }
.cell-icon.up { color: var(--up); }
.cell-icon.gold { color: var(--gold); }

.screen-host {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 12px calc(env(safe-area-inset-bottom) + 10px);
}

.screen {
    display: flex;
    flex-direction: column;
    gap: 11px;
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 10px;
}

/* --- the live strip ------------------------------------------------------------------------ */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-top) + 12px) 4px 10px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 3px;
}

.live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live);
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgb(255 59 48 / 0.55); }
    70% { box-shadow: 0 0 0 8px rgb(255 59 48 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(255 59 48 / 0); }
}

.live-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    font-weight: 800;
    color: var(--live);
}

.topbar-today {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--faint);
    font-weight: 700;
}

/* --- panels --------------------------------------------------------------------------------- */

.panel {
    position: relative;
    background:
        var(--grain),
        linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 40%),
        var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.05);
    animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
}

.panel-mine {
    border-color: var(--accent-edge);
    background:
        var(--grain),
        radial-gradient(120% 90% at 50% -20%, hsl(var(--hue) 70% 40% / 0.3), transparent 65%),
        linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 40%),
        var(--panel);
    box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.06),
        0 0 26px hsl(var(--hue) 80% 45% / 0.16);
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

/* --- the scoreboard ------------------------------------------------------------------------ */

.scoreboard {
    overflow: hidden;
    background:
        var(--grain),
        radial-gradient(70% 90% at 0% 0%, hsl(var(--hue) 80% 40% / 0.22), transparent 60%),
        radial-gradient(70% 90% at 100% 0%, hsl(var(--hue) 70% 45% / 0.12), transparent 60%),
        linear-gradient(180deg, #1d2431, var(--panel));
}

:root[data-scheme="light"] .scoreboard {
    background:
        var(--grain),
        radial-gradient(70% 90% at 0% 0%, hsl(var(--hue) 80% 60% / 0.16), transparent 60%),
        var(--panel);
}

.sides {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    /* End-aligned so the two scores share a baseline: the leader's crest is larger, and
     * top-aligning would leave the numbers at different heights, which reads as a mistake. */
    align-items: end;
    padding: 2px 0 4px;
}

.sides-solo { grid-template-columns: 1fr; }

.side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    text-align: center;
}

.crest-holder {
    display: flex;
    filter: drop-shadow(0 4px 14px var(--accent-glow));
    animation: crest-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}

@keyframes crest-in {
    from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
    to { opacity: 1; transform: none; }
}

.crest { display: block; }

.side-name {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.side-points {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    color: var(--accent-text);
    text-shadow: 0 0 22px var(--accent-glow);
}

.side-leader .side-points { font-size: 46px; }

.side-delta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
}

.versus {
    font-size: 26px;
    align-self: center;
    padding: 0 2px;
    filter: drop-shadow(0 0 10px rgb(255 202 58 / 0.5));
    animation: clash 3.6s ease-in-out infinite;
}

@keyframes clash {
    0%, 88%, 100% { transform: none; }
    92% { transform: rotate(-13deg) scale(1.12); }
    96% { transform: rotate(11deg) scale(1.12); }
}

/* --- the gap bar --------------------------------------------------------------------------- */

.gap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0.28), rgb(0 0 0 / 0.12));
    border-top: 1px solid var(--rule);
    margin: 2px -14px -12px;
    padding: 11px 14px 13px;
}

:root[data-scheme="light"] .gap {
    background: var(--panel-2);
}

.gap-head {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.gap-label { font-size: 13px; color: var(--muted); }

.gap-value {
    font-size: 25px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 18px rgb(255 202 58 / 0.35);
}

.gap-note {
    font-size: 12px;
    color: var(--faint);
    margin-inline-start: auto;
}

.gap-foot { font-size: 12px; color: var(--muted); }

.meter {
    --fill: 0%;
    height: 9px;
    background: rgb(0 0 0 / 0.4);
    border: 1px solid var(--rule);
    border-radius: 999px;
    overflow: hidden;
}

:root[data-scheme="light"] .meter { background: #e2e7ee; }

.meter-fill {
    position: relative;
    height: 100%;
    width: var(--fill);
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient(90deg, hsl(var(--hue) 85% 44%), hsl(var(--hue) 92% 64%));
    box-shadow: 0 0 12px hsl(var(--hue) 90% 55% / 0.55);
    animation: fill-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms + 160ms);
}

@keyframes fill-in {
    from { width: 0; }
    to { width: var(--fill); }
}

.meter-gold .meter-fill {
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
    box-shadow: 0 0 12px rgb(255 202 58 / 0.5);
}

/* A highlight sweeping the filled part: the one thing on screen that says "this is live". */
.meter-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.42) 50%,
        transparent 80%);
    transform: translateX(-100%);
    animation: sweep 2.8s ease-in-out infinite;
    animation-delay: 900ms;
}

@keyframes sweep {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

/* --- chips and crests ---------------------------------------------------------------------- */

.chip {
    width: var(--chip);
    height: var(--chip);
    border-radius: 3px;
    background: linear-gradient(160deg, hsl(var(--hue) 95% 66%), hsl(var(--hue) 85% 44%));
    box-shadow: 0 0 8px hsl(var(--hue) 90% 55% / 0.5), inset 0 -1px 0 rgb(0 0 0 / 0.3);
    flex: none;
}

.crest-small { filter: drop-shadow(0 4px 14px var(--accent-glow)); }
.crest-tiny { filter: drop-shadow(0 3px 9px var(--accent-glow)); }
.crest-row { filter: drop-shadow(0 2px 7px var(--accent-glow)); }

/* --- medals: struck, not printed ------------------------------------------------------------ */

.medal {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 11px;
    font-weight: 900;
    color: #22160a;
    box-shadow: inset 0 -2px 3px rgb(0 0 0 / 0.35), inset 0 2px 2px rgb(255 255 255 / 0.5),
        0 2px 8px rgb(0 0 0 / 0.4);
}

.medal-gold {
    background: linear-gradient(150deg, #ffe487, var(--gold) 45%, #c8860f);
    box-shadow: inset 0 -2px 3px rgb(0 0 0 / 0.3), inset 0 2px 2px rgb(255 255 255 / 0.6),
        0 0 14px rgb(255 202 58 / 0.55);
}

.medal-silver { background: linear-gradient(150deg, #f3f6fa, #b9c3d0 45%, #7d8899); }
.medal-bronze { background: linear-gradient(150deg, #f0c39a, #c98a4f 45%, #8b5a2b); }

.medal-mark { display: flex; }

/* --- stat strips ---------------------------------------------------------------------------- */

.strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
}

.cell {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent), var(--panel-2);
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-head { display: flex; align-items: center; gap: 5px; }
.cell .lbl { font-size: 10px; letter-spacing: 0.08em; }

.cell-value {
    font-size: 16px;
    font-weight: 800;
}

/* --- rows ------------------------------------------------------------------------------------ */

/* Flex and not a grid track list. A row has an optional crest, so a fixed four-column grid put
   the name in the crest's column whenever a player had not picked a side yet -- which only shows
   up on the one row that differs. Flex sizes what is actually there. */
.row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 0 -14px;
    border-top: 1px solid var(--rule-soft);
}

.panel > .row:first-of-type { border-top: 0; }

.row-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.row-points { font-size: 15px; font-weight: 800; }

.row-points-first {
    color: var(--gold);
    font-weight: 900;
    text-shadow: 0 0 14px rgb(255 202 58 / 0.3);
}

.row-first {
    background: linear-gradient(90deg, rgb(255 202 58 / 0.12), transparent 75%);
}

.row-mine {
    background: linear-gradient(90deg, var(--accent-wash), transparent 80%);
    box-shadow: inset 3px 0 0 var(--accent);
}

.row-mine .row-name { font-weight: 700; }

.row-you {
    background: var(--panel-2);
    border-top: 1px solid var(--rule);
    font-weight: 700;
}

.row > .crest-holder { flex: none; }
.row-points { flex: none; }

.rank {
    flex: none;
    width: 26px;
    font-size: 12px;
    font-weight: 900;
    color: var(--faint);
    text-align: center;
}

/* --- coins and rank ------------------------------------------------------------------------- */

.split { flex-direction: row; align-items: center; gap: 14px; }

.split-rule {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, var(--rule), transparent);
}

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

.half-value,
.rank-big {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.delta {
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* --- faction cards --------------------------------------------------------------------------- */

.banner-head,
.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner-who,
.card-who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.banner-name,
.card-name {
    font-size: 15px;
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}

.card-points {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.card-points .num {
    font-size: 33px;
    font-weight: 900;
    line-height: 1;
    color: var(--accent-text);
    text-shadow: 0 0 20px var(--accent-glow);
}

.card-foot { font-size: 12px; color: var(--muted); }

.line-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
}

/* The same row inside a panel that already has its own padding, rather than as a panel of its
   own. line-row only sets a direction because its usual host is a section that is already flex;
   a plain div is not, so this variant says so. */
.line-row-flat {
    display: flex;
    padding: 2px 0 10px;
}

.line-delta { font-size: 12px; font-weight: 700; }
.line-points { font-size: 18px; font-weight: 900; }
.line-rank { font-size: 12px; font-weight: 800; color: var(--faint); }

/* --- profile ---------------------------------------------------------------------------------- */

.profile {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    padding: 15px 14px;
}

/* The faction's crest, huge and dim, as the card's watermark. */
.profile-crest {
    position: absolute;
    inset-inline-end: -18px;
    top: -14px;
    opacity: 0.13;
    filter: blur(0.4px);
    pointer-events: none;
}

.profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    background: linear-gradient(155deg, hsl(var(--hue) 95% 62%), hsl(var(--hue) 80% 38%));
    color: #08090c;
    font-size: 22px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 4px 16px var(--accent-glow), inset 0 -2px 0 rgb(0 0 0 / 0.25);
}

.profile-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.profile-name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.profile-faction {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
}

.title-ribbon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(180deg, rgb(255 202 58 / 0.2), rgb(255 202 58 / 0.08));
    border: 1px solid rgb(255 202 58 / 0.55);
    border-radius: 3px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 800;
    color: var(--gold);
}

.quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
}

.quad-cell {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent), var(--panel);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quad-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}

.next-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--gold);
}

.note { flex-direction: row; align-items: flex-start; gap: 10px; }
.note-icon { color: var(--faint); margin-top: 2px; }
.note-body { font-size: 12px; color: var(--muted); line-height: 1.7; }
.kbd { display: inline; color: var(--ink); font-weight: 700; }

/* --- prompts ---------------------------------------------------------------------------------- */

.prompt {
    align-items: center;
    text-align: center;
    gap: 9px;
    padding: 22px 14px;
}

.prompt-mark {
    font-size: 40px;
    line-height: 1;
    filter: drop-shadow(0 0 18px rgb(255 202 58 / 0.4));
    animation: clash 3.6s ease-in-out infinite;
}

.prompt-title { font-size: 18px; font-weight: 900; }
.prompt-body { color: var(--muted); font-size: 14px; }

.prompt-command {
    font-size: 23px;
    font-weight: 900;
    color: var(--accent-text);
    background: linear-gradient(180deg, hsl(var(--hue) 65% 45% / 0.28),
        hsl(var(--hue) 65% 40% / 0.12));
    border: 1px solid var(--accent-edge);
    padding: 6px 24px;
    border-radius: 4px;
    box-shadow: 0 0 22px hsl(var(--hue) 85% 50% / 0.25);
}

.prompt-note {
    font-size: 12px;
    color: var(--faint);
    max-width: 30ch;
    line-height: 1.7;
}

/* --- tabs -------------------------------------------------------------------------------------- */

.tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent), var(--panel-2);
    border-top: 1px solid var(--rule);
    padding: 0 0 calc(env(safe-area-inset-bottom) + 10px);
    box-shadow: 0 -8px 22px rgb(0 0 0 / 0.35);
}

.tabs button {
    appearance: none;
    border: 0;
    border-top: 2px solid transparent;
    margin-top: -1px;
    background: transparent;
    color: var(--faint);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 12px 2px 10px;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tabs button.is-active {
    color: var(--ink);
    font-weight: 800;
    border-top-color: var(--gold);
    background: linear-gradient(180deg, rgb(255 202 58 / 0.13), transparent 70%);
}

/* --- share of the table ---------------------------------------------------------------------- */

/* One stacked bar, one slice per faction, each carrying its own --hue. The slices are flex items
   sized by their share rather than absolutely positioned, so they cannot overlap and the leftover
   track at the end is exactly the truncation the core already documents. */
.share-track {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--panel-2);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.5);
    margin-top: 4px;
}

.share-slice {
    flex: 0 0 var(--share);
    background: linear-gradient(180deg, var(--accent-text), var(--accent));
    box-shadow: inset 0 0 12px var(--accent-glow);
    border-inline-end: 1px solid rgb(0 0 0 / 0.45);
    /* Its own keyframe: fill-in animates width, and a flex item is sized by its basis, so
       reusing it here would have looked like nothing happening at all. */
    animation: slice-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 160ms;
}

@keyframes slice-in {
    from { flex-basis: 0; }
    to { flex-basis: var(--share); }
}

.share-slice:last-child { border-inline-end: 0; }

/* Two fixed columns rather than a wrapping row. Four keys do not fit on one line at 390px, and
   a wrap left the fourth faction alone on a line of its own below the fold -- the one faction a
   reader would have concluded was missing. */
.share-keys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-top: 12px;
}

.share-key {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.share-key-name { color: var(--dim); font-weight: 600; }
.share-key-value { color: var(--accent-text); font-weight: 800; }
.crest-key { filter: drop-shadow(0 2px 6px var(--accent-glow)); }

@media (prefers-reduced-motion: reduce) {
    .panel,
    .quad,
    .crest-holder,
    .meter-fill,
    .meter-shine,
    .versus,
    .prompt-mark,
    .share-slice,
    .live {
        animation: none;
    }

    .meter-fill { transition: none; }
}