/* ============================================================
   NETORBUS — RETENTION FEATURES (2026-09-22)

   Styling for the seven features added on top of the premium
   layer: faction daily objectives and MOTD, pinned faction
   messages, the weekly faction board, market price sparklines,
   bank interest, the profile showcase and the casino Vault.

   Loads immediately after premium.css. It reads the same tokens
   and follows the same rules: identity lives in tokens.css, and
   every animation is answered in the reduced-motion block at the
   bottom of this file.
   ============================================================ */

/* ------------------------------------------------------------
   R1. FACTION BRIEFING — message of the day + today's objective
   ------------------------------------------------------------ */
.nb-faction-briefing {
    display: grid;
    gap: 14px;
    margin: 0 auto 24px;
    max-width: 900px;
    text-align: left;
}

@media (min-width: 860px) {
    .nb-faction-briefing { grid-template-columns: 1fr 1fr; align-items: start; }
}

.nb-motd,
.nb-objective {
    padding: 16px 18px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-md);
    background: var(--nb-grad-panel);
    box-shadow: var(--nb-shadow-sm);
}

.nb-motd__head,
.nb-objective__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.nb-motd__head h3,
.nb-objective__head h3 {
    margin: 0;
    font-family: var(--nb-font-ui);
    font-size: var(--nb-text-xs);
    font-weight: 700;
    letter-spacing: var(--nb-tracking-caps);
    text-transform: uppercase;
    color: var(--nb-text-dim);
}

.nb-motd__head h3 i,
.nb-objective__head h3 i { color: var(--nb-gold); margin-right: 6px; }

.nb-motd__head small { color: var(--nb-text-faint); font-size: 0.7rem; }

.nb-motd__body {
    margin: 0;
    color: var(--nb-ivory);
    font-size: var(--nb-text-base);
    line-height: 1.6;
    text-wrap: pretty;
    /* A leader's line breaks are deliberate; keep them. */
    white-space: pre-line;
}

.nb-motd__body--empty { color: var(--nb-text-faint); font-style: italic; }

.nb-motd__edit { margin-top: 12px; }

.nb-motd__edit summary {
    cursor: pointer;
    font-size: var(--nb-text-sm);
    color: var(--nb-gold-bright);
    list-style: none;
    padding: 4px 0;
}

.nb-motd__edit summary::-webkit-details-marker { display: none; }

.nb-motd__edit summary::before {
    content: "\f304"; /* pen */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
}

.nb-motd__edit textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--nb-surface-inset);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    color: var(--nb-ivory);
    font: inherit;
    font-size: var(--nb-text-sm);
    resize: vertical;
}

.nb-motd__actions { display: flex; gap: 8px; margin-top: 8px; }

.nb-objective.is-complete { border-color: rgba(70, 179, 122, 0.45); }

.nb-objective__reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nb-text-xs);
    color: var(--nb-text-dim);
}

.nb-objective__goal {
    margin: 0 0 12px;
    font-family: var(--nb-font-display);
    font-size: var(--nb-text-md);
    color: var(--nb-ivory);
    text-wrap: balance;
}

.nb-objective__bar {
    height: 8px;
    border-radius: var(--nb-radius-round);
    background: var(--nb-surface-inset);
    border: 1px solid var(--nb-border-soft);
    overflow: hidden;
}

.nb-objective__bar > span {
    display: block;
    height: 100%;
    width: var(--fill, 0%);
    border-radius: inherit;
    background: var(--nb-grad-gold);
    transition: width var(--nb-dur-slow) var(--nb-ease-out);
}

.nb-objective.is-complete .nb-objective__bar > span {
    background: linear-gradient(90deg, var(--nb-jade-dim), var(--nb-jade-bright));
}

.nb-objective__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: var(--nb-text-xs);
    color: var(--nb-text-dim);
}

.nb-objective__meta i { color: var(--nb-gold); }

.nb-objective__contributors {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.nb-objective__contributors li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: var(--nb-radius-xs);
    font-size: var(--nb-text-sm);
    color: var(--nb-text);
}

.nb-objective__contributors li:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }

.nb-objective__contributors li.is-you {
    background: rgba(201, 162, 39, 0.10);
    color: var(--nb-gold-bright);
}

.nb-objective__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-objective__paid { font-size: var(--nb-text-xs); }

.nb-objective__empty,
.nb-objective__nudge {
    margin: 12px 0 0;
    font-size: var(--nb-text-sm);
    color: var(--nb-text-faint);
}

.nb-objective__nudge a { color: var(--nb-gold-bright); }

/* ------------------------------------------------------------
   R2. PINNED FACTION MESSAGES
   ------------------------------------------------------------ */
.nb-pinned-messages { margin-bottom: 16px; }

.nb-pinned-messages h4 {
    margin: 0 0 8px;
    font-size: var(--nb-text-xs);
    letter-spacing: var(--nb-tracking-caps);
    text-transform: uppercase;
    color: var(--nb-gold);
}

