/*
 * /aura, in the homepage v2 design system.
 *
 * Loaded AFTER /v2/home.css, which owns the tokens (--bg, --surface, --gold,
 * --ok, ...), the fonts, the header and footer, buttons, the meter and the
 * ticket graphic. Nothing here redefines a token or restyles a home.css
 * class: everything is scoped under .aura2 or an .aura2-* class, so the two
 * sheets can move independently. Themed by the <html> class (html.dark),
 * never Tailwind dark:.
 */

/* ------------------------------------------------------------ layout */
.aura2-body {
    width: 100%; max-width: 1248px; margin: 0 auto; padding: 36px 24px 80px;
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
        "head    head"
        "row1    row1"
        "journey journey"
        "earn    side"
        "about   side"
        "hof     side";
    /* The last row takes any spare height (2026-09-28). The rail spans the
       three left rows, and with auto rows a taller rail shared its extra
       height between them, which opened a gap under Earn today. Now the left
       cards sit one after another and any difference is below the last. */
    grid-template-rows: auto auto auto auto auto 1fr;
    gap: 20px; align-items: start;
}
.aura2-head { grid-area: head; }
.aura2-col-a { display: contents; }
.aura2-slot { min-width: 0; }
.aura2-slot--row1 { grid-area: row1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.aura2-slot--row1 > .aura2-slot > .aura2-card, .aura2-slot--row1 > .aura2-slot > section { height: 100%; }
.aura2-slot--id, .aura2-slot--draw { display: flex; flex-direction: column; }
.aura2-slot--journey { grid-area: journey; }
.aura2-slot--earn { grid-area: earn; }
.aura2-slot--about { grid-area: about; }
/* Hall of Fame sits in the LEFT column on desktop, under About, so the two
   columns balance: the rail (Discord, leaderboard, activity) ran far longer
   than the checklist beside it. Phones keep the brief's order below. */
.aura2-slot--hof { grid-area: hof; }
.aura2-side { grid-area: side; grid-row: earn / span 3; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.aura2-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Page head */
.aura2-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.aura2-h1 { margin: 6px 0 0; font-family: var(--hv2-display); font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.aura2-lede { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-muted); }

/* ------------------------------------------------------------- cards */
.aura2-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); min-width: 0; }
.aura2-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aura2-title { margin: 0; font-family: var(--hv2-display); font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.aura2-title.is-lg { font-size: 22px; letter-spacing: -.015em; }
.aura2-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.aura2-text strong { color: var(--text); font-weight: 700; }
.aura2-small { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.aura2-faint { color: var(--text-faint); }
.aura2-num { font-variant-numeric: tabular-nums; }
.aura2-good { color: var(--ok) !important; }
.aura2-gold { color: var(--gold) !important; }
.aura2-link { color: var(--cta); font-weight: 600; text-decoration: none; }
html.dark .aura2-link { color: var(--vote-down); }
.aura2-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.aura2-divider { height: 1px; background: var(--divider); border: 0; margin: 0; }
.aura2-textbtn { min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.aura2-textbtn:hover { color: var(--text); }

/* A tier's own colour as text, pulled toward the text colour so it keeps
   contrast in both themes (a yellow Final Boss on white would not). */
.aura2-tiercolor { color: color-mix(in srgb, var(--tier, var(--gold)) 70%, var(--text)); }

/* Pills: green is in, gold is on the way, grey is not in play. */
.aura2-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); }
.aura2-pill.is-good { background: var(--ok-soft); border-color: var(--ok-edge); color: var(--ok); }
.aura2-pill.is-wait { background: var(--gold-soft); border-color: var(--gold-edge); color: var(--gold); }
.aura2-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--gold-fill); color: var(--gold-ink); white-space: nowrap; }
.aura2-tag.is-team { background: var(--surface-2); color: var(--text-muted); }

/* ------------------------------------------------------------ meters */
/* The meter is home.css's .hv2-meter (gold filling, green when done). This
   adds the head/foot lines and a locked state for a meter that cannot move
   yet, which is grey rather than gold. */
