/* V3 component tokens are opt-in: existing pages keep their S-1 theme. */
.br-ui {
    --br-bg-dark: #101318;
    --br-bg-panel: #1b2735;
    --br-text: #f5f1e8;
    --br-text-muted: #bcc6d2;
    --br-gold: #ffc83d;
    --br-accent-green: #c8ff3d;
    --br-danger: #ff4d4d;
    --br-blue: #075f9d;
    --br-bp-green: #176b35;
    --br-danger-surface: #a3242d;
    --br-wallet-purple: #6231b4;
    --br-disabled: #343e4b;
    --br-disabled-text: #bbc3cd;
    --br-outline: #05080d;
    --br-border-highlight: #8493a3;
    --br-panel-shadow: #070b11;
    color: var(--br-text);
    background: var(--br-bg-dark);
    color-scheme: dark;
}
.br-ui *, .br-ui *::before, .br-ui *::after { box-sizing: border-box; }
.br-ui > header { border-bottom: 1px solid #3f4c5c; }
.br-ui > header > a { font-weight: 800; letter-spacing: .06em; text-decoration: none; }
.br-ui > header a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .4rem .6rem; }
.br-ui > header [aria-current] { color: var(--br-gold); border-bottom: 3px solid currentColor; }
.br-ui :is(button, a, select):focus-visible { outline: 3px solid var(--br-text); outline-offset: 4px; box-shadow: 0 0 0 7px var(--br-outline); }
.br-ui :is(h1,h2,h3,p,dl) { margin-top: 0; }
.br-ui h1 { font-weight: 900; font-size: clamp(1.8rem,4vw,2.8rem); }
.br-ui h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1.25rem; }
.br-ui h3 { font-size: .95rem; font-weight: 800; }
.br-ui main { max-width: 1320px; }
.br-demo-intro { max-width: 58rem; }
.br-eyebrow { color: var(--br-gold); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.br-placeholder-note, .br-help { color: var(--br-text-muted); font-size: .875rem; line-height: 1.6; }
.br-demo-status { border-left: 3px solid var(--br-gold); padding: .75rem 1rem; background: #1a222e; font-size: .875rem; margin: 1.25rem 0 1.75rem; }
.br-demo-section { height: 100%; border-top: 1px solid #526172; padding: 1.25rem 0 .5rem; min-width: 0; }
.br-state-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .85rem; }
.br-state-example { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.br-state-example > span { color: var(--br-text-muted); font-size: .75rem; }
.br-btn, .br-wallet-button, .br-counter-action, .br-icon-action {
    --button-body: var(--br-gold);
    --button-ink: var(--br-outline);
    color: var(--button-ink);
    background: linear-gradient(180deg, #ffffff18, #ffffff00 36%, #00000022), var(--button-body);
    border: 3px solid var(--br-outline);
    border-radius: 10px;
    box-shadow: inset 0 3px 0 #ffffff80, inset 0 -4px 0 #00000055, inset 2px 0 0 #ffffff35, 0 4px 0 var(--br-panel-shadow);
    padding: .75rem 1rem;
    min-width: 0; max-width: 100%; min-height: 48px;
    font: inherit; font-weight: 900; line-height: 1.2;
    text-align: center; white-space: normal; overflow-wrap: anywhere;
    transition: box-shadow .1s ease, transform .1s ease;
}
.br-btn-primary { min-height: 64px; font-size: clamp(1.1rem,2vw,1.45rem); font-style: italic; }
.br-btn-secondary { --button-ink: var(--br-text); }
.br-btn-blue { --button-body: var(--br-blue); }
.br-btn-green { --button-body: var(--br-bp-green); }
.br-btn-danger { --button-body: var(--br-danger-surface); }
.br-btn-neutral { --button-body: #384554; }
.br-ui :is(.br-btn,.br-wallet-button,.br-counter-action,.br-icon-action):not(:disabled):is(:hover,.is-hover) {
    box-shadow: inset 0 3px 0 #ffffffa0, inset 0 -4px 0 #00000055, 0 4px 0 var(--br-panel-shadow), 0 0 0 2px var(--br-gold);
}
.br-ui :is(.br-btn,.br-wallet-button,.br-counter-action,.br-icon-action):not(:disabled):is(:active,.is-pressed) {
    transform: translateY(3px); box-shadow: inset 0 3px 5px #00000065, inset 0 -1px 0 #ffffff60, 0 1px 0 var(--br-panel-shadow);
}
.br-ui .br-btn:disabled { --button-body: var(--br-disabled); --button-ink: var(--br-disabled-text); cursor: not-allowed; box-shadow: inset 0 1px 0 #ffffff30, 0 2px 0 var(--br-panel-shadow); font-style: normal; }
.br-hud-panel, .br-genesis-widget, .br-currency, .br-market-progress, .br-bottom-nav {
    border: 3px solid var(--br-outline); border-radius: 12px;
    background: linear-gradient(135deg,#ffffff08,transparent 45%),var(--br-bg-panel);
    box-shadow: inset 0 2px 0 var(--br-border-highlight), inset 0 -4px 0 #00000060, 0 4px 0 var(--br-panel-shadow);
}
.br-hud-panel { padding: 1rem; }
.br-hud-summary { display: flex; align-items: center; gap: 1rem; }
.br-hud-icon { flex: 0 0 80px; background: #101923; border: 2px solid #536375; border-radius: 50%; }
.br-hud-icon img { display: block; width: 100%; height: auto; }
.br-hud-value { min-width: 0; flex: 1; }
.br-hud-value h3 { margin-bottom: .2rem; }
.br-hud-value strong { font-size: 1.7rem; margin-right: .4rem; }
.br-hud-value > span { color: var(--br-text-muted); font-size: .875rem; }
.br-icon-action { --button-body: #384554; --button-ink: var(--br-text); min-width: 48px; padding: .4rem; }
.br-hud-panel .br-market-progress { margin-top: 1rem; }
.br-counter-stack { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .85rem; }
.br-currency { --currency-accent: var(--br-gold); display: flex; align-items: center; gap: .6rem; padding: .55rem; flex: 1 1 190px; max-width: 100%; min-width: 0; }
.br-currency-bp { --currency-accent: var(--br-accent-green); }
.br-currency-reading { flex: 1; min-width: 0; }
.br-currency-reading > span { display: block; font-size: .7rem; font-weight: 800; color: var(--currency-accent); }
.br-currency-reading > strong { font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.br-counter-action { --button-body: var(--currency-accent); min-width: 44px; min-height: 44px; padding: .3rem; font-size: 1.5rem; flex-shrink: 0; }
.br-placeholder-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 2px solid currentColor; border-radius: 7px; color: var(--br-text-muted); }
.br-placeholder-icon::before { content: '◇'; font: 900 20px/1 sans-serif; }
.br-icon-gold { color: var(--br-gold); border-radius: 50%; }
.br-icon-bp { color: var(--br-accent-green); }
.br-icon-ranch::before { content: '⌂'; }
.br-icon-pvp::before { content: '×'; }
.br-icon-ranking::before { content: '≡'; }
.br-icon-shop::before { content: '+'; }
.br-market-progress { padding: .85rem; }
.br-progress-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .6rem; font-size: .875rem; font-weight: 800; }
.br-progress-heading > span { overflow-wrap: anywhere; }
.br-progress-heading > strong { flex-shrink: 0; color: var(--br-gold); font-variant-numeric: tabular-nums; }
.br-progress-track { display: block; appearance: none; width: 100%; height: 22px; border: 2px solid var(--br-outline); border-radius: 7px; overflow: hidden; background: var(--br-bg-dark); }
.br-progress-track::-webkit-progress-bar { background: var(--br-bg-dark); box-shadow: inset 0 2px 4px #000; }
.br-progress-track::-webkit-progress-value { background: repeating-linear-gradient(100deg,transparent 0 24px,#00000018 24px 26px),linear-gradient(#d4ff75,#7caf22); border-radius: 3px; box-shadow: inset 0 2px 0 #ffffff88; }
.br-progress-track::-moz-progress-bar { background: var(--br-accent-green); border-radius: 3px; }
.br-bottom-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .35rem; padding: .5rem; }
.br-nav-item { background: #141e29; border: 2px solid transparent; border-radius: 8px; color: var(--br-text-muted); min-width: 0; min-height: 76px; padding: .5rem .2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; font: inherit; font-size: .8rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.br-nav-item .br-placeholder-icon { width: 26px; height: 26px; flex-basis: 26px; }
.br-nav-item:hover { background: #293747; border-color: var(--br-border-highlight); }
.br-nav-item.is-active { color: var(--br-gold); border-color: var(--br-gold); background: #342b15; box-shadow: inset 0 0 12px #ffc83d35, inset 0 -4px 0 var(--br-gold); }
.br-nav-item.is-active .br-placeholder-icon { color: inherit; }
.br-nav-item.is-active[data-nav-item='pvp'] { color: #ffb3b3; border-color: var(--br-danger); background: #3b1920; box-shadow: inset 0 0 12px #ff4d4d30, inset 0 -4px 0 var(--br-danger); }
.br-genesis-widget { padding: 1rem; border-top-color: var(--br-gold); }
.br-genesis-heading { display: flex; align-items: center; gap: .7rem; }
.br-genesis-mark { color: var(--br-gold); font-size: 2.4rem; line-height: 1; }
.br-genesis-heading h3 { color: var(--br-gold); margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 900; }
.br-genesis-heading p { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.br-genesis-copy { font-size: .875rem; margin: .85rem 0; line-height: 1.6; }
.br-genesis-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; margin-bottom: 1rem; }
.br-genesis-stats > div:last-child { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: .7rem; border-top: 1px solid #536375; padding-top: .5rem; }
.br-genesis-stats dt { color: var(--br-text-muted); font-size: .75rem; }
.br-genesis-stats dd { margin: 0; font-size: .95rem; font-weight: 800; }
.br-wallet-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; }
.br-wallet-state { min-width: 0; }
.br-wallet-status { display: block; margin-bottom: .5rem; font-size: .8rem; color: var(--br-text-muted); font-weight: 700; }
.br-wallet-button { --button-body: var(--br-wallet-purple); --button-ink: var(--br-text); display: flex; align-items: center; justify-content: center; width: 100%; gap: .5rem; font-size: .875rem; }
.br-wallet-button .br-placeholder-icon { color: inherit; width: 24px; height: 24px; flex-basis: 24px; }
.br-wallet-label { min-width: 0; overflow-wrap: anywhere; }
.br-wallet-state[data-wallet-state='verified'] .br-wallet-button { --button-body: var(--br-bp-green); }
.br-wallet-state[data-wallet-state='error'] .br-wallet-button { --button-body: var(--br-danger-surface); }
.br-wallet-state[data-wallet-state='unverified'] .br-wallet-button { border-style: dashed; }
.br-wallet-interactive { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 1rem; align-items: center; }
.br-select { width: 100%; min-height: 48px; min-width: 0; background: var(--br-bg-panel); border: 2px solid var(--br-border-highlight); border-radius: 6px; padding: .6rem; color: var(--br-text); }
@media (max-width: 767.98px) {
    .br-ui main { padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important; }
    .br-ui > header { gap: .25rem !important; }
    .br-ui > header nav { gap: .2rem !important; }
    .br-ui > header nav > span { font-size: .8rem; }
    .br-state-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .br-wallet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .br-wallet-grid > :last-child { grid-column: 1/-1; }
    .br-wallet-interactive { grid-template-columns: minmax(0,1fr); gap: .6rem; }
    .br-genesis-widget { padding: .85rem; }
    .br-mobile-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; border-radius: 12px 12px 0 0; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); padding-left: max(.5rem,env(safe-area-inset-left)); padding-right: max(.5rem,env(safe-area-inset-right)); }
    .br-nav-item { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .br-ui * { transition: none !important; } }