.nb-pinned-message {
    padding: 10px 15px;
    margin-bottom: 8px;
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-left-width: 3px;
    border-radius: var(--nb-radius-sm);
    background: rgba(201, 162, 39, 0.06);
}

.nb-pinned-message__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nb-pinned-message__head strong { color: var(--nb-gold-bright); }
.nb-pinned-message__head small { color: var(--nb-text-faint); margin-left: auto; }
.nb-pinned-message p { margin: 5px 0 0; color: var(--nb-text); text-wrap: pretty; }

.nb-pin-toggle {
    background: none;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-xs);
    color: var(--nb-text-dim);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px;
    min-height: 0;
    cursor: pointer;
}

.nb-pin-toggle:hover { color: var(--nb-gold-bright); border-color: var(--nb-gold); }

/* ------------------------------------------------------------
   R3. WEEKLY FACTION BOARD
   ------------------------------------------------------------ */
.nb-week-board {
    padding: 18px;
    margin-bottom: 26px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-md);
    background: var(--nb-grad-panel);
    text-align: left;
}

.nb-week-board__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.nb-week-board__head h2 {
    margin: 0;
    font-family: var(--nb-font-display);
    font-size: var(--nb-text-lg);
    color: var(--nb-ivory);
}

.nb-week-board__head h2 i { color: var(--nb-gold); }

.nb-week-board__head p {
    margin: 4px 0 0;
    font-size: var(--nb-text-sm);
    color: var(--nb-text-dim);
}

.nb-week-board__timer {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
}

.nb-week-board__timer-label {
    font-size: 0.62rem;
    letter-spacing: var(--nb-tracking-caps);
    text-transform: uppercase;
    color: var(--nb-text-faint);
}

.nb-week-board__prizes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.nb-week-board__prizes small { color: var(--nb-text-faint); font-size: 0.7rem; }

.nb-week-prize {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--nb-radius-round);
    border: 1px solid var(--nb-border);
    background: var(--nb-surface-inset);
    font-family: var(--nb-font-data);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--nb-text-dim);
}

.nb-week-prize b { color: var(--nb-text-faint); }
.nb-week-prize--1 { border-color: rgba(201, 162, 39, 0.5); color: var(--nb-gold-bright); }
.nb-week-prize--1 b { color: var(--nb-gold); }
.nb-week-prize--2 { border-color: rgba(163, 184, 202, 0.4); color: var(--nb-steel-bright); }
.nb-week-prize--3 { border-color: rgba(138, 106, 47, 0.5); color: var(--nb-bronze); }

.nb-week-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.nb-week-row {
    display: grid;
    grid-template-columns: 28px 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--nb-radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.nb-week-row.is-podium { background: rgba(201, 162, 39, 0.08); }
.nb-week-row__rank { color: var(--nb-text-faint); text-align: center; }
.nb-week-row.is-podium .nb-week-row__rank { color: var(--nb-gold-bright); font-weight: 700; }
.nb-week-row .faction-avatar { width: 32px; height: 32px; }

.nb-week-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nb-text);
}

.nb-week-row__gain { color: var(--nb-jade-bright); }

.nb-week-board__previous {
    margin: 14px 0 0;
    font-size: var(--nb-text-sm);
    color: var(--nb-text-dim);
}

.nb-week-board__previous strong { color: var(--nb-text); }

.nb-alltime-title {
    font-family: var(--nb-font-display);
    font-size: var(--nb-text-lg);
    color: var(--nb-ivory);
    margin: 0 0 12px;
    text-align: left;
}

/* ------------------------------------------------------------
   R4. MARKET SPARKLINE
   ------------------------------------------------------------ */
.nb-sparkline {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    margin-top: 8px;
    color: var(--nb-steel);
}

.nb-sparkline svg { flex: 1; height: 28px; min-width: 0; }
.nb-sparkline.is-up { color: var(--nb-jade-bright); }
.nb-sparkline.is-down { color: var(--nb-danger); }
.nb-sparkline.is-flat { color: var(--nb-steel-dim); }

.nb-sparkline__change {
    flex: none;
    font-size: 0.7rem;
    font-weight: 600;
    color: currentColor;
}

.nb-sparkline__fixed,
.nb-sparkline__placeholder {
    font-size: 0.68rem;
    color: var(--nb-text-faint);
    letter-spacing: 0.04em;
}

.nb-sparkline__placeholder { display: block; width: 100%; height: 8px; }

/* ------------------------------------------------------------
   R5. BANK INTEREST
   ------------------------------------------------------------ */
.nb-bank-interest {
    margin: 14px auto 0;
    padding: 12px 14px;
    max-width: 380px;
    border: 1px solid rgba(70, 179, 122, 0.3);
    border-radius: var(--nb-radius-sm);
    background: rgba(70, 179, 122, 0.06);
    text-align: left;
}

.nb-bank-interest__rate {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nb-font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--nb-text-sm);
    color: var(--nb-jade-bright);
}

