/* Midnight ink, rose metal, and warm gold achievement accents. */
.brag-book { --bb-ink:#fff7ef; --bb-muted:#b3bfd3; --bb-line:rgb(170 193 232 / 18%); --bb-rose:#e3b3cc; --bb-pad:24px; box-sizing:border-box; width:100%; min-width:0; color:var(--bb-ink); color-scheme:dark; padding:0; }
.app>.brag-book { align-self:start; padding-bottom:0; }
.bb-shell { position:relative; width:min(1540px,100%); min-height:660px; margin:0 auto; border:1px solid rgb(255 255 255 / 12%); border-radius:28px; background:repeating-linear-gradient(97deg,transparent 0 32px,rgb(255 255 255 / 1.5%) 33px,transparent 35px 70px),linear-gradient(135deg,#253953,#142034 46%,#1c2d45); box-shadow:0 44px 100px rgb(0 0 0 / 42%),inset 0 1px rgb(255 255 255 / 8%); overflow:hidden; font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.bb-shell::before { content:""; position:absolute; inset:11px; border:1px solid rgb(170 193 232 / 18%); border-radius:20px; pointer-events:none; }
.bb-shell, .bb-toast, .bb-shell *, .bb-toast * { box-sizing:border-box; }
.bb-header { display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:24px 24px 0; min-height:72px; }
.bb-header h2 { margin:0; font:500 var(--screen-title-size,32px)/1.15 Georgia,"Times New Roman",serif; letter-spacing:-.04em; text-transform:uppercase; color:var(--bb-ink); }
.bb-header h2>span { display:none; }
.bb-header p { margin:10px 0 0; color:var(--bb-muted); font-size:12px; }
.bb-book-mark { order:-1; width:var(--screen-icon-size,48px); height:var(--screen-icon-size,48px); flex:none; display:grid; place-items:center; color:#eac6b7; background:url("brag-book-emblem.svg") center/contain no-repeat; filter:drop-shadow(0 10px 14px #0006); }
.bb-book-mark svg { display:none; }
.bb-tabs { display:flex; gap:24px; padding:0 var(--bb-pad); border-bottom:1px solid var(--bb-line); }
.bb-tabs button { position:relative; min-height:54px; padding:0 2px; border:0; color:var(--bb-muted); background:transparent; font-size:12px; font-weight:600; cursor:pointer; }
.bb-tabs button[aria-current=page] { color:var(--bb-ink); }
.bb-tabs button[aria-current=page]::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--bb-rose); border-radius:3px 3px 0 0; }
.bb-content { padding:24px var(--bb-pad) 32px; }
.bb-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 35px; min-height:220px; border:1px solid rgb(231 185 212 / 22%); border-radius:14px; background:radial-gradient(ellipse at 85% 60%,#718cb12b,transparent 48%),linear-gradient(110deg,#142035,#22364f 65%,#344257); box-shadow:inset 0 1px rgb(255 255 255 / 5%),0 12px 30px #0002; overflow:hidden; }
.bb-hero h3 { margin:0 0 10px; font:400 24px Georgia,serif; letter-spacing:-.6px; }
.bb-hero-total { font-size:62px; letter-spacing:-4px; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums; }
.bb-hero-total span { font-size:26px; color:#a5b6ce; letter-spacing:-1px; }
.bb-hero p { margin:7px 0 10px; color:var(--bb-muted); font-size:12px; }
.bb-text-button { border:0; background:none; color:var(--bb-rose); padding:8px 0; min-height:40px; font-size:11px; font-weight:650; cursor:pointer; }
.bb-text-button span { margin-left:12px; }
.bb-hero-emblem { display:grid; place-items:center; width:166px; height:166px; flex:none; padding:6px; border-radius:50%; background:conic-gradient(from 210deg,#e1b0ca var(--bb-complete),#ffffff12 0); box-shadow:0 12px 35px #70526618; }
.bb-hero-emblem>div { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; border:7px solid #26374c; background:linear-gradient(125deg,#f8e0d2,#e6d0de 38%,#fbf6e3 58%,#d7e4e6 80%,#e8d7e9); box-shadow:inset 0 0 0 1px #a8809455,inset 0 0 0 8px #ffffff50,inset 0 0 0 9px #aa7c932b; color:#815169; }
.bb-hero-emblem svg { width:90px; height:90px; filter:drop-shadow(0 1px 0 #fff); }
.bb-lifetime { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:25px 0; }
.bb-metric { min-width:0; }
.bb-lifetime .bb-metric { padding:0 22px; border-right:1px solid var(--bb-line); }
.bb-lifetime .bb-metric:first-child { padding-left:0; }.bb-lifetime .bb-metric:last-child { border:0; }
.bb-metric strong { display:block; font-size:28px; line-height:1.3; font-weight:500; letter-spacing:-1px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bb-metric span { display:block; color:var(--bb-muted); margin-top:5px; font-size:11px; }
.bb-metric strong>span { display:inline; color:inherit; margin:0; font:inherit; letter-spacing:inherit; }
.bb-metric strong>.bb-value-compact { display:none; }
@media(max-width:760px) {
  .bb-lifetime .bb-metric strong>.bb-value-full { display:none; }
  .bb-lifetime .bb-metric strong>.bb-value-compact { display:inline; white-space:nowrap; }
}
.bb-columns,.bb-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bb-panel { padding:22px; border:1px solid var(--bb-line); border-radius:12px; background:#101c2da6; min-width:0; }
.bb-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:25px 0 14px; }
.bb-section-heading h3 { margin:0; font:400 21px/1.2 Georgia,serif; letter-spacing:-.5px; }
.bb-section-heading>span { font-size:10px; color:var(--bb-muted); }
.bb-panel>.bb-section-heading:first-child { margin-top:0; }
.bb-rarity-chart { display:flex; gap:17px; height:162px; padding-top:4px; }
.bb-rarity-column { display:flex; flex:1; flex-direction:column; align-items:center; min-width:0; gap:7px; font-size:10px; font-variant-numeric:tabular-nums; }
.bb-rarity-column>span { color:var(--bb-muted); }.bb-rarity-column>b { font-size:10px; font-weight:650; }
.bb-bar-track { width:100%; max-width:40px; flex:1; display:flex; align-items:flex-end; border-bottom:1px solid var(--bb-line); }
.bb-bar-track i { width:100%; border-radius:5px 5px 0 0; background:#a8a0b6; min-height:0; }
.bb-bar-track .bb-rarity-1 { background:#81c6ad; }.bb-bar-track .bb-rarity-2 { background:#89b5ee; }.bb-bar-track .bb-rarity-3 { background:#c394e7; }.bb-bar-track .bb-rarity-4 { background:linear-gradient(0deg,#b88044,#f3d594); }
.bb-panel-foot { display:flex; justify-content:space-between; border-top:1px solid var(--bb-line); padding-top:13px; margin-top:19px; font-size:11px; color:var(--bb-muted); }.bb-panel-foot strong { color:var(--bb-rose); }
.bb-luck-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 18px; padding-top:18px; }
.bb-luck-grid .bb-metric strong { color:var(--bb-rose); }
.bb-achievement-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bb-achievement { display:flex; align-items:flex-start; gap:15px; padding:21px; border:1px solid var(--bb-line); border-radius:12px; background:#201729a6; min-width:0; }
.bb-medal { width:52px; height:58px; flex:none; display:grid; place-items:center; border:1px solid #76627f; border-radius:50% 50% 42% 42%; background:linear-gradient(130deg,#51425c,#30263b 50%,#45354f); color:#b7a3c0; box-shadow:inset 0 0 0 4px #34263e,inset 0 0 0 5px #a18aaf44; }
.bb-medal svg { width:35px; height:35px; }.bb-achievement-copy { flex:1; min-width:0; }
.bb-achievement-state { font-size:9px; font-weight:650; color:var(--bb-muted); letter-spacing:.05em; }
.bb-achievement h4 { margin:4px 0 6px; font:400 20px/1.2 Georgia,serif; letter-spacing:-.4px; }.bb-achievement p { margin:0; color:var(--bb-muted); font-size:11px; line-height:1.6; }
.bb-progress { height:4px; margin-top:15px; background:#ffffff14; border-radius:4px; overflow:hidden; }.bb-progress i { display:block; height:100%; border-radius:inherit; background:#d3a0c2; }
.bb-progress-copy,.bb-earned-date { display:block; margin-top:6px; font-size:10px; color:var(--bb-muted); font-variant-numeric:tabular-nums; }.bb-earned-date { margin-top:13px; color:#edc4a8; }
.bb-achievement.is-earned { background:linear-gradient(120deg,#49344199,#342338); border-color:#be8d6e66; }.is-earned .bb-medal,.bb-toast .bb-medal { color:#865570; background:linear-gradient(135deg,#f3d4c1,#e8cddd 40%,#fbf2d4 60%,#d4e3e6); border-color:#c3a3b6; box-shadow:inset 0 0 0 4px #f7e9e4,inset 0 0 0 5px #c9a8b8; }.is-earned .bb-achievement-state { color:#e3b3cc; }
.bb-filter-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:23px; }.bb-filter-row button { min-height:38px; padding:7px 13px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--bb-muted); font-size:11px; cursor:pointer; }.bb-filter-row button[aria-pressed=true] { color:#fff0df; border-color:#d7b28a66; background:#b8844930; }.bb-filter-row>span { margin-left:auto; color:var(--bb-muted); font-size:11px; }
.bb-stat-list { margin:0; }.bb-stat-list>div { display:flex; align-items:baseline; gap:15px; justify-content:space-between; padding:12px 0; border-bottom:1px solid #ffffff0e; }.bb-stat-list>div:last-child { border:0; padding-bottom:0; }.bb-stat-list dt { color:var(--bb-muted); font-size:12px; }.bb-stat-list dd { margin:0; font-size:17px; font-weight:550; font-variant-numeric:tabular-nums; }
.bb-totals-panel { margin-bottom:18px; }.bb-totals-panel .bb-lifetime { padding:10px 0 15px; }.bb-note,.bb-explanation p { color:var(--bb-muted); font-size:11px; line-height:1.7; }.bb-note { margin:0; }.bb-explanation { background:#12203588; }
.bb-records { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.bb-records article { padding:20px; border:1px solid var(--bb-line); border-radius:12px; }.bb-records span { display:block; font-size:11px; color:var(--bb-muted); }.bb-records strong { display:block; margin-top:8px; font-size:23px; font-weight:500; }
.bb-history { list-style:none; margin:0; padding:0; }.bb-history li { display:flex; align-items:center; gap:15px; padding:18px 0; border-bottom:1px solid var(--bb-line); }.bb-history-mark { width:36px; height:40px; display:grid; place-items:center; flex:none; border:1px solid #d8bce32b; border-radius:8px; color:var(--bb-rose); font-size:25px; background:#9b6fbd1f; }.bb-history h4 { margin:0; font-size:12px; font-weight:600; }.bb-history p { margin:4px 0 0; font-size:11px; color:var(--bb-muted); }.bb-history time { font-size:10px; color:var(--bb-muted); margin-left:auto; text-align:right; flex:none; }
.bb-more { display:block; margin:24px auto 0; min-height:44px; padding:10px 20px; border:1px solid #dab4cc44; border-radius:8px; background:#6a405d44; color:var(--bb-rose); font-size:12px; cursor:pointer; }.bb-more span { margin-left:10px; color:var(--bb-muted); font-size:10px; }
.bb-empty { text-align:center; padding:45px 20px; color:var(--bb-muted); }.bb-empty svg { width:60px; height:60px; color:#b393a5; }.bb-empty h3 { color:var(--bb-ink); font:24px Georgia,serif; margin:15px 0 8px; }.bb-empty p { font-size:12px; }.bb-error { color:#ffc5d0; background:#6e263b55; border-radius:8px; padding:14px; font-size:12px; }
.bb-footer { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:17px var(--bb-pad); border-top:1px solid var(--bb-line); font-size:10px; color:var(--bb-muted); background:#0c172780; }.bb-footer>span:last-child { margin-left:auto; }.bb-tracking-dot { width:5px; height:5px; border-radius:50%; background:#9bd5ad; }
.bb-toast { position:fixed; z-index:1200; top:calc(80px + env(safe-area-inset-top,0px)); right:24px; width:min(390px,calc(100vw - 32px)); display:flex; align-items:center; gap:13px; padding:17px; border:1px solid #dcbca766; border-radius:15px; color-scheme:dark; background:linear-gradient(120deg,#48323e,#2b2037 62%,#273039); color:#fff7ef; box-shadow:0 15px 55px #0005,inset 0 1px #ffffff18; animation:bb-toast-in .45s cubic-bezier(.16,1,.3,1); font-family:Inter,system-ui,sans-serif; }
.bb-toast-open { border:0; padding:0; flex:1; background:none; color:inherit; text-align:left; cursor:pointer; min-height:60px; }.bb-toast-open>span:first-child { font-size:10px; color:#e6b8cb; }.bb-toast-open strong { display:block; margin:5px 0 6px; font:23px/1.2 Georgia,serif; }.bb-toast-open strong small { font:11px system-ui,sans-serif; white-space:nowrap; }.bb-toast-link { font-size:10px; color:#e6b8cb; }.bb-toast-dismiss { align-self:flex-start; flex:none; width:36px; height:36px; margin:-8px -9px 0 0; border:0; border-radius:50%; background:transparent; color:#c9b6ce; font-size:24px; cursor:pointer; }
.bb-shell button:hover,.bb-toast button:hover { filter:brightness(1.15); }.bb-shell :focus-visible,.bb-toast :focus-visible { outline:2px solid #edc49b; outline-offset:4px; }.bb-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes bb-toast-in { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } }
@media(max-width:760px) { .brag-book { padding:0; --bb-pad:12px; }.bb-shell { border-radius:22px; }.bb-shell::before { inset:8px; border-radius:15px; }.bb-header { padding:14px 12px 0; min-height:58px; gap:10px; }.bb-header h2 { font-size:clamp(18px,5vw,24px); }.bb-header p { font-size:11px; }.bb-book-mark { width:40px; height:40px; }.bb-tabs { padding:0 19px; gap:0; justify-content:space-between; }.bb-tabs button { font-size:11px; min-height:52px; }.bb-content { padding:18px 12px 26px; }.bb-hero { padding:22px 20px; min-height:195px; gap:10px; }.bb-hero h3 { font-size:20px; }.bb-hero-total { font-size:52px; }.bb-hero-total span { font-size:22px; }.bb-hero-emblem { width:112px; height:112px; padding:4px; }.bb-hero-emblem>div { border-width:5px; }.bb-hero-emblem svg { width:65px; height:65px; }.bb-lifetime .bb-metric { padding:0 11px; }.bb-metric strong { font-size:23px; }.bb-metric span { font-size:10px; }.bb-columns,.bb-stat-grid,.bb-achievement-grid { grid-template-columns:1fr; gap:13px; }.bb-panel { padding:20px; }.bb-luck-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding-top:8px; }.bb-luck-grid .bb-metric strong { font-size:23px; }.bb-luck-grid .bb-metric span { font-size:9px; }.bb-rarity-chart { height:150px; gap:23px; }.bb-achievement { padding:19px; }.bb-records { grid-template-columns:1fr; gap:10px; }.bb-records article { display:flex; justify-content:space-between; align-items:center; padding:16px; }.bb-records strong { margin:0; }.bb-footer { padding:15px 20px; font-size:9px; }.bb-footer>span:last-child { flex-basis:100%; margin-left:12px; }.bb-history li { gap:10px; }.bb-history time { max-width:62px; font-size:9px; }.bb-history p { font-size:10px; }.bb-toast { right:16px; top:calc(76px + env(safe-area-inset-top,0px)); }.bb-filter-row { gap:3px; }.bb-filter-row button { padding:7px 10px; }.bb-filter-row>span { font-size:10px; } }
@media(max-width:360px) { .bb-hero-emblem { width:88px; height:88px; }.bb-hero-emblem svg { width:49px; height:49px; }.bb-header h2 { font-size:20px; }.bb-hero { padding:20px 14px; }.bb-metric strong { font-size:20px; }.bb-achievement { gap:12px; padding:16px; }.bb-medal { width:43px; height:50px; } }
@media(prefers-reduced-motion:reduce) { .bb-toast { animation:none; } }
.bb-income-bars>div { position:relative; padding-bottom:17px; }
.bb-income-bars>div>i { position:absolute; left:0; bottom:5px; height:4px; border-radius:4px; background:linear-gradient(90deg,#c79eb2,#a27194); }
.bb-grade-chart { display:flex; align-items:flex-end; gap:8px; min-height:150px; padding-top:10px; }
.bb-grade-chart>div { display:flex; flex:1; min-width:0; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; font-size:9px; }
.bb-grade-chart span { color:var(--bb-muted); font-variant-numeric:tabular-nums; }
.bb-grade-chart i { width:100%; max-width:28px; background:linear-gradient(0deg,#af8fa6,#d9bdcb); border-radius:4px 4px 0 0; }
.bb-grade-chart b { font-size:10px; font-weight:600; }
.bb-pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:25px; }
.bb-pagination button { min-height:44px; padding:8px 15px; color:var(--bb-rose); border:1px solid #dab4cc44; background:#6a405d44; border-radius:8px; cursor:pointer; font-size:12px; }
.bb-pagination button:disabled { opacity:.4; cursor:default; }
.bb-pagination span { font-size:11px; color:var(--bb-muted); }
.bb-loading { margin:0 0 20px; padding:11px 14px; border:1px solid var(--bb-line); border-radius:8px; color:var(--bb-muted); background:#12203588; font-size:11px; }
.bb-error { margin:0 0 20px; }

@media(min-width:1200px) { .bb-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.bb-achievement-grid:has(>.bb-achievement:nth-child(3)) { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.bb-definitions { margin-top:20px; color:var(--bb-muted); font-size:11px; }
.bb-definitions summary { min-height:44px; padding:12px 0; cursor:pointer; }
.bb-definitions p { margin:0; max-width:75ch; line-height:1.7; }
/* Achievement-point rewards are part of the record, not the point shop. */
.bb-achievement-state { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bb-achievement-ap { color:#e7c699; font-size:10px; letter-spacing:0; white-space:nowrap; }
.bb-tabs [data-bb-view=rewards] { color:#e7c699; }
.bb-tabs [data-bb-view=rewards][aria-current=page]::after { background:#e7c699; }
.bb-reward-hero { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:32px 40px; border:1px solid #d4b08044; border-radius:15px; background:radial-gradient(ellipse at 85% 45%,#ba839625,transparent 55%),linear-gradient(125deg,#15243b,#263a50); overflow:hidden; }
.bb-reward-copy { width:min(470px,65%); min-width:0; }
.bb-reward-copy h3 { margin:0 0 12px; color:#f7e3c7; font:500 36px/1.15 Georgia,serif; letter-spacing:-1px; }
.bb-reward-guarantee { margin:0 0 10px; font-size:16px; color:#f1dae3; }
.bb-reward-description { margin:0; color:var(--bb-muted); font-size:12px; line-height:1.7; max-width:38ch; }
.bb-reward-balance { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:27px; }
.bb-reward-balance strong { font-size:42px; font-weight:500; line-height:1.2; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.bb-reward-balance span { color:var(--bb-muted); font-size:11px; }
.bb-reward-progress { height:6px; margin-top:16px; background:#ffffff12; }
.bb-reward-progress i { background:linear-gradient(90deg,#cd9cb9,#eacda3); }
.bb-reward-progress-copy { display:flex; justify-content:space-between; gap:12px; margin-top:9px; color:#c3c9d5; font-size:10px; font-variant-numeric:tabular-nums; }
.bb-reward-art { position:relative; display:grid; place-items:center; width:215px; height:240px; flex:none; perspective:700px; }
.bb-reward-art>i,.bb-reward-art>div { position:absolute; width:132px; height:186px; border:1px solid #d9b99477; border-radius:10px; background:linear-gradient(145deg,#657289,#23364c 60%,#283148); box-shadow:0 15px 25px #0004,inset 0 0 0 5px #25364c,inset 0 0 0 6px #d8b29655; }
.bb-reward-art>i:nth-child(1) { transform:translateX(-37px) rotate(-17deg); }
.bb-reward-art>i:nth-child(2) { transform:translateX(37px) rotate(17deg); }
.bb-reward-art>i:nth-child(3) { transform:translateX(-19px) rotate(-8deg); }
.bb-reward-art>i:nth-child(4) { transform:translateX(19px) rotate(8deg); }
.bb-reward-art>div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:#e8cfa9; background:radial-gradient(ellipse at 30% 15%,#b992a55c,transparent 60%),linear-gradient(145deg,#3d526a,#182c43); }
.bb-reward-art svg { width:37px; height:37px; }
.bb-reward-art span { font:500 25px/1.06 Georgia,serif; text-align:center; letter-spacing:1px; }
.bb-reward-art b { font-size:6px; font-weight:600; letter-spacing:.14em; }
.bb-reward-claim { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; border-bottom:1px solid var(--bb-line); }
.bb-reward-claim h3 { margin:0 0 5px; font:500 23px/1.25 Georgia,serif; letter-spacing:-.3px; }
.bb-reward-claim p { margin:0; color:var(--bb-muted); font-size:11px; }
.bb-reward-claim button { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:48px; padding:12px 20px; border:1px solid #e0be9377; border-radius:9px; background:linear-gradient(125deg,#ebd2ac,#caad8b); color:#283044; font-size:12px; font-weight:700; cursor:pointer; }
.bb-reward-claim button:disabled { background:#28384c; border-color:#60728b55; color:#acb8ca; cursor:default; }
.bb-reward-rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; padding:27px 0 13px; }
.bb-reward-rules svg { width:29px; height:29px; color:#dcb7a9; }
.bb-reward-rules h4 { margin:10px 0 8px; font:500 17px/1.2 Georgia,serif; }
.bb-reward-rules p { margin:0; color:var(--bb-muted); font-size:11px; line-height:1.8; }
.bb-reward-notice { margin:15px 0 0; padding:14px; background:#d1a87112; border:1px solid #d1a87133; border-radius:9px; color:#e6caa4; font-size:12px; line-height:1.6; }
@media(max-width:760px) {
  .bb-tabs { gap:17px; padding:0 12px; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .bb-tabs::-webkit-scrollbar { display:none; }.bb-tabs button { white-space:nowrap; flex:none; font-size:10px; }
  .bb-reward-hero { padding:25px 22px; gap:15px; }
  .bb-reward-copy h3 { font-size:29px; }.bb-reward-guarantee { font-size:13px; }.bb-reward-description { font-size:11px; }
  .bb-reward-art { width:130px; height:190px; transform:scale(.8); transform-origin:center; margin-right:-10px; }
  .bb-reward-balance strong { font-size:34px; }.bb-reward-balance { gap:4px; }.bb-reward-balance span { font-size:10px; }
  .bb-reward-claim { gap:15px; }.bb-reward-claim h3 { font-size:20px; }.bb-reward-claim button { padding:11px 13px; gap:12px; font-size:11px; }
  .bb-reward-rules { grid-template-columns:1fr; gap:22px; }.bb-reward-rules article { display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:13px; }.bb-reward-rules svg { grid-row:1/3; }.bb-reward-rules h4 { margin:0 0 7px; }
}
@media(max-width:430px) { .bb-reward-hero { flex-direction:column-reverse; gap:5px; padding:17px 20px 24px; }.bb-reward-copy { width:100%; }.bb-reward-art { width:180px; height:180px; margin:0; transform:scale(.8); }.bb-reward-copy h3 { font-size:29px; }.bb-reward-description { max-width:none; }.bb-reward-balance { margin-top:20px; }.bb-reward-claim { align-items:stretch; flex-direction:column; }.bb-reward-claim button { justify-content:center; }.bb-reward-progress-copy { font-size:10px; } }
.bb-reward-tab-count { display:inline-grid; place-items:center; min-width:17px; height:17px; margin-left:6px; padding:0 4px; border:1px solid #e4c28b66; border-radius:9px; background:#d6af6722; color:#f0d3a1; font-size:9px; font-variant-numeric:tabular-nums; }
.bb-reward-definitions { margin-top:10px; }.bb-reward-definitions+.bb-text-button { margin-top:6px; }
.bb-footer>span.bb-tracking-dot { flex:0 0 5px; width:5px; height:5px; margin:0; border-radius:50%; }

/* Daily history: calendar cells stay fixed-size on phones and scroll by week. */
.bb-activity { margin-bottom:20px; padding:20px; background:linear-gradient(120deg,#142338,#1c3049); }
.bb-activity-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.bb-activity-heading h3 { margin:0; font:400 26px/1.2 Georgia,serif; letter-spacing:-.6px; }
.bb-activity-heading p { margin:7px 0 0; color:var(--bb-muted); font-size:11px; }
.bb-activity-controls { display:flex; flex-wrap:wrap; gap:8px; }
.bb-activity-controls select { max-width:100%; min-height:40px; padding:8px 26px 8px 11px; border:1px solid var(--bb-line); border-radius:8px; background:#142238; color:var(--bb-ink); font:11px Inter,system-ui,sans-serif; cursor:pointer; }
.bb-activity-total { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:14px 0; }
.bb-activity-total strong { font-size:32px; font-weight:500; letter-spacing:-1.5px; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.bb-activity-total>span { color:var(--bb-muted); font-size:12px; }
.bb-activity-calendar { display:flex; gap:9px; --bb-cell:14px; --bb-gap:4px; }
.bb-activity-weekdays { display:grid; grid-template-rows:repeat(7,var(--bb-cell)); gap:var(--bb-gap); padding-top:25px; flex:none; font-size:9px; line-height:var(--bb-cell); color:var(--bb-muted); }
.bb-activity-scroll { min-width:0; flex:1; overflow-x:auto; padding:0 3px 8px; scrollbar-width:thin; scrollbar-color:#60738b #142338; }
.bb-activity-months,.bb-activity-weeks { display:flex; gap:var(--bb-gap); min-width:max-content; }
.bb-activity-months { height:25px; font-size:10px; color:var(--bb-muted); }
.bb-activity-months>span,.bb-activity-week { flex:1 0 var(--bb-cell); min-width:var(--bb-cell); }
.bb-activity-months>span { width:var(--bb-cell); white-space:nowrap; }
.bb-activity-week { display:grid; grid-template-rows:repeat(7,var(--bb-cell)); gap:var(--bb-gap); }
.bb-activity-day { display:block; width:100%; height:var(--bb-cell); min-height:0; border:1px solid #acc7e21c; border-radius:3px; padding:0; cursor:pointer; background:#293d54; }
.bb-activity [data-level="0"] { background:#293d54; }
.bb-activity [data-level="1"] { background:#605471; }
.bb-activity [data-level="2"] { background:#967491; }
.bb-activity [data-level="3"] { background:#c69ab5; }
.bb-activity [data-level="4"] { background:#f0c5db; }
.bb-activity .is-untracked { background:repeating-linear-gradient(135deg,#18293e 0 3px,#33435866 3px 4px); border:1px solid #61718a35; cursor:default; }
.bb-activity-day.is-outside { visibility:hidden; }
.bb-activity-day[aria-pressed="true"] { outline:2px solid #f7dfbb; outline-offset:1px; }
.bb-activity .bb-activity-day:focus-visible { outline-offset:1px; }
.bb-activity-legend { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin:9px 0 17px; font-size:9px; color:var(--bb-muted); }
.bb-activity-legend i { width:11px; height:11px; border:1px solid #acc7e21c; border-radius:2px; display:inline-block; }
.bb-activity-untracked { display:flex; align-items:center; gap:5px; margin-left:10px; }
.bb-activity-detail { display:flex; flex-wrap:wrap; gap:8px 20px; min-height:47px; padding:13px 0; border-top:1px solid var(--bb-line); border-bottom:1px solid var(--bb-line); font-size:11px; color:var(--bb-muted); font-variant-numeric:tabular-nums; }
.bb-activity-detail strong { color:var(--bb-ink); font-weight:550; margin-right:auto; }
.bb-activity-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:13px; color:var(--bb-muted); font-size:10px; }
.bb-activity+.bb-hero { min-height:0; padding:19px 25px; }
.bb-activity+.bb-hero .bb-hero-copy { display:flex; align-items:center; flex-wrap:wrap; column-gap:15px; }
.bb-activity+.bb-hero h3 { margin:0; font-size:21px; }
.bb-activity+.bb-hero .bb-hero-total { font-size:30px; letter-spacing:-1px; }
.bb-activity+.bb-hero .bb-hero-total span { font-size:17px; letter-spacing:0; }
.bb-activity+.bb-hero p { display:none; }
.bb-activity+.bb-hero .bb-hero-emblem { width:64px; height:64px; padding:3px; }
.bb-activity+.bb-hero .bb-hero-emblem>div { border-width:3px; }
.bb-activity+.bb-hero .bb-hero-emblem svg { width:36px; height:36px; }
@media(max-width:760px) {
  .bb-activity { padding:19px 15px; }
  .bb-activity-heading { flex-direction:column; gap:14px; }
  .bb-activity-heading h3 { font-size:24px; }
  .bb-activity-controls { width:100%; }
  .bb-activity-controls label { flex:1; min-width:0; }
  .bb-activity-controls select { width:100%; min-height:44px; padding-left:9px; font-size:10px; }
  .bb-activity-total { margin:19px 0; }
  .bb-activity-total strong { font-size:31px; }
  .bb-activity-total>span { font-size:10px; }
  .bb-activity-calendar { --bb-cell:20px; --bb-gap:4px; gap:7px; }
  .bb-activity-detail strong { flex-basis:100%; }
  .bb-activity-detail { gap:5px 18px; }
  .bb-activity+.bb-hero { padding:16px; gap:10px; }
  .bb-activity+.bb-hero .bb-hero-copy { column-gap:10px; }
  .bb-activity+.bb-hero .bb-text-button { flex-basis:100%; text-align:left; min-height:32px; }
  .bb-activity+.bb-hero .bb-hero-emblem { width:59px; height:59px; }
}

/* Local daily-pop prototype. The calendar remains a record after a claim. */
.bb-daily-progress { display:flex; align-items:center; gap:20px; padding:16px 0 20px; margin:-5px 0 19px; border-top:1px solid var(--bb-line); border-bottom:1px solid var(--bb-line); }
.bb-daily-progress>div { min-width:155px; }
.bb-daily-progress strong { font:400 18px Georgia,serif; }
.bb-daily-progress>div>span { display:block; margin-top:6px; color:var(--bb-muted); font-size:10px; }
.bb-daily-progress .bb-progress { margin-top:9px; }
.bb-daily-progress p { margin:0 auto 0 0; color:#e5d5e5; font-size:11px; line-height:1.7; }
.bb-daily-progress p>span { color:var(--bb-muted); font-size:10px; }
.bb-daily-progress button { flex:none; padding:10px 13px; min-height:40px; border:1px solid #b790b570; background:#82658730; color:#efd5e8; border-radius:9px; font-size:11px; cursor:pointer; }
/* The week tracks can stretch across a tablet. The orb itself must not. */
.bb-activity .bb-activity-day.is-bubble {
  --bb-bubble-delay:0s;
  position:relative; z-index:1; justify-self:center;
  width:var(--bb-cell); height:var(--bb-cell); aspect-ratio:1;
  border-radius:50%; border:1px solid #f9e7ffbb;
  background:radial-gradient(ellipse at 26% 20%,#fff 0 4%,#ffffffa8 6%,transparent 26%),radial-gradient(circle at 72% 76%,#eea8d799,transparent 55%),radial-gradient(circle at 14% 72%,#8cdded88,transparent 52%),linear-gradient(145deg,#b9eaf047,#ebc5eb29 50%,#b5a3e077);
  box-shadow:inset -1px -2px 3px #f4c0ed88,inset 1px 1px 2px #fff9,0 0 7px #deafd333;
  transform:scale(1.12); transform-origin:center;
  animation:bb-calendar-float 4.6s ease-in-out var(--bb-bubble-delay) infinite;
  transition:box-shadow .18s ease;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.bb-activity-day.is-bubble::after {
  content:''; position:absolute; top:-3px; right:-2px; width:5px; height:5px;
  pointer-events:none; background:#fff7f1;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  opacity:0; transform:scale(.35) rotate(0deg);
  animation:bb-calendar-sparkle 5.7s ease-in-out var(--bb-bubble-delay) infinite;
}
.bb-activity-week:nth-child(3n) .is-bubble { --bb-bubble-delay:-1.7s; }
.bb-activity-week:nth-child(3n + 1) .is-bubble { --bb-bubble-delay:-3.2s; }
.bb-activity-week .is-bubble:nth-child(2n) { animation-delay:calc(var(--bb-bubble-delay) - .8s); }
@media(hover:hover) {
  .bb-activity .bb-activity-day.is-bubble:hover { z-index:2; animation:none; transform:scale(1.28); box-shadow:inset -1px -2px 3px #f4c0edaa,inset 1px 1px 2px #fffc,0 0 10px #e7c5ee88; }
}
.bb-activity .bb-activity-day.is-bubble:active { animation:none; transform:scale(.92); }
.bb-activity .bb-activity-day.is-bubble[aria-busy=true] { animation:bb-calendar-ready .65s ease-in-out infinite; cursor:wait; }
[inert] .bb-activity-day.is-bubble,
[inert] .bb-activity-day.is-bubble::after { animation-play-state:paused; }
@keyframes bb-calendar-float {
  0%,100% { transform:translateY(.7px) scale(1.1); }
  50% { transform:translateY(-.7px) scale(1.14); }
}
@keyframes bb-calendar-sparkle {
  0%,64%,90%,100% { opacity:0; transform:scale(.35) rotate(0deg); }
  74% { opacity:.95; transform:scale(1) rotate(45deg); }
  83% { opacity:0; transform:scale(.45) rotate(85deg); }
}
@keyframes bb-calendar-ready {
  0%,100% { transform:scale(1.05); }
  50% { transform:scale(1.22); }
}
@media(max-width:760px) {
  .bb-daily-progress { flex-wrap:wrap; gap:13px; }
  .bb-daily-progress>div { width:100%; }
  .bb-daily-progress p { flex-basis:100%; }
  .bb-daily-progress button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .bb-activity .bb-activity-day.is-bubble,
  .bb-activity-day.is-bubble::after { animation:none; transition:none; }
}

/* Collect on Overview; keep long-term progress and detail one level deeper. */
.bb-ready { margin-bottom:18px; }
.bb-ready>.bb-section-heading { margin:0 0 12px; }
.bb-ready>.bb-section-heading h3 { font:500 18px/1.3 Georgia,serif; }
.bb-ready>.bb-section-heading>span { color:#b9c7d7; font-size:11px; }
.bb-ready-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:14px; }
.bb-ready-card { display:flex; align-items:center; gap:18px; min-width:0; padding:16px 20px; border:1px solid #e6bdd03d; border-radius:16px; background:linear-gradient(120deg,#75526826,#31435e66); box-shadow:inset 0 1px #fff1; }
.bb-fresh-ready { border-color:#debf883e; background:linear-gradient(115deg,#95775122,#37445a55); }
.bb-ready-copy { flex:1; min-width:0; }
.bb-ready-copy h4 { margin:0 0 4px; font:500 22px/1.25 Georgia,serif; color:#fff5ed; }
.bb-ready-copy p { margin:0; font-size:11px; color:var(--bb-muted); }
.bb-ready-copy>span { display:block; margin-top:9px; font-size:12px; color:#edc5dc; font-weight:600; }
.bb-fresh-ready .bb-ready-copy>span { color:#ead4aa; }
.bb-ready-card>button { display:flex; align-items:center; gap:20px; flex:none; min-height:44px; padding:11px 15px; background:#dfc1d51a; color:#fff1f8; border:1px solid #ebc8dd66; border-radius:10px; font:600 12px/1.4 Inter,system-ui,sans-serif; cursor:pointer; transition:background .16s,transform .16s; }
.bb-ready-card>button:hover:not(:disabled) { background:#dfc1d532; transform:translateY(-1px); }
.bb-ready-card>button:active:not(:disabled) { transform:translateY(1px); }
.bb-ready-card>button:disabled { opacity:.55; cursor:wait; }
.bb-ready-art { width:52px; height:68px; flex:none; position:relative; }
.bb-ready-pack { display:grid; place-items:center; color:#e9d1a8; border:1px solid #c5a37980; border-radius:7px; background:linear-gradient(145deg,#ead6ae24,#9b77952b); box-shadow:4px 4px 0 -1px #27354a,5px 5px 0 #b79b6950; transform:rotate(-5deg); }
.bb-ready-pack svg { width:26px; height:26px; }
.bb-ready-pack b { position:absolute; bottom:4px; right:5px; font:600 10px system-ui; }
.bb-ready-orbs i { position:absolute; width:36px; height:36px; left:3px; top:20px; border:1px solid #fff9; border-radius:50%; background:radial-gradient(circle at 28% 25%,#fff 0 3%,#ffffff80 5%,transparent 25%),radial-gradient(circle at 75% 75%,#eec0e776,transparent 60%),linear-gradient(140deg,#a1e3ee33,#d1a6ec55); box-shadow:inset -2px -3px 5px #f0bce66b,inset 1px 1px 3px #ccf6ff66; }
.bb-ready-orbs i:nth-child(2) { width:23px;height:23px;left:28px;top:5px; }
.bb-ready-orbs i:nth-child(3) { width:15px;height:15px;left:35px;top:46px; }
.bb-overview-progress { margin-top:26px; border-top:1px solid var(--bb-line); padding-top:20px; }
.bb-overview-progress .bb-section-heading { margin:0 0 14px; }
.bb-overview-progress .bb-section-heading p { margin:6px 0 0; font-size:11px; color:var(--bb-muted); }
.bb-overview-progress .bb-achievement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bb-ap-progress { padding:20px; margin-bottom:24px; border:1px solid var(--bb-line); border-radius:14px; background:#111e3040; }
.bb-ap-progress>div:first-child { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.bb-ap-progress h3 { margin:0; font:500 22px Georgia,serif; }
.bb-ap-progress>div>span { font-size:12px; color:var(--bb-rose); }
.bb-ap-progress .bb-reward-progress-copy { margin:8px 0 0; color:var(--bb-muted); font-size:11px; }
.bb-ap-progress .bb-definitions { margin-top:15px; }
.bb-daily-progress { padding:10px 0; margin:12px 0; gap:22px; }
.bb-daily-progress>div { width:180px; }
.bb-daily-progress strong { font-size:15px; }
@media(max-width:600px) {
 .bb-ready-card { padding:16px; gap:14px; flex-wrap:wrap; }
 .bb-ready-art { width:44px; height:58px; }
 .bb-ready-copy h4 { font-size:20px; }
 .bb-ready-card>button { width:100%; justify-content:space-between; }
 .bb-ready>.bb-section-heading { align-items:baseline; gap:10px; }
 .bb-ready>.bb-section-heading>span { font-size:10px; }
 .bb-overview-progress .bb-achievement-grid { grid-template-columns:1fr; }
 .bb-daily-progress { gap:10px; }
 .bb-daily-progress>div { width:100%; }
 .bb-ap-progress>div:first-child { align-items:flex-start; flex-direction:column; gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .bb-ready-card>button { transition:none; transform:none!important; } }

/* Keep the activity total and today's progress on one quiet line. */
@media(min-width:761px) {
 .bb-activity { display:grid; grid-template-columns:minmax(0,1fr) 180px; column-gap:24px; }
 .bb-activity>* { grid-column:1 / -1; min-width:0; }
 .bb-activity>.bb-activity-total { grid-column:1; align-self:center; }
 .bb-activity>.bb-daily-progress { grid-column:2; align-self:center; border:0; padding:0; margin:14px 0; }
}
.bb-daily-progress>div>strong { font:600 11px/1.4 Inter,system-ui,sans-serif; color:var(--bb-muted); }
.bb-daily-progress>div>span { font-size:11px; }

/* Reward dates read left to right, independently of the weekly heatmap. */
.bb-bubbles-ready { display:block; grid-column:1 / -1; padding:18px 20px 12px; }
.bb-bubbles-ready .bb-ready-copy { display:flex; align-items:baseline; gap:14px; }
.bb-bubbles-ready .bb-ready-copy h4 { font-size:20px; }
.bb-bubble-strip { display:flex; gap:8px; overflow-x:auto; padding:12px 2px 8px; scrollbar-width:thin; scrollbar-color:#8b708b #18263b; scroll-snap-type:x proximity; }
.bb-bubble-strip>button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; flex:0 0 76px; min-height:88px; padding:8px 4px; color:#e9e0ea; background:transparent; border:1px solid transparent; border-radius:12px; cursor:pointer; scroll-snap-align:start; touch-action:manipulation; }
.bb-bubble-strip>button>span { font:500 11px/1.4 Inter,system-ui,sans-serif; white-space:nowrap; }
.bb-reward-orb { display:block; width:40px; height:40px; border:1px solid #fff9; border-radius:50%; background:radial-gradient(circle at 28% 25%,#fff 0 3%,#ffffff80 5%,transparent 25%),radial-gradient(circle at 75% 75%,#eec0e776,transparent 60%),linear-gradient(140deg,#a1e3ee33,#d1a6ec55); box-shadow:inset -2px -3px 5px #f0bce66b,inset 1px 1px 3px #ccf6ff66,0 0 12px #edc0e51c; transition:transform .18s,box-shadow .18s; }
.bb-bubble-strip>button:hover { background:#ecc9e009; border-color:#ecc9e025; }
.bb-bubble-strip>button:hover .bb-reward-orb { transform:translateY(-3px) scale(1.08); box-shadow:inset -2px -3px 5px #f0bce66b,inset 1px 1px 3px #ccf6ff66,0 0 16px #edc0e540; }
.bb-bubble-strip>button:active .bb-reward-orb { transform:scale(.9); }
.bb-bubble-strip>button:disabled { opacity:.6; cursor:wait; }
@media(prefers-reduced-motion:reduce) { .bb-reward-orb { transition:none; } }


/* Desktop overview: activity beside the next achievement milestones. */
.bb-overview-grid { min-width:0; }
@media(min-width:1100px) {
 .bb-overview-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:stretch; gap:20px; }
 .bb-overview-grid>.bb-activity { margin-bottom:0; }
 .bb-overview-grid>.bb-overview-progress { min-width:0; margin:0; padding:20px; border:1px solid var(--bb-line); border-radius:12px; background:#14233880; }
 .bb-overview-grid>.bb-overview-progress { display:flex; flex-direction:column; }
 .bb-overview-grid .bb-overview-progress .bb-achievement-grid { flex:1; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; }
 .bb-overview-grid .bb-activity-foot { flex-wrap:wrap; row-gap:8px; }
 .bb-overview-grid .bb-activity-detail { flex-wrap:wrap; row-gap:8px; }
}
.bb-ready-grid:has(.bb-fresh-ready) .bb-bubbles-ready { grid-column:auto; }

/* Calendar paging keeps a fixed month window on each screen size. */
.bb-activity.is-month-window .bb-activity-calendar { --bb-cell:20px; --bb-gap:5px; width:max-content; max-width:100%; margin:0 auto; }
.bb-activity.is-month-window .bb-activity-day { width:var(--bb-cell); justify-self:center; }
.bb-month-navigation { display:flex; justify-content:center; align-items:center; gap:16px; margin:2px 0 12px; }
.bb-month-navigation>span { min-width:170px; text-align:center; color:var(--bb-ink); font-size:12px; font-weight:600; }
.bb-month-navigation>button { width:36px; height:36px; min-height:36px; padding:0; border:1px solid var(--bb-line); border-radius:9px; background:#24364b; color:var(--bb-ink); font:24px/1 system-ui; cursor:pointer; }
.bb-month-navigation>button:hover:not(:disabled) { background:#35465d; }
.bb-month-navigation>button:disabled { opacity:.3; cursor:default; }
@media(max-width:760px) {
 .bb-month-navigation>button { width:44px; height:44px; }
 .bb-activity.is-month-window .bb-activity-calendar { --bb-cell:24px; --bb-gap:6px; }
}