.aura2-meter { display: flex; flex-direction: column; gap: 8px; }
.aura2-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.aura2-meter__label { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; line-height: 1.35; }
.aura2-meter__value { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.aura2-meter__value.is-done { color: var(--ok); }
.aura2-meter__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.aura2-meter .hv2-meter__fill.is-locked { background: var(--ticket-off); }

/* ----------------------------------------------------------- guest */
.aura2-guest { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.aura2-guest__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* Wrong-region banner */
.aura2-region { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--notice-bg); border: 1px solid var(--gold-edge); }
.aura2-region__icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.aura2-region__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--notice-text); }
.aura2-region__text { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ------------------------------------------------------- identity */
.aura2-id { display: flex; flex-direction: column; gap: 20px; }
.aura2-id__head { display: flex; align-items: center; gap: 20px; }
.aura2-id__emblem { flex-shrink: 0; width: 92px; height: 92px; border: 0; cursor: pointer; transition: transform .15s var(--hv2-ease); }
.aura2-id__emblem:hover { transform: scale(1.03); }
.aura2-id__emblem:active { transform: scale(.98); }
.aura2-id__emblem .hv2-emblem__icon { font-size: 40px; }
.aura2-id__emblem.is-top { box-shadow: 0 0 0 4px var(--gold-soft), 0 0 28px -4px color-mix(in srgb, var(--gold-fill) 55%, transparent); }
.aura2-id__who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aura2-id__eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aura2-id__tier { font-family: var(--hv2-display); font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.aura2-id__xp { font-size: 15px; color: var(--text-muted); }
.aura2-id__xp strong { font-family: var(--hv2-display); font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.aura2-id__momentum { font-size: 13px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.aura2-id__eta { margin: 0; font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.aura2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aura2-stat { min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-inset); border: 1px solid var(--border); }
.aura2-stat__k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.aura2-stat__v { margin: 4px 0 0; font-family: var(--hv2-display); font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aura2-stat__s { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aura2-stat__s.is-good { color: var(--ok); font-weight: 700; }
.aura2-k-short { display: none; }
.aura2-showcase-btn { align-self: stretch; justify-content: center; }

/* ----------------------------------------------------------- today */
.aura2-today__head { display: flex; align-items: center; gap: 16px; padding-bottom: 6px; }
.aura2-ring { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; padding: 5px;
    background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--border) 0); --ring: var(--gold-fill); }
.aura2-ring.is-done { --ring: var(--ok); }
.aura2-ring__in { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.aura2-ring.is-done .aura2-ring__in { color: var(--ok); }
.aura2-today__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aura2-today__cap { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aura2-today__cap [data-aura-resets-in] { color: var(--text-faint); }

/* Checklist rows. Each ends on the same pair: what it still pays and
   "to earn", or a tick and what it paid. */
.aura2-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--divider); color: inherit; text-decoration: none; }
.aura2-row:last-child { padding-bottom: 2px; }
.aura2-row--compact { padding: 11px 0; gap: 12px; }
.aura2-row--compact .aura2-row__ico { width: 32px; height: 32px; font-size: 15px; }
.aura2-row--compact .aura2-row__title { font-size: 14px; }
.aura2-row--compact .aura2-row__sub { font-size: 12.5px; }
.aura2-row--compact .aura2-row__xp { font-size: 15px; }
.aura2-ways { margin-top: 8px; }
.aura2-inline-link { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.aura2-row__ico { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; background: var(--surface-2); border: 1px solid var(--border); }
.aura2-row__ico.is-done { background: var(--ok-soft); border-color: var(--ok-edge); color: var(--ok); font-size: 15px; font-weight: 800; }
.aura2-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aura2-row__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.aura2-row.is-done .aura2-row__title { color: var(--text-muted); }
.aura2-row__go { color: var(--text-faint); }
a.aura2-row:hover .aura2-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.aura2-row__sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aura2-row__main .hv2-meter { margin-top: 6px; height: 6px; }
.aura2-row__end { flex-shrink: 0; text-align: right; min-width: 58px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.aura2-row__xp { font-size: 16px; font-weight: 700; line-height: 1.1; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aura2-row__xp.is-done { color: var(--ok); }
.aura2-row__cap { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.aura2-row__cap.is-done { color: var(--ok); }

/* Streak strip: one segment per day of the cycle. */
.aura2-streak__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.aura2-streak__when { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.aura2-streak__when.is-done { color: var(--ok); }
.aura2-strip { display: flex; gap: 6px; margin-top: 8px; }
.aura2-strip > span { flex: 1; height: 8px; border-radius: 4px; background: var(--border); }
.aura2-strip > span.is-on { background: var(--gold-fill); }
.aura2-strip > span.is-week { background: var(--ok); }
.aura2-strip > span.is-next { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-edge); }

/* ------------------------------------------------------------ draw */
.aura2-draw { display: flex; flex-direction: column; gap: 18px; }
.aura2-draw__prize { margin: 6px 0 0; font-family: var(--hv2-display); font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.aura2-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aura2-ticket { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: var(--surface-inset); border: 1px solid var(--border); min-width: 0; }
.aura2-ticket.is-held { border-color: var(--gold-edge); background: var(--gold-soft); }
.aura2-ticket .hv2-ticket { flex-shrink: 0; width: 96px; height: auto; }
.aura2-ticket__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.aura2-ticket__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.aura2-ticket__note strong { color: var(--text); }
.aura2-ticket__label { display: inline-flex; align-items: center; gap: 6px; }
.aura2-draw__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--divider); }

/* ---------------------------------------------------------- journey */
.aura2-journey { padding-left: 0; padding-right: 0; padding-bottom: 18px; }
.aura2-journey > .aura2-card__head { padding: 0 24px; }
.aura2-rail-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 12px; }
.aura2-rail-scroll::-webkit-scrollbar { display: none; }
.aura2-rail { position: relative; width: max-content; margin: 0 auto; padding: 10px 12px 0; --rail-pct: 0%; }
.aura2-rail__track { position: absolute; top: 36.5px; left: 68px; right: 68px; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.aura2-rail__fill { height: 100%; width: var(--rail-pct); border-radius: 2px; background: var(--gold-fill); }
.aura2-rail__nodes { display: flex; }
.aura2-rail__node { width: 112px; flex-shrink: 0; text-align: center; position: relative; z-index: 1; }
.aura2-rail__node > button { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.aura2-rail__icon { height: 56px; display: flex; align-items: center; justify-content: center; }
.aura2-node { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; flex-shrink: 0; position: relative;
    background: var(--surface); border: 1.5px solid var(--border-strong); }
.aura2-node.is-locked > span { opacity: .45; }
.aura2-node.is-passed { border: 2px solid color-mix(in srgb, var(--tier) 65%, var(--border)); background: color-mix(in srgb, var(--tier) 10%, var(--surface)); }
.aura2-node.is-current { width: 54px; height: 54px; font-size: 25px; border: 2.5px solid var(--tier); background: color-mix(in srgb, var(--tier) 16%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tier) 14%, transparent); }
.aura2-node__tick { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); border: 1px solid var(--ok-edge); color: var(--ok); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.aura2-rail__meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 0; }
.aura2-rail__name { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-muted); }
.aura2-rail__node.is-current .aura2-rail__name { color: var(--text); font-weight: 700; }
.aura2-rail__node.is-locked .aura2-rail__name { color: var(--text-faint); }
.aura2-rail__xp { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.aura2-rail__here { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.aura2-rail__togo { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aura2-perks { margin: 16px 24px 0; padding: 16px; border-radius: 14px; background: var(--surface-inset); border: 1px solid var(--border); }
.aura2-perks__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.aura2-perks__name { font-weight: 700; font-size: 15px; color: var(--text); }
.aura2-perks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.aura2-perks li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.aura2-perks li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-fill); margin-top: 8px; flex-shrink: 0; }

/* ---------------------------------------------------------- discord */
/* Blurple on the mark and the primary button only: a whole card in somebody
   else's brand colour reads as an advert, not as part of the ladder. */
.aura2-discord__head { display: flex; gap: 12px; align-items: center; }
.aura2-discord__mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: #5865F2; color: #fff; display: flex; align-items: center; justify-content: center; }
.aura2-discord__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aura2-discord__title { margin: 0; font-family: var(--hv2-display); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--text); }
.aura2-discord__line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.aura2-discord__line strong { color: var(--text); }
.aura2-discord__pending { color: var(--notice-text); }
.aura2-discord__stats { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.aura2-discord__stats .hv2-meter { height: 6px; }
.aura2-discord__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.aura2-discord__actions .hv2-btn { height: 38px; font-size: 13.5px; }
.aura2-discord__actions form { display: inline; margin: 0; }
.aura2-discord__unlink { font-size: 12.5px; color: var(--text-faint); }
.aura2-btn-discord { background: #5865F2; color: #fff !important; }
.aura2-btn-discord:hover { background: #4752C4; }

/* ------------------------------------------------------ ways to earn */
.aura2-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 40px; }
.aura2-fold > summary::-webkit-details-marker { display: none; }
.aura2-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.aura2-fold__meta { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aura2-fold__chev { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--hv2-ease); }
.aura2-fold[open] .aura2-fold__chev { transform: rotate(180deg); }
.aura2-fold__body { margin-top: 10px; }

/* One-off bonuses are tiles: the payout leads and the action sits on its
   own line at the floor of the tile. */
.aura2-bonus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.aura2-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 18px 12px 14px; border-radius: 16px; background: var(--surface-inset); border: 1px solid var(--border); min-width: 0; }
.aura2-tile.is-open { border-color: var(--gold-edge); }
.aura2-tile.is-done { opacity: .62; }
.aura2-tile__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--text); }
.aura2-tile__xp { font-family: var(--hv2-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.aura2-tile__state { font-weight: 700; font-size: 15px; line-height: 1.1; color: var(--text-muted); }
.aura2-tile__luck { font-weight: 700; font-size: 15px; line-height: 1.1; color: var(--text); }
.aura2-tile__label { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.aura2-tile__desc { font-size: 12px; color: var(--text-muted); line-height: 1.35; margin-bottom: 8px; }
.aura2-bonus-done { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.aura2-bonus-done .aura2-good { font-weight: 700; margin-right: 4px; }
.aura2-tile__cta, .aura2-tile__note { margin-top: auto; }
.aura2-tile__cta { width: 100%; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; background: var(--gold-fill); color: var(--gold-ink) !important; transition: filter .15s var(--hv2-ease), transform .15s var(--hv2-ease); }
.aura2-tile__cta:hover { filter: brightness(1.05); }
.aura2-tile__cta:active { transform: scale(.98); }
.aura2-tile__note { font-size: 12px; color: var(--text-faint); line-height: 1.3; padding-top: 4px; }
a.aura2-tile__note { text-decoration: underline; text-underline-offset: 2px; color: var(--text-muted); }

/* --------------------------------------------------------- activity */
.aura2-day { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; }
.aura2-day:first-child { margin-top: 4px; }
.aura2-day__label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); flex-shrink: 0; }
.aura2-day__line { flex: 1; height: 1px; background: var(--divider); }
.aura2-day__total { font-size: 12.5px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ok); }
.aura2-day__total.is-neg { color: var(--danger); }
.aura2-act { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.aura2-act:nth-child(even) { background: var(--surface-inset); }
.aura2-act__ico { width: 26px; text-align: center; font-size: 17px; flex-shrink: 0; }
.aura2-act__label { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.aura2-act__count { margin-left: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.aura2-act__pts { font-size: 14.5px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ok); }
.aura2-act__pts.is-neg { color: var(--danger); }
.aura2-empty { text-align: center; padding: 28px 12px 12px; }
.aura2-empty__icon { font-size: 30px; margin: 0 0 8px; }
.aura2-empty__title { margin: 0 0 4px; font-weight: 700; font-size: 15.5px; color: var(--text); }

/* How it works, fair play */
.aura2-how { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.aura2-how li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.aura2-how li > span:first-child { font-size: 16px; line-height: 1.45; flex-shrink: 0; width: 22px; text-align: center; }
.aura2-fair { display: flex; gap: 14px; align-items: flex-start; }

/* ------------------------------------------------------ leaderboard */
.aura2-board__list { list-style: none; margin: 12px 0 0; padding: 0; }
.aura2-board__row { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: 10px; border-bottom: 1px solid var(--divider); }
.aura2-board__row:last-child { border-bottom: 0; }
.aura2-board__row.is-me { background: var(--gold-soft); border: 1px solid var(--gold-edge); }
.aura2-board__rank { width: 22px; flex-shrink: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.aura2-board__ava { position: relative; overflow: hidden; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-muted); }
/* The photo sits over the initial, so a slow or failed load shows the letter. */
.aura2-board__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aura2-board__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.aura2-board__name > span:first-child { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura2-board__row.is-me .aura2-board__name > span:first-child { font-weight: 700; color: var(--gold); }
.aura2-board__xp { font-size: 14px; font-weight: 700; color: var(--text); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.aura2-board__row.is-me .aura2-board__xp { color: var(--gold); }
.aura2-board__tier { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 3px 6px; border-radius: 5px; flex-shrink: 0; color: color-mix(in srgb, var(--tag) 70%, var(--text)); background: color-mix(in srgb, var(--tag) 14%, transparent); }
.aura2-board__pinned { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--divider); }
.aura2-board__gap { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-inset); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aura2-board__gap strong { color: var(--text); }
.aura2-region-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); }

/* ----------------------------------------------------------- modals */
.aura2-modal { position: fixed; inset: 0; z-index: 10000; overflow-y: auto; background: rgba(6, 8, 12, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--hv2-font); color: var(--text); -webkit-font-smoothing: antialiased; }
.aura2-modal *, .aura2-modal *::before, .aura2-modal *::after { box-sizing: border-box; }
.aura2-modal__center { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 20px 16px; }
.aura2-modal__card { position: relative; width: 100%; max-width: 440px; padding: 26px 24px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lift); animation: aura2Pop .25s var(--hv2-ease); }
.aura2-modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 15px; cursor: pointer; }
.aura2-modal__close:hover { color: var(--text); }
.aura2-modal__label { margin: 18px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.aura2-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.aura2-rules li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.aura2-rules li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-fill); margin-top: 8px; flex-shrink: 0; }
.aura2-winner { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.aura2-winner__month { color: var(--text-faint); min-width: 64px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.aura2-winner__name { color: var(--ok); font-weight: 700; }
.aura2-winner__private { color: var(--text-faint); font-style: italic; }
.aura2-winner__prize { margin-left: auto; text-align: right; color: var(--text-muted); }
@keyframes aura2Pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Tier showcase: the coin is an object, so it keeps its own metal in both
   themes; the card around it follows the theme. */
.aura2-showcase { max-width: 380px; text-align: center; overflow: hidden; }
.aura2-showcase__who { display: flex; align-items: center; justify-content: center; gap: 8px; }
.aura2-showcase__who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.aura2-showcase__who span:first-of-type { font-size: 14px; font-weight: 700; color: var(--text); }
.aura2-showcase__hint { margin: 0 0 14px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.aura2-showcase__tier { margin: 0 0 4px; font-family: var(--hv2-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.aura2-showcase__xp { margin: 0 0 16px; font-family: var(--hv2-display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--gold); font-variant-numeric: tabular-nums; }
.aura2-showcase__xp span { font-family: var(--hv2-font); font-size: 14px; font-weight: 600; color: var(--text-muted); }
.aura2-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.aura2-chip { padding: 7px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@keyframes aura2Glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes aura2Ember { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-120px) scale(.4); opacity: 0; } }
.aura2-ember { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FF8B55; box-shadow: 0 0 6px rgba(255, 107, 44, .8); animation: aura2Ember 2.8s ease-out infinite; pointer-events: none; }
.aura2-ember.gold { background: #FFC46B; }
.aura2-orbit-spark { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 150, 60, .9); pointer-events: none; will-change: transform, opacity; }
html:not(.dark) .aura2-orbit-spark { background: #FFB44A; }
.aura2-spin-glow { position: absolute; top: 50%; left: 50%; width: 190px; height: 190px; transform: translate(-50%, -52%); border-radius: 50%; background: radial-gradient(circle, rgba(245, 196, 81, .30) 0%, rgba(245, 196, 81, .10) 45%, transparent 70%); animation: aura2Glow 3s ease-in-out infinite; pointer-events: none; }

/* ------------------------------------------------------ hall of fame
   Everyone who reached the top of the ladder. Same avatar as the leaderboard
   (.aura2-board__ava); the tier colour arrives per row as --tag. */
.aura2-hof__count { font-size: 12.5px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aura2-hof__list { list-style: none; margin: 12px 0 0; padding: 0; }
.aura2-hof__row { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border-bottom: 1px solid var(--divider); }
.aura2-hof__row:last-child { border-bottom: 0; }
.aura2-hof__row.is-permanent .aura2-board__ava { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--tag); }
.aura2-hof__row.is-me { background: var(--gold-soft); border: 1px solid var(--gold-edge); }
.aura2-hof__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aura2-hof__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aura2-hof__name > span:first-child { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura2-hof__you { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); flex-shrink: 0; }
.aura2-hof__meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--text-faint); }
.aura2-hof__tier { font-weight: 700; color: color-mix(in srgb, var(--tag) 70%, var(--text)); white-space: nowrap; }
.aura2-hof__since { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aura2-hof__perm { flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; color: color-mix(in srgb, var(--tag) 70%, var(--text)); background: color-mix(in srgb, var(--tag) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tag) 30%, transparent); }
.aura2-hof__empty { margin-top: 12px; padding: 18px 14px; border-radius: 14px; background: var(--surface-inset); border: 1px dashed var(--border); text-align: center; }
.aura2-hof__empty-icon { display: block; font-size: 30px; line-height: 1; }
.aura2-hof__empty-title { margin: 10px 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.aura2-hof__goal { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-inset); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* ------------------------------------------------------ breakpoints */
@media (max-width: 1023px) {
    /* One column in the brief's order: tier, draw, Earn today, Discord, the
       ladder, leaderboard, activity, the rules row. */
    .aura2-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; max-width: 760px; }
    .aura2-body > *, .aura2-slot { grid-area: auto; }
    .aura2-side { display: contents; }
    .aura2-slot--row1 { grid-template-columns: minmax(0, 1fr); }
    .aura2-head { order: 0; }
    .aura2-slot--row1 { order: 1; } .aura2-slot--earn { order: 3; } .aura2-slot--discord { order: 4; }
    .aura2-slot--journey { order: 5; } .aura2-slot--board { order: 6; } .aura2-slot--hof { order: 7; } .aura2-slot--activity { order: 8; }
    .aura2-slot--about { order: 9; }
}
@media (min-width: 560px) {
    .aura2-bonus-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 760px) {
    .aura2-tickets { grid-template-columns: minmax(0, 1fr); }
}

/* Tier journey on a phone: a 3 x 2 grid, never a sideways scroll (brief). */
@media (max-width: 639px) {
    .aura2-rail-scroll { overflow: visible; }
    .aura2-rail { width: auto; margin: 0; padding: 4px 12px 0; }
    .aura2-rail__track { display: none; }
    .aura2-rail__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
    .aura2-rail__node { width: auto; }
    .aura2-rail__node > button { min-height: 44px; }
    .aura2-rail__name { font-size: 12.5px; }
}

/* Phone: full-bleed sections like the homepage, 16px gutters, 44px targets. */
@media (max-width: 639px) {
    .aura2-body { padding: 0 0 32px; gap: 8px; }
    .aura2-head { padding: 22px 16px 14px; }
    .aura2-h1 { font-size: 32px; }
    .aura2-lede { font-size: 15px; margin-top: 6px; }
    .aura2-head .hv2-btn { display: none; }
    .aura2-stack, .aura2-side { gap: 8px; }
    .aura2-card { border-radius: 0; border-left: 0; border-right: 0; padding: 22px 16px; box-shadow: none; }
    .aura2-journey { padding-left: 0; padding-right: 0; }
    .aura2-journey > .aura2-card__head { padding: 0 16px; }
    .aura2-perks { margin: 14px 16px 0; }
    .aura2-region { margin: 0 16px; }
    .aura2-id__head { gap: 16px; }
    .aura2-id__emblem { width: 80px; height: 80px; }
    .aura2-id__emblem .hv2-emblem__icon { font-size: 34px; }
    .aura2-id__tier { font-size: 28px; }
    .aura2-stats { gap: 8px; }
    .aura2-stat { padding: 10px 11px; }
    .aura2-stat__v { font-size: 19px; }
    .aura2-draw__prize { font-size: 21px; }
    .aura2-ticket { padding: 14px; gap: 14px; }
    .aura2-ticket .hv2-ticket { width: 84px; }
    .aura2-row { gap: 12px; }
    .aura2-textbtn { min-height: 44px; }
    .aura2-board__row { min-height: 48px; }
}
@media (max-width: 379px) {
    .aura2-stats { gap: 6px; }
    .aura2-stat { padding: 9px 8px; }
    .aura2-stat__k { letter-spacing: .04em; font-size: 10px; }
    .aura2-stat__v { font-size: 17px; }
    .aura2-stat__s { font-size: 11.5px; }
    .aura2-k-long { display: none; }
    .aura2-k-short { display: inline; }
    .aura2-today__left { display: none; }
    .aura2-id__emblem { width: 68px; height: 68px; }
    .aura2-id__emblem .hv2-emblem__icon { font-size: 28px; }
    .aura2-id__tier { font-size: 25px; }
    .aura2-ticket .hv2-ticket { width: 72px; }
}

/* ================================================ web Aura brief, 2026-09-27 */
.aura2-gold { color: var(--gold); }
.aura2-muted { color: var(--text-muted); }
.hv2-header__back { height: 40px; padding: 0 14px; font-size: 14px; }
@media (max-width: 479px) { .hv2-header__back { display: none; } }

/* The coin: a gold conic ring, the tier emoji inside. Opens the showcase. */
.aura2-coin { width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%; padding: 4px; border: 0; cursor: pointer;
    background: conic-gradient(from 210deg, #F5C451, #FFEBB0, #B9831F, #F5C451); transition: transform .15s var(--hv2-ease); }
.aura2-coin:hover { transform: scale(1.03); }
.aura2-coin:active { transform: scale(.98); }
.aura2-coin:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.aura2-coin.is-static { cursor: default; }
.aura2-coin__in { width: 100%; height: 100%; border-radius: 50%; background: #1C170A; display: flex; align-items: center; justify-content: center; font-size: 48px; line-height: 1; }
html:not(.dark) .aura2-coin__in { background: #FFF6DC; }
.aura2-id { display: flex; flex-direction: column; gap: 20px; }
.aura2-id__tier { font-size: 40px; }
.aura2-id__bar { margin-top: 4px; max-width: 280px; }
.aura2-stat__v { font-size: 24px; }
.aura2-stat__s { font-size: 13px; color: var(--text-faint); }

/* Draw */
.aura2-draw { display: flex; flex-direction: column; gap: 18px; }
.aura2-draw__prize { font-size: 26px; font-weight: 800; margin: 4px 0 2px; }
.aura2-draw__count { font-family: var(--hv2-display); font-size: 22px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.aura2-draw__count span { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.aura2-draw__rules { align-self: flex-start; }
.aura2-ticket__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.aura2-ticket__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.aura2-ticket__title.is-held { color: var(--gold); }
.aura2-ticket__note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.aura2-btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; align-self: flex-start; }
.aura2-slot--row1 .aura2-tickets { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .aura2-slot--row1 .aura2-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aura2-slot--row1 .aura2-ticket { flex-direction: column; align-items: flex-start; } }

/* Journey: done faded with a tick, current gold with a glow, future greyscale and dashed. */
.aura2-node.is-passed > span:first-child { opacity: .4; filter: grayscale(.35); }
.aura2-node.is-passed { border: 1.5px solid var(--border-strong); background: var(--surface-2); }
.aura2-node__tick { top: auto; bottom: -3px; right: -3px; width: 18px; height: 18px; background: #2E9E6A; border: 2px solid var(--surface); color: #fff; }
.aura2-node.is-current { width: 60px; height: 60px; font-size: 30px; border: 2px solid var(--gold-fill); background: var(--gold-soft); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-fill) 18%, transparent); }
.aura2-rail__node.is-current .aura2-rail__name { color: var(--gold); }
.aura2-node.is-locked { border-style: dashed; }
.aura2-node.is-locked > span { opacity: .5; filter: grayscale(1); }
.aura2-room { align-self: center; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(88, 101, 242, .16); color: #B7BDFF; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
html:not(.dark) .aura2-room { color: #3B44C4; background: rgba(88, 101, 242, .12); }
.aura2-room__more { margin-left: 3px; opacity: .8; font-variant-numeric: tabular-nums; }
.aura2-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Earn today: the one checklist. */
.aura2-earn { padding: 0; overflow: hidden; }
.aura2-earn__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 20px 6px; }
.aura2-earn__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.aura2-earn__ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px 8px; }
.aura2-earn__glabel { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: var(--text-muted); }
.aura2-earn__gnote { font-size: 13px; color: var(--text-faint); }
.aura2-chk { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--divider); transition: opacity .25s var(--hv2-ease); }
.aura2-earn__group:last-child .aura2-chk:last-child { border-bottom: 0; }
.aura2-chk.is-done { opacity: .72; }
.aura2-chk__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.aura2-chk.is-done .aura2-chk__ico { background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.aura2-chk__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aura2-chk__title { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--text); }
.aura2-chk.is-done .aura2-chk__title { color: var(--text-muted); }
.aura2-chk__sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-faint); }
.aura2-chk__prog { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--text-faint); }
.aura2-chk__prog .hv2-meter { width: 180px; max-width: 45%; }
.aura2-chk__end { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.aura2-chk__reward { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-weight: 800; color: var(--gold); line-height: 1.2; }
.aura2-chk__reward small { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.aura2-chk__paid { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 15px; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 700; white-space: nowrap; }
.aura2-chk__cta { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 10px; border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.aura2-chk__cta:hover { background: var(--surface-2); }
@media (max-width: 639px) {
    .aura2-chk { flex-wrap: wrap; padding: 14px 16px; }
    .aura2-chk__end { width: 100%; justify-content: space-between; padding-left: 54px; }
    .aura2-chk__reward { flex-direction: row; gap: 4px; align-items: baseline; }
    .aura2-chk__cta { min-height: 44px; }
    .aura2-earn__head, .aura2-earn__ghead { padding-left: 16px; padding-right: 16px; }
}

/* Discord: blurple card. */
.aura2-dc { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; color: #fff; display: flex; flex-direction: column; gap: 14px;
    background: linear-gradient(140deg, #3A43C9 0%, #5865F2 65%, #6E78F7 100%); }
.aura2-dc__bg { position: absolute; right: -24px; top: -26px; opacity: .12; transform: rotate(-12deg); pointer-events: none; }
.aura2-dc__bg svg { width: 130px; height: 130px; }
.aura2-dc__head { position: relative; display: flex; align-items: center; gap: 10px; }
.aura2-dc__mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; }
.aura2-dc__title { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.aura2-dc__bonus { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #F5C451; color: #1A1305; }
.aura2-dc__line { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.aura2-dc__stats { position: relative; display: flex; flex-direction: column; gap: 6px; }
.aura2-dc__row { display: flex; justify-content: space-between; font-size: 13.5px; }
.aura2-dc__bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.aura2-dc__bar span { display: block; height: 100%; border-radius: 4px; background: #fff; }
.aura2-dc__actions { position: relative; display: flex; gap: 8px; }
.aura2-dc__btn { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff; color: #3B44C4; font-size: 14px; font-weight: 800; text-decoration: none; }
.aura2-dc__ghost { min-height: 44px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 11px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.aura2-dc__unlink { position: relative; margin: -4px 0 0; }
.aura2-dc__unlink button { background: none; border: 0; padding: 4px 0; color: rgba(255, 255, 255, .7); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
@media (max-width: 639px) { .aura2-dc { border-radius: 0; } }

/* Leaderboard tabs, staff row */
.aura2-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-inset); border: 1px solid var(--border); }
.aura2-seg button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.aura2-seg button.is-on { background: var(--border); color: var(--text); font-weight: 600; }
.aura2-board__staff { margin-top: 8px; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--gold-edge); }
.aura2-board__stafftag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--gold); }
.aura2-board__staff .aura2-board__name { font-size: 14px; font-weight: 600; color: var(--text); display: block; }

/* Activity: one row per day, today open. */
.aura2-dayrow { border-bottom: 1px solid var(--divider); }
.aura2-dayrow:last-child { border-bottom: 0; }
.aura2-dayrow > summary { list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.aura2-dayrow > summary::-webkit-details-marker { display: none; }
.aura2-dayrow__label { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); }
.aura2-dayrow__label.is-today { font-weight: 700; }
.aura2-dayrow__total { font-size: 14px; font-weight: 700; color: var(--ok); }
.aura2-dayrow__total.is-neg { color: var(--text-muted); }
.aura2-dayrow__chev { color: var(--text-faint); transition: transform .2s var(--hv2-ease); }
.aura2-dayrow[open] .aura2-dayrow__chev { transform: rotate(90deg); }
.aura2-dayrow__items { padding: 0 22px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.aura2-dayrow__item { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-muted); }

/* How it works & fair play */
.aura2-fold > summary { flex-wrap: wrap; }
.aura2-fold > summary .aura2-title { flex: 1 1 auto; font-size: 18px; }
.aura2-fold__note { font-size: 13.5px; color: var(--text-faint); }

/* ---------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    .aura2-ember, .aura2-orbit-spark { display: none; }
    .aura2-spin-glow, .aura2-modal__card { animation: none; }
    .aura2-id__emblem, .aura2-fold__chev, .aura2-coin, .aura2-chk, .aura2-dayrow__chev { transition: none; }
}

/* Light mode: a tier colour meant for dark (gold #FBBF24 is 1.67:1 on white)
   is darkened enough to read; fills keep the bright colour. */
html:not(.dark) .aura2-tiercolor { color: color-mix(in srgb, var(--tier, var(--gold)) 55%, #000); }
@media (max-width: 639px) {
    .aura2-coin { width: 84px; height: 84px; }
    .aura2-coin__in { font-size: 38px; }
    .aura2-id__tier { font-size: 30px; }
    .aura2-stat__v { font-size: 20px; }
}
.aura2-stat__v { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.aura2-id .aura2-stats { margin-top: auto; }
.aura2-head .aura2-lede { margin: 0; }

/* =============================== condensed (owner, 2026-09-27) ===============
   Vertical space where it was wasted: the top row stretched to the tallest
   card, tickets stacked a graphic above their text, checklist rows were 70px+
   with loose padding, and bonus tiles were 140px columns for one link each. */
.aura2-body { padding-top: 24px; gap: 16px; }
.aura2-stack, .aura2-side, .aura2-slot--row1 { gap: 16px; }
.aura2-h1 { font-size: 38px; }
.aura2-card { padding: 20px; }
.aura2-id, .aura2-draw { gap: 14px; }
.aura2-coin { width: 88px; height: 88px; }
.aura2-coin__in { font-size: 40px; }
.aura2-id__tier { font-size: 34px; }
.aura2-stat { padding: 10px 12px; }
.aura2-stat__v { font-size: 21px; margin-top: 0; }

/* Tickets: graphic beside the text, always, at a smaller size. */
.aura2-slot--row1 .aura2-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aura2-slot--row1 .aura2-ticket { flex-direction: row; align-items: center; padding: 12px; gap: 12px; }
.aura2-ticket .hv2-ticket, .aura2-slot--row1 .aura2-ticket .hv2-ticket { width: 64px; }
.aura2-ticket__title { font-size: 14px; }
.aura2-ticket__note { font-size: 12.5px; }
@media (max-width: 1199px) and (min-width: 1024px) { .aura2-slot--row1 .aura2-tickets { grid-template-columns: minmax(0, 1fr); } }

/* Journey */
.aura2-journey { padding-top: 16px; padding-bottom: 14px; }
.aura2-rail-scroll { margin-top: 4px; }
.aura2-rail { padding-top: 4px; }
.aura2-rail__meta { padding-top: 4px; gap: 1px; }

/* Checklist rows */
.aura2-earn__head { padding: 18px 20px 2px; }
.aura2-earn__ghead { padding: 12px 20px 4px; }
.aura2-chk { padding: 10px 20px; gap: 12px; }
.aura2-chk__ico { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.aura2-chk__title { font-size: 15px; }
.aura2-chk__sub { font-size: 12.5px; }
.aura2-chk__prog { margin-top: 3px; }
.aura2-chk__cta { min-height: 32px; padding: 0 12px; }

/* Bonuses: one compact row each, not a tall tile. */
.aura2-bonus-grid { margin-top: 12px; gap: 8px; }
.aura2-tile { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 10px 12px; }
.aura2-tile__ico { width: 34px; height: 34px; flex-shrink: 0; font-size: 16px; }
.aura2-tile__xp { font-size: 18px; }
.aura2-tile__cta, .aura2-tile__note { margin-top: 0; margin-left: auto; width: auto; flex-shrink: 0; }
.aura2-tile__cta { min-height: 34px; padding: 0 12px; }

/* Rail */
.aura2-dc { padding: 16px; gap: 10px; }
.aura2-board__row { min-height: 40px; }
.aura2-board__list { margin-top: 6px; }
.aura2-dayrow > summary { min-height: 38px; }
.aura2-fold > summary { min-height: 32px; }

@media (max-width: 639px) {
    .aura2-card { padding: 18px 16px; }
    .aura2-head { padding: 16px 16px 10px; }
    .aura2-h1 { font-size: 30px; }
    .aura2-coin { width: 72px; height: 72px; }
    .aura2-coin__in { font-size: 32px; }
    .aura2-id__tier { font-size: 27px; }
    .aura2-slot--row1 .aura2-tickets { grid-template-columns: minmax(0, 1fr); }
    .aura2-chk { padding: 10px 16px; }
    .aura2-chk__end { padding-left: 46px; }
    .aura2-chk__cta, .aura2-tile__cta, .aura2-dc__btn, .aura2-dc__ghost { min-height: 44px; }
    .aura2-board__row, .aura2-dayrow > summary { min-height: 44px; }
}
/* The tier card sits at its own height instead of stretching to the draw
   card and opening a gap above its stats; the draw card lost its footer row
   (rules link moved beside the ticket count) so the two now match. */
.aura2-slot--row1 { align-items: start; }
.aura2-slot--row1 > .aura2-slot > .aura2-card, .aura2-slot--row1 > .aura2-slot > section { height: auto; }
.aura2-id .aura2-stats { margin-top: 0; }
.aura2-draw__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.aura2-draw__rules { min-height: 0; padding: 0; font-size: 12.5px; white-space: nowrap; }
.aura2-earn { padding: 0; }
.aura2-tile { flex-wrap: wrap; }
.aura2-tile__label { flex: 1 1 90px; min-width: 0; }
.aura2-tile__luck { white-space: nowrap; }
.aura2-tile .aura2-tile__note[style] { display: none; }
@media (max-width: 639px) { .aura2-draw__rules { min-height: 44px; } }
.aura2-dc__rule { font-size: 12px; opacity: .9; }

/* Share my card (the dialog itself is public/v2/aura-moments.css). */
.aura2-id__share { margin-top: 14px; display: flex; }
.aura2-sharebtn { gap: 8px; font-weight: 600; }
@media (max-width: 640px) { .aura2-sharebtn { width: 100%; } }

/* ---------------------------------------------------------------- streak flame
   The evolved flame (components/streak-flame): a gradient flame that glows and
   flickers from the bottom, like a live one. */
.df-flame { display: inline-block; transform-origin: 50% 90%; overflow: visible; animation: df-flicker 1.7s ease-in-out infinite; filter: drop-shadow(0 0 3px var(--flame-glow)); }
.df-flame--gold { --flame-glow: rgba(245, 158, 11, .75); }
.df-flame--blue { --flame-glow: rgba(56, 189, 248, .85); }
.df-flame--violet { --flame-glow: rgba(192, 132, 252, .85); animation: df-flicker 1.7s ease-in-out infinite, df-hue 7s ease-in-out infinite; }
.df-flame__core { opacity: .45; animation: df-core 2.6s ease-in-out infinite; }
@keyframes df-flicker {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    25% { transform: scale(.97, 1.05) rotate(-2deg); }
    50% { transform: scale(1.02, .97) rotate(1deg); }
    75% { transform: scale(.98, 1.04) rotate(2deg); }
}
@keyframes df-core { 0%, 100% { opacity: .3; } 50% { opacity: .6; } }
@keyframes df-hue { 0%, 100% { filter: drop-shadow(0 0 3px var(--flame-glow)) hue-rotate(0deg); } 50% { filter: drop-shadow(0 0 4px var(--flame-glow)) hue-rotate(-28deg); } }
@media (prefers-reduced-motion: reduce) { .df-flame, .df-flame__core { animation: none; } }

/* ------------------------------------------------------------- secret coin
   Coins dropped from the showcase coin, the lucky one's burst, and the card
   that says what it was. All on one fixed layer above the modal. */
.sc-layer { position: fixed; inset: 0; z-index: 10001; pointer-events: none; overflow: hidden; }
.sc-drop { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #2e3648, #0b0d12 70%); box-shadow: inset 0 0 0 3px #e2b24e, 0 6px 14px rgba(0, 0, 0, .35); will-change: transform; }
.sc-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .25s ease; }
.sc-dim.is-on { opacity: 1; }
.sc-burst { position: absolute; left: 50%; top: 45%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%) scale(.3); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.5, .4, 1), opacity .25s ease; }
.sc-burst.is-on { transform: translate(-50%, -60%) scale(1); opacity: 1; }
.sc-burst.is-out { opacity: 0; transition: opacity .35s ease; }
.sc-coin { border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.sc-coin::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); }
.sc-burst .sc-coin { animation: sc-spin 1.2s ease-out both; }
.sc-burst--legendary .sc-coin { animation-duration: 2.4s; }
@keyframes sc-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.sc-burst--legendary .sc-coin { animation-name: sc-spin3; }
@keyframes sc-spin3 { from { transform: rotateY(0deg); } to { transform: rotateY(1080deg); } }
.sc-glow { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.sc-amount { margin-top: 10px; font-family: var(--hv2-display); font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.sc-card { position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; width: min(420px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: #1E2430; color: #F3F5F9; box-shadow: 0 16px 36px rgba(0, 0, 0, .35); transition: transform .35s cubic-bezier(.2, 1.2, .4, 1), opacity .25s ease; font-family: var(--hv2-font); pointer-events: auto; }
html.dark .sc-card { background: #F3F5F9; color: #1E2430; }
.sc-card.is-on { transform: translate(-50%, 0); opacity: 1; }
.sc-card__title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
.sc-card__amount { font-weight: 800; }
.sc-card__dots { display: flex; gap: 5px; align-items: center; margin-top: 5px; font-size: 12px; font-weight: 600; opacity: .75; }
.sc-card__dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .3; display: inline-block; }
.sc-card__dots i.is-found { background: #F5C451; opacity: 1; }
.sc-card__foot { margin-top: 5px; font-size: 12px; line-height: 1.45; opacity: .75; }
.sc-plus { position: absolute; font-size: 18px; font-weight: 800; pointer-events: none; transition: transform 1.4s ease-out .5s, opacity 1.4s ease-out .5s; }
.sc-plus.is-up { transform: translateY(-22px); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sc-burst, .sc-card, .sc-plus { transition: none; } .sc-burst .sc-coin { animation: none; } }

/* ===== One-off bonuses (2026-10-01 rebuild) =====
   One card per quest: icon and reward on top, the name, one line on what it
   involves, the button at the foot. Equal heights across a row. Done ones are
   a row of pills underneath, each with what it paid. */
.aura2-q-intro { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.aura2-q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
.aura2-q { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--surface-inset); border: 1px solid var(--gold-edge); min-width: 0; }
.aura2-q.is-done { border-color: var(--border); opacity: .7; }
.aura2-q__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.aura2-q__ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text); }
.aura2-q__reward { font-family: var(--hv2-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--gold); white-space: nowrap; }
.aura2-q__reward small { font-family: inherit; font-size: 12px; font-weight: 700; opacity: .8; }
.aura2-q__reward.is-done { font-size: 13px; color: var(--ok); }
.aura2-q__reward.is-muted { font-size: 12.5px; color: var(--text-muted); font-family: inherit; }
.aura2-q__reward.is-luck { font-size: 14px; color: var(--text); }
.aura2-q__title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.aura2-q__desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.aura2-q__foot { margin-top: auto; padding-top: 8px; }
.aura2-q__cta { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; background: var(--gold-fill); color: var(--gold-ink) !important; transition: filter .15s var(--hv2-ease), transform .15s var(--hv2-ease); }
.aura2-q__cta:hover { filter: brightness(1.05); }
.aura2-q__cta:active { transform: scale(.98); }
.aura2-q__cta.is-quiet { background: transparent; border: 1px solid var(--border); color: var(--text-muted) !important; font-weight: 600; }
.aura2-q__note { display: block; text-align: center; font-size: 12.5px; color: var(--text-faint); padding: 9px 0; }
.aura2-q-done { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.aura2-q-done__head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.aura2-q-done__head .aura2-num { letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.aura2-q-done__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aura2-q-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--ok-soft); border: 1px solid var(--ok-edge); font-size: 13px; font-weight: 600; color: var(--text); }
.aura2-q-chip__tick { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ok); color: #fff; font-size: 12px; font-weight: 800; }
.aura2-q-chip__xp { font-size: 12.5px; font-weight: 700; color: var(--ok); }
@media (max-width: 559px) {
    .aura2-q-grid { grid-template-columns: minmax(0, 1fr); }
    .aura2-q { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
    .aura2-q__top { display: contents; }
    .aura2-q__ico { grid-row: span 2; }
    .aura2-q__reward { grid-column: 2; order: 2; font-size: 17px; }
    .aura2-q__title { grid-column: 2; order: 1; }
    .aura2-q__desc, .aura2-q__foot { grid-column: 1 / -1; order: 3; }
    .aura2-q__foot { order: 4; }
    .aura2-q__cta { min-height: 44px; }
}

/* ===== Earn today (2026-10-01 rebuild): done / still to earn / other ways ===== */
.aura2-earn2__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 4px; }
.aura2-earn2__score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.aura2-earn2__big { font-family: var(--hv2-display); font-size: 30px; font-weight: 700; color: var(--ok); }
.aura2-earn2__cap { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.aura2-earn2__block { padding: 14px 20px 4px; }
.aura2-earn2__block + .aura2-earn2__block, .aura2-earn2__streak + .aura2-earn2__block { border-top: 1px solid var(--divider); margin-top: 8px; }
.aura2-earn2__label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.aura2-earn2__more { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 700; color: var(--gold); }
.is-others .aura2-earn2__more { color: var(--text-faint); font-weight: 500; }
.aura2-earn2__hint { margin: 10px 0 4px; font-size: 12.5px; color: var(--text-faint); }
.aura2-earn2__alldone { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 14px; }
.aura2-earn2__streak { display: flex; gap: 10px; align-items: baseline; margin: 10px 20px 4px; padding: 10px 14px; border-radius: 12px; background: var(--surface-inset); border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.aura2-earn2__streak b { color: var(--text); font-weight: 700; }
.aura2-earn2 .aura2-chk { padding: 10px 0; border-bottom: 1px solid var(--divider); }
.aura2-earn2 .aura2-earn2__block .aura2-chk:last-child { border-bottom: 0; }
.aura2-earn2 .aura2-chk.is-quiet .aura2-chk__ico { opacity: .85; }
.aura2-earn2 .aura2-chk.is-quiet .aura2-chk__title { font-weight: 600; font-size: 14.5px; }
.aura2-chk__cta.is-primary { background: var(--gold-fill); border-color: transparent; color: var(--gold-ink); font-weight: 700; }
.aura2-chk__cta.is-primary:hover { filter: brightness(1.05); background: var(--gold-fill); }
.aura2-q-chip__times { color: var(--text-muted); font-weight: 600; }
.aura2-earn2 > .aura2-earn2__block:last-child { padding-bottom: 14px; }
@media (max-width: 639px) {
    .aura2-earn2__head, .aura2-earn2__block { padding-left: 16px; padding-right: 16px; }
    .aura2-earn2__streak { margin-left: 16px; margin-right: 16px; }
    .aura2-earn2 .aura2-chk__end { padding-left: 46px; }
}
.aura2-q-chip.is-neg { background: transparent; border-color: var(--border); color: var(--text-muted); }
.aura2-q-chip.is-neg .aura2-q-chip__tick { background: var(--surface-2); color: var(--text-muted); }
.aura2-q-chip.is-neg .aura2-q-chip__xp { color: var(--text-muted); }

/* How often a row pays, beside its name: the question the old list left open. */
.aura2-rule { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; font-weight: 700; color: var(--text-muted); vertical-align: 2px; white-space: nowrap; }
.aura2-q__title .aura2-rule { margin-left: 4px; }
.aura2-chk.is-locked { opacity: .6; }
.aura2-chk__lock { font-size: 12.5px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.aura2-earn2 .aura2-chk.is-done { opacity: .8; }
.aura2-earn2 .aura2-chk.is-done .aura2-chk__ico { background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.aura2-earn2__block .aura2-earn2__streak { margin: 12px 0 2px; }
.aura2-faint { color: var(--text-faint); }

/* Earn plan rows (2026-10-01): icon | name, line, bar | button | the number.
   The number sits in a fixed right-hand column so it lines up down the card. */
.aura2-er { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 92px; align-items: center; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.aura2-earn2__block .aura2-er:last-child { border-bottom: 0; }
.aura2-er__ico { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.aura2-er.is-done .aura2-er__ico { background: var(--ok-soft); color: var(--ok); font-weight: 800; }
.aura2-er.is-done, .aura2-er.is-locked { opacity: .78; }
.aura2-er__main { min-width: 0; }
.aura2-er__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.aura2-er__line { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.aura2-er__bar { margin-top: 6px; max-width: 220px; }
.aura2-er__act { display: flex; justify-content: flex-end; }
.aura2-er__act .aura2-chk__cta { min-height: 36px; }
.aura2-er__chip { text-align: right; font-size: 15px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.aura2-er__chip.is-done { color: var(--ok); font-size: 18px; }
@media (max-width: 559px) {
    .aura2-er { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 8px; }
    .aura2-er__chip { grid-column: 3; grid-row: 1; align-self: start; padding-top: 8px; }
    .aura2-er__act { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; }
    .aura2-er__act:empty { display: none; }
    .aura2-er__act .aura2-chk__cta { min-height: 44px; }
}

.aura2-glance { padding: 6px 20px 2px; }
.aura2-glance__bar { height: 10px; }
.aura2-glance__bar .hv2-meter__fill { background: var(--ok); }
.aura2-glance__line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.aura2-glance__badge { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
@media (max-width: 639px) { .aura2-glance { padding-left: 16px; padding-right: 16px; } }

/* ======================================================================
   Earn panel v2 (owner concept, 2026-10-01): the compact tier row and the
   one-list Earn card, drawn from AuraEarnPlan's `panel`. Site tokens only,
   so the theme toggle (html.dark / html.light) themes it.
   ====================================================================== */
.aura2-ico { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.aura2-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-faint); }
.aura2-muted-t { color: var(--text-muted); }

/* Tier row */
.aura2-tc { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: background .15s var(--hv2-ease), border-color .15s var(--hv2-ease); }
.aura2-tc:hover { border-color: var(--gold-edge); }
.aura2-tc:focus-visible, .aura2-pa:focus-visible, .aura2-pn__bd summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.aura2-tc__badge { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--gold); background: var(--gold-soft); display: grid; place-items: center; font-size: 26px; line-height: 1; }
.aura2-tc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aura2-tc__name { font-family: var(--hv2-display); font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--gold); overflow-wrap: anywhere; }
.aura2-tc__line { font-size: 13.5px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.aura2-tc__bar { display: block; height: 4px; margin-top: 5px; max-width: 220px; }
.aura2-tc__bar > .hv2-meter__fill, .aura2-pa__bar > .hv2-meter__fill { display: block; height: 100%; }
.aura2-tc__bit { white-space: nowrap; }

/* Earn card */
.aura2-pn { padding: 0; overflow: hidden; }
.aura2-pn__head { padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.aura2-pn__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.aura2-pn__row.is-baseline { align-items: baseline; flex-wrap: wrap; }
.aura2-pn__row.is-end { align-items: flex-end; }
.aura2-pn__row.is-wrap { flex-wrap: wrap; align-items: flex-start; }
.aura2-pn__right { text-align: right; }
.aura2-pn__big { font-family: var(--hv2-display); font-size: 32px; font-weight: 800; line-height: 1; color: var(--ok); }
.aura2-pn__mid { font-family: var(--hv2-display); font-size: 20px; font-weight: 800; line-height: 1; color: var(--text); }
.aura2-pn__big + .aura2-small, .aura2-pn__mid + .aura2-small { margin-top: 4px; }
.aura2-pn__bar { height: 8px; }
.aura2-pn__bar .hv2-meter__fill { background: var(--ok); }

.aura2-pn__bd { font-size: 13px; min-width: 0; }
.aura2-pn__bd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-weight: 700; color: var(--text-muted); border-radius: 8px; }
.aura2-pn__bd summary::-webkit-details-marker { display: none; }
.aura2-pn__bd summary:hover { color: var(--text); }
.aura2-pn__bd summary .aura2-ico { width: 14px; height: 14px; transition: transform .2s var(--hv2-ease); }
.aura2-pn__bd[open] summary .aura2-ico { transform: rotate(180deg); }
.aura2-pn__bd ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: min(240px, 100%); }
.aura2-pn__bd li { display: flex; justify-content: space-between; gap: 16px; color: var(--text); }
.aura2-pn__bd li .aura2-good { font-weight: 700; }
.aura2-pn__streak { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--gold-soft); border: 1px solid var(--gold-edge); color: var(--gold); }

.aura2-pn__goals { margin: 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-inset); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.aura2-pn__goal { margin: 0; display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--text); min-width: 0; }
.aura2-pn__goal strong { font-weight: 700; }
.aura2-pn__goal-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--gold); }

.aura2-pn__list { list-style: none; margin: 0; padding: 12px 0 4px; }
.aura2-pn__list li + li .aura2-pa { border-top: 1px solid var(--divider); }
.aura2-pa { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 64px; color: var(--text); text-decoration: none; transition: background .15s var(--hv2-ease); min-width: 0; }
a.aura2-pa:hover { background: var(--surface-2); }
.aura2-pa:focus-visible { outline-offset: -2px; }
.aura2-pa__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); }
.aura2-pa__emoji { font-size: 18px; line-height: 1; }
.aura2-pa__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aura2-pa__title { font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.aura2-pa__tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 2px; background: var(--gold-soft); border: 1px solid var(--gold-edge); color: var(--gold); white-space: nowrap; }
.aura2-pa__sub { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.aura2-pa__bar { display: block; height: 4px; margin-top: 2px; max-width: 200px; }
.aura2-pa__bar .hv2-meter__fill { background: var(--gold); }
.aura2-pa__val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; max-width: 40%; text-align: right; }
.aura2-pa__rate { font-size: 15px; font-weight: 800; color: var(--gold); line-height: 1.2; }
.aura2-pa__limit { font-size: 12.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.aura2-pa__lock { width: 12px; height: 12px; }
.aura2-pa.is-done { opacity: .6; }
.aura2-pa.is-done .aura2-pa__ico { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-edge); }
.aura2-pa.is-done .aura2-pa__rate { color: var(--ok); }
.aura2-pa.is-locked .aura2-pa__ico { opacity: .7; }
.aura2-pa.is-locked .aura2-pa__rate { color: var(--text-muted); }

.aura2-pn__passive { margin: 4px 16px 16px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.aura2-pn__passive strong { color: var(--text); }
.aura2-pn__extra { margin: -4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }

.aura2-pn__chance { margin: 4px 16px 16px; padding: 10px 14px 6px; border-radius: 12px; border: 1px dashed var(--border-strong); }
.aura2-pn__chance-title { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.aura2-pn__chance ul { list-style: none; margin: 0; padding: 0; }
.aura2-pc { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-width: 0; color: var(--text); }
.aura2-pc + .aura2-pc { border-top: 1px solid var(--divider); }
.aura2-pc__ico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-muted); }
.aura2-pc__ico .aura2-ico { width: 16px; height: 16px; }
.aura2-pc__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.aura2-pc .aura2-pa__rate { font-size: 13.5px; }

.aura2-pn__oneoff { border-top: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text); }
.aura2-pn__oneoff summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; min-height: 48px; }
.aura2-pn__oneoff summary::-webkit-details-marker { display: none; }
.aura2-pn__oneoff summary:hover { background: var(--surface-2); }
.aura2-pn__oneoff summary > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.aura2-pn__oneoff .aura2-ico { width: 16px; height: 16px; }
.aura2-pn__oneoff-chev { color: var(--text-muted); transition: transform .2s var(--hv2-ease); }
.aura2-pn__oneoff[open] .aura2-pn__oneoff-chev { transform: rotate(180deg); }
.aura2-pn__oneoff ul { list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.aura2-pn__oneoff li { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .aura2-pn__oneoff-chev { transition: none; } }

.aura2-luck { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; border-color: var(--ok-edge); }
.aura2-luck__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--ok-soft); }
.aura2-luck__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aura2-luck__title { font-size: 15.5px; font-weight: 800; color: var(--text); }
.aura2-luck__line { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.aura2-luck__cta { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; background: var(--surface-2); border: 1px solid var(--border); }
.aura2-luck__cta:hover { border-color: var(--ok-edge); }

@media (min-width: 640px) {
    .aura2-pn__head { padding: 20px 20px 16px; }
    .aura2-pn__goals { margin: 0 20px; }
    .aura2-pa { padding: 13px 20px; }
    .aura2-pn__passive, .aura2-pn__chance { margin: 4px 20px 18px; }
    .aura2-pn__oneoff summary { padding: 14px 20px; }
    .aura2-pn__oneoff ul { padding: 0 20px 14px; }
}

/* With the panel: tier row and Earn lead the main column, the draw heads the
   rail. Below 1024px: tier + Earn, then the draw, then the rest as before. */
@media (min-width: 1024px) {
    .has-panel .aura2-body {
        grid-template-areas:
            "head    head"
            "earn    draw"
            "earn    side"
            "journey journey"
            "about   about"
            "hof     hof";
        /* Earn spans the draw row and the rail row; any height Earn has over
           the two goes to the rail's row, never under the draw card. */
        grid-template-rows: auto auto 1fr auto auto auto;
    }
    .has-panel .aura2-slot--row1 { display: contents; }
    .has-panel .aura2-slot--draw { grid-area: draw; }
    .has-panel .aura2-side { grid-area: side; grid-row: auto; }
    .has-panel .aura2-slot--row1 .aura2-tickets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
    .has-panel .aura2-slot--earn { order: 1; }
    .has-panel .aura2-slot--row1 { order: 2; }
}
@media (max-width: 639px) {
    .aura2-tc { padding: 14px 16px; }
    .aura2-pn { border-radius: 0; }
}
@media (max-width: 379px) {
    .aura2-pa { gap: 10px; }
    .aura2-pa__ico { width: 34px; height: 34px; border-radius: 10px; }
    .aura2-pn__big { font-size: 28px; }
}