.nb-bank-interest__projection,
.nb-bank-interest__last {
    margin: 6px 0 0;
    font-size: var(--nb-text-sm);
    color: var(--nb-text-dim);
}

.nb-bank-interest__projection small { color: var(--nb-text-faint); }
.nb-bank-interest__projection--none { color: var(--nb-text-faint); }

.nb-bank-interest__note {
    margin: 8px 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--nb-text-faint);
    text-wrap: pretty;
}

/* ------------------------------------------------------------
   R6. PROFILE SHOWCASE
   ------------------------------------------------------------ */
.nb-showcase {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-md);
    background: var(--nb-grad-panel);
}

.nb-showcase__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.nb-showcase__head h2 {
    margin: 0;
    font-family: var(--nb-font-ui);
    font-size: var(--nb-text-xs);
    font-weight: 700;
    letter-spacing: var(--nb-tracking-caps);
    text-transform: uppercase;
    color: var(--nb-text-dim);
}

.nb-showcase__head h2 i { color: var(--nb-gold); margin-right: 6px; }

.nb-showcase__edit {
    font-size: var(--nb-text-sm);
    color: var(--nb-gold-bright);
    text-decoration: none;
}

.nb-showcase__edit:hover { text-decoration: underline; }

.nb-showcase__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.nb-showcase__item {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 16px 12px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-surface-inset);
}

.nb-showcase__item i { font-size: 1.5rem; color: var(--nb-gold-bright); }
.nb-showcase__item--item i { color: var(--nb-steel-bright); }
.nb-showcase__name { font-weight: 600; color: var(--nb-ivory); text-wrap: balance; }

.nb-showcase__item small {
    color: var(--nb-text-faint);
    font-size: 0.72rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.nb-showcase__empty { margin: 0; color: var(--nb-text-faint); font-size: var(--nb-text-sm); }
.nb-showcase-intro { color: var(--nb-text-dim); max-width: 60ch; text-wrap: pretty; }
.nb-showcase-form { display: grid; gap: 14px; max-width: 560px; }

.nb-showcase-slot {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-surface-inset);
}

.nb-showcase-slot legend {
    padding: 0 6px;
    font-size: var(--nb-text-xs);
    letter-spacing: var(--nb-tracking-wide);
    text-transform: uppercase;
    color: var(--nb-gold);
}

.nb-showcase-slot label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nb-text-faint);
}

.nb-showcase-slot select {
    padding: 9px 12px;
    background: var(--nb-carbon-2);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius-sm);
    color: var(--nb-ivory);
    font: inherit;
    font-size: var(--nb-text-sm);
}

.nb-showcase-form__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   R7. CASINO VAULT
   ------------------------------------------------------------ */
.nb-vault {
    margin: 0 auto 24px;
    padding: 22px;
    max-width: 640px;
    text-align: center;
    border: 1px solid var(--nb-border-strong);
    border-radius: var(--nb-radius-lg);
    background:
        radial-gradient(420px 160px at 50% -20%, rgba(201, 162, 39, 0.16), transparent 70%),
        var(--nb-grad-panel);
    box-shadow: var(--nb-shadow-md);
}

.nb-vault__title {
    margin: 0;
    font-family: var(--nb-font-ui);
    font-size: var(--nb-text-xs);
    font-weight: 700;
    letter-spacing: var(--nb-tracking-caps);
    text-transform: uppercase;
    color: var(--nb-text-dim);
}

.nb-vault__title i { color: var(--nb-gold); }

.nb-vault__amount {
    margin: 8px 0 12px;
    font-family: var(--nb-font-data);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--nb-gold-bright);
    text-shadow: 0 2px 10px rgba(201, 162, 39, 0.25);
}

.nb-vault__amount.is-bumped { animation: nbVaultBump 520ms var(--nb-ease-snap); }

@keyframes nbVaultBump {
    0%   { scale: 1; }
    35%  { scale: 1.04; }
    100% { scale: 1; }
}

/* The rules are the point of this block, not fine print: the pot is
   player-funded and the odds are fixed, and both are stated plainly. */
.nb-vault__rules {
    margin: 0 auto;
    max-width: 52ch;
    font-size: var(--nb-text-sm);
    line-height: 1.6;
    color: var(--nb-text-dim);
    text-wrap: pretty;
}

.nb-vault__rules b { color: var(--nb-ivory); }

.nb-vault__last {
    margin: 12px 0 0;
    font-size: var(--nb-text-xs);
    color: var(--nb-text-faint);
}

.nb-vault__last b { color: var(--nb-champagne); }

/* ------------------------------------------------------------
   R8. REDUCED MOTION / CALM MODE
   Nothing here begins at opacity:0, so suppressing these leaves
   every value and message on screen.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .nb-vault__amount.is-bumped { animation: none; }
    .nb-objective__bar > span { transition: none; }
}

html.nb-calm .nb-vault__amount.is-bumped { animation: none; }
html.nb-calm .nb-objective__bar > span { transition: none; }