/* Rubble Rumble meta screens (accounts, profile, locker, progress, ranked, results). Uses the tokens from style.css
   (light/dark via :root), adds nothing to the game screens. Phone-first: everything stacks at 390 px. */

/* ---------- meta bar on the landing page ---------- */
.meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -34px 0 18px; padding: 10px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--card-shadow); position: relative; z-index: 1; }
.meta-me { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; padding: 4px 8px 4px 4px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; }
.meta-me:hover { background: var(--bg); }
.meta-bust { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.meta-bust svg { width: 44px; height: 44px; display: block; }
.meta-id { display: flex; flex-direction: column; min-width: 0; }
.meta-id b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-id span { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-lv { flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: "Russo One", sans-serif; background: var(--accent); color: var(--accent-ink); font-size: 0.9rem; }
.meta-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.meta-nav button { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-weight: 800; font-size: 0.9rem; cursor: pointer; }
.meta-nav button:hover { border-color: var(--accent); }
@media (max-width: 720px) {
  .meta-bar { margin-top: 8px; }
  .meta-nav { width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .meta-nav button { padding: 6px 2px; font-size: 0.78rem; }
}

/* ---------- meta screens ---------- */
.screen.meta { max-width: 980px; padding-bottom: 48px; }
.meta-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.meta-head h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.meta-head .back { padding: 8px 12px; min-height: 40px; }
.meta-body { display: grid; gap: 16px; }
.meta-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; box-shadow: var(--card-shadow); }
.meta-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.meta-card h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.meta-card .hint { margin-bottom: 8px; }
.meta-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 0.95rem; }
.meta-dl dt { color: var(--muted); }
.meta-dl dd { margin: 0; overflow-wrap: anywhere; }
.meta-dl code { font-size: 0.85rem; background: var(--bg); padding: 2px 6px; border-radius: 6px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 0.85rem; }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.on { background: var(--ok); color: var(--on-ok); border-color: transparent; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tabs.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.tab { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-weight: 800; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.tab.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.chip .swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--sw, var(--muted)); border: 1px solid rgba(0,0,0,0.25); }
.rune-glyph.small { width: 22px; height: 22px; flex-basis: 22px; font-size: 0.8rem; }
.save-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.save-row .hint { margin: 0; }
.wallet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wallet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; background: var(--bg); border: 1px solid var(--line); }
.wallet-chip b { font-family: "Russo One", sans-serif; font-weight: 400; }
.wallet-chip.grit { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.wallet-chip.grit b { color: var(--gold-dk); }
:root[data-theme="dark"] .wallet-chip.grit b { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wallet-chip.grit b { color: var(--gold); } }
.wallet-chip.nuggets { border-color: color-mix(in srgb, var(--magenta) 60%, transparent); }
.inline-card { padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.inline-card .btn { margin-top: 6px; }

/* ---------- profile ---------- */
.profile-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--crew, var(--accent)) 28%, var(--panel)), var(--panel)); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.bust-ring { position: relative; width: 176px; height: 176px; flex: 0 0 176px; border-radius: 50%; padding: 8px; background: conic-gradient(var(--crew, var(--accent)) calc(var(--pct, 0) * 1%), var(--line) 0); display: flex; align-items: center; justify-content: center; }
.bust-ring svg { width: 160px; height: 160px; border-radius: 50%; background: var(--bg-deep); display: block; }
.lv-badge { position: absolute; right: 6px; bottom: 6px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-family: "Russo One", sans-serif; border: 2px solid var(--panel); }
.profile-id { min-width: 0; flex: 1 1 200px; }
.profile-name { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); overflow-wrap: anywhere; }
.profile-name .tag { color: var(--muted); font-size: 0.6em; margin-left: 4px; }
.profile-title { margin: 2px 0 8px; font-weight: 800; color: var(--muted); }
.crew-pip { color: var(--crew, var(--accent)); }
.slots { display: grid; gap: 12px; }
.slot .field-label { margin: 0 0 6px; }
.ident-grid { display: grid; gap: 14px; }
.field { min-width: 0; }
.crews { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.crew-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); text-align: left; cursor: pointer; border-left: 8px solid var(--crew); }
.crew-card b { font-family: "Russo One", sans-serif; font-weight: 400; color: var(--crew); }
.crew-card span { color: var(--muted); font-size: 0.82rem; }
.crew-card.on { border-color: var(--crew); background: color-mix(in srgb, var(--crew) 12%, var(--bg)); }
.crew-card[disabled] { opacity: 0.5; cursor: not-allowed; }
.kidname { display: inline-flex; align-items: center; flex: 1 1 160px; font-family: "Russo One", sans-serif; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stat-box { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.stat-k { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-v { font-family: "Russo One", sans-serif; font-size: 1.15rem; overflow-wrap: anywhere; }
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.match-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 0.9rem; }
.match-list .mode { text-transform: capitalize; color: var(--muted); min-width: 60px; }
.match-list b { font-family: "Russo One", sans-serif; font-weight: 400; }
.match-list .up { color: var(--ok); } .match-list .down { color: var(--danger); }
.match-list time { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--crew, var(--muted)); margin-right: 3px; vertical-align: middle; }

/* ---------- locker ---------- */
.locker-head { display: grid; gap: 8px; margin-bottom: 12px; }
.item-grid, .corner-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.item, .corner-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 10px; padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.corner-list li { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; background: var(--bg); }
.item.locked { opacity: 0.72; }
.item.is-eq { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.item-art { grid-row: span 2; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: "Russo One", sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); background: linear-gradient(145deg, color-mix(in srgb, var(--sw, var(--accent)) 85%, white), color-mix(in srgb, var(--sw, var(--accent)) 70%, black)); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
.corner-list .item-art { grid-row: auto; }
.item.locked .item-art { filter: grayscale(0.7); }
/* shard skin previews: the material on a dark well; locked skins stay in colour (seeing them is the point) */
.item-art.skin { background: #080a14; box-shadow: inset 0 0 0 2px var(--sw, var(--line)); overflow: hidden; padding: 4px; }
.item-art.skin canvas { width: 100%; height: auto; display: block; image-rendering: auto; }
.item.locked .item-art.skin { filter: none; opacity: 0.8; }
.item-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.item-body b { overflow-wrap: anywhere; }
.item-body .hint { margin: 0; font-size: 0.8rem; }
.rarity { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--muted); }
.r-uncommon .rarity { color: var(--accent); } .r-rare .rarity { color: var(--violet); } .r-epic .rarity { color: var(--accent-2); } .r-legendary .rarity { color: var(--gold-dk); }
:root[data-theme="dark"] .r-legendary .rarity { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .r-legendary .rarity { color: var(--gold); } }
.item-act { grid-column: 2; display: flex; align-items: center; min-height: 28px; }
.equipped-tag { color: var(--ok); font-weight: 800; font-size: 0.85rem; }
.corner { margin-top: 8px; }

/* ---------- progress ---------- */
.level-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.level-ring { position: relative; width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), var(--line) 0); display: flex; align-items: center; justify-content: center; }
.level-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--panel); }
.level-ring b, .level-ring span { position: relative; }
.level-ring b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 1.9rem; line-height: 1; }
.level-ring span { position: absolute; bottom: 16px; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.level-body { flex: 1 1 240px; min-width: 0; display: grid; gap: 6px; }
.xp-bar { height: 12px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--line); overflow: hidden; }
.xp-bar.big { height: 16px; }
.xp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--teal)); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.quest-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.quest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.quest.done { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.quest.done .q-n { color: var(--ok); }
.quest.just { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.quest-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.quest-main b { grid-column: 1; overflow-wrap: anywhere; }
.quest-main .hint { grid-column: 2; grid-row: 1; margin: 0; font-size: 0.78rem; white-space: nowrap; }
.q-bar { grid-column: 1; height: 8px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--line); overflow: hidden; }
.q-bar div { height: 100%; background: var(--accent); border-radius: 999px; }
.q-n { grid-column: 2; grid-row: 2; font-size: 0.8rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.quest-list.compact .quest { padding: 6px 10px; }
.streak-days { margin: 0 0 4px; font-size: 1.4rem; }
.streak-days b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 1.8rem; }
.flame { filter: grayscale(1) opacity(0.5); } .flame.lit { filter: none; }
.climb-pos { margin: 0 0 6px; }
.climb { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin: 0 0 8px; }
.climb .step { height: 14px; border-radius: 4px; background: var(--bg-deep); border: 1px solid var(--line); }
.climb .step.got { background: var(--accent); border-color: transparent; }
.climb .step.nuggets { border-color: var(--accent-2); } .climb .step.nuggets.got { background: var(--accent-2); }
.climb .step.cosmetic { border-color: var(--violet); } .climb .step.cosmetic.got { background: var(--violet); }
.climb .step.arena { border-color: var(--gold); } .climb .step.arena.got { background: var(--gold); }
.ach-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ach-head h2 { margin: 0; }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ach { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); opacity: 0.7; min-width: 0; }
.ach.got { opacity: 1; border-color: color-mix(in srgb, var(--ach, var(--accent)) 60%, transparent); }
.ach p { margin: 2px 0; font-size: 0.85rem; color: var(--muted); }
.ach .hint { font-size: 0.78rem; margin: 0; }
.ach-gem { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); background: var(--ach, var(--muted)); opacity: 0.5; }
.ach.got .ach-gem { opacity: 1; }
.ach.r-common { --ach: #8e97a8; } .ach.r-uncommon { --ach: var(--accent); } .ach.r-rare { --ach: var(--violet); } .ach.r-epic { --ach: var(--accent-2); } .ach.r-legendary { --ach: var(--gold); }

/* ---------- ranked + boards ---------- */
.ranked-card .hint { margin-bottom: 10px; }
.tier-row { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; }
.tier-badge { flex: 0 0 auto; width: 84px; height: 84px; clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 8px 8px; font-family: "Russo One", sans-serif; font-size: 0.8rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); background: linear-gradient(160deg, #9aa3b5, #5c6270); }
.tier-badge.t-chip { background: linear-gradient(160deg, #c9b29a, #8a6a4a); } .tier-badge.t-shard { background: linear-gradient(160deg, #6fe3f2, #0e8aa6); }
.tier-badge.t-facet { background: linear-gradient(160deg, #b48bff, #6b3fd1); } .tier-badge.t-prism { background: linear-gradient(160deg, #ff7fc4, #c2347a); }
.tier-badge.t-lode { background: linear-gradient(160deg, #f6e58a, #c99a1e); } .tier-badge.t-runebound, .tier-badge.t-crownstone { background: linear-gradient(160deg, #fff6b0, #e0b241, #6b3fd1); }
.tier-badge.t-none { background: linear-gradient(160deg, var(--line), var(--muted)); }
.tier-rr { margin: 0; font-size: 1.1rem; }
.tier-rr b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 1.6rem; }
.board-me { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 800; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.board li.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.board li:nth-child(-n+3) .rank { color: var(--gold-dk); }
.board .rank { font-family: "Russo One", sans-serif; text-align: center; }
.board .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.board .who svg { flex: 0 0 32px; border-radius: 50%; background: var(--bg-deep); }
.who-txt { display: flex; flex-direction: column; min-width: 0; }
.who-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-txt .tag { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.who-txt .hint { margin: 0; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .lv { color: var(--muted); font-size: 0.8rem; }
.board .score { font-family: "Russo One", sans-serif; text-align: right; white-space: nowrap; }
.board .score small { display: block; font-family: "Nunito Sans", sans-serif; font-weight: 700; color: var(--muted); font-size: 0.72rem; }
@media (max-width: 480px) { .board li { grid-template-columns: 28px minmax(0, 1fr) auto; } .board .lv { display: none; } }

/* ---------- account ---------- */
.signin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; min-height: 44px; }
.gbtn { min-height: 0; display: flex; align-items: center; color: var(--muted); font-size: 0.9rem; }
.gbtn:empty { display: none; }
.dev-row { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); }
.dev-row .text { flex: 1 1 140px; }
.confirm { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.confirm .text { flex: 1 1 140px; }

/* ---------- modals (age, offline-only, sign-in prompt, results) ---------- */
.meta-modal .modal-box { border-radius: 20px; animation: pop 0.25s ease-out; }
.age-box { max-width: 420px; }
.age-box .row { margin-top: 6px; }
.age-box .control { flex: 1 1 140px; }
.offline-box { max-width: 440px; text-align: center; }
.offline-art { width: 72px; height: 72px; margin: 0 auto 8px; }
.offline-art svg { width: 100%; height: 100%; }
.offline-box p { margin: 0 0 10px; line-height: 1.5; }
.prompt-box { max-width: 420px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.prompt-bust { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--bg-deep); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.prompt-bust svg { width: 100%; height: 100%; display: block; }
.prompt-name { margin: 0; font-family: "Russo One", sans-serif; }
.prompt-box h2 { margin: 4px 0; font-size: 1.3rem; }
.prompt-box .hint.small { font-size: 0.78rem; margin: 6px 0 0; }
.results-box { max-width: 520px; }
.results-box h2 { font-size: 1.6rem; margin-bottom: 2px; }
.res-xp { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.res-level { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.res-level b { font-family: "Russo One", sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--accent); }
.res-level span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.res-level .levelup { color: var(--ok); text-transform: none; letter-spacing: 0; font-weight: 800; font-size: 0.8rem; }
.res-bar-wrap { flex: 1; min-width: 0; }
.res-bar-wrap .hint { margin: 6px 0 0; }
.res-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.wallet-chip small { color: var(--muted); font-weight: 600; }
.res-rating { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 2px; }
.res-rating.up { border-color: color-mix(in srgb, var(--ok) 60%, transparent); } .res-rating.down { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.res-rating .hint { margin: 0; }
.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; background: var(--bg); border: 1px solid var(--line); }
.pill.ach-pill { border-color: var(--gold); } .pill.item-pill { border-color: var(--violet); }
.results-box .row { margin-top: 12px; }
.results-box h3 { margin: 12px 0 6px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

@media (max-width: 480px) {
  .meta-card { padding: 14px; }
  .profile-hero { padding: 14px; justify-content: center; text-align: center; }
  .bust-ring { width: 150px; height: 150px; flex-basis: 150px; }
  .bust-ring svg { width: 134px; height: 134px; }
  .item-grid, .corner-list { grid-template-columns: 1fr; }
  .tier-row { flex-wrap: wrap; }
  .res-xp { flex-direction: column; align-items: stretch; }
  .res-level { flex-direction: row; justify-content: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .xp-fill { transition: none; } }

/* locker: viewer toggle rows */
.toggle-row { display: flex; gap: 10px; align-items: center; min-height: 40px; font-size: 0.92rem; color: var(--ink); cursor: pointer; }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); }

.google-native-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 10px 16px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 24px; font: 500 14px Arial, sans-serif; cursor: pointer; }
.google-native-button:disabled { opacity: .6; cursor: wait; }
.google-native-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.board-scopes { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.board-scopes .btn { flex:1 1 85px; min-height:44px; }
.board-location-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.board-location-fields label { display:block; font-weight:700; min-width:0; }
.board-location-fields select { display:block; width:100%; min-height:44px; margin-top:6px; }
.ranking-location { margin:12px 0; padding:12px 0; border-top:1px solid var(--line); }
.ranking-location summary { cursor:pointer; min-height:44px; font-weight:700; }
.saved-rumblers { list-style:none; padding:0; }
.saved-rumblers li { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0; }
.saved-rumblers li span { overflow-wrap:anywhere; }
.board-friends { padding:12px 0; }
@media(max-width:560px) { .board-location-fields { grid-template-columns:1fr; } .board-friends .row { flex-wrap:wrap; } .board-friends .text { min-width:0; width:100%; } }
/* banners: a real two-colour gradient (content.json items[].colors); animated ones shimmer */
.item-art.banner-art { background: linear-gradient(135deg, var(--bg-a), var(--bg-z)); position: relative; overflow: hidden; }
.chip .swatch.banner-swatch { background: linear-gradient(135deg, var(--bg-a), var(--bg-z)); }
.banner-art.animated::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: translateX(-100%); animation: banner-shimmer 2.6s ease-in-out infinite; }
@keyframes banner-shimmer { to { transform: translateX(100%); } }
/* name flames (Ember Streak rewards) */
.item-art.flame-art { background: radial-gradient(circle at 50% 70%, #5a1d00, #170800); }
.name-flame { display: inline-block; vertical-align: -2px; margin-left: 3px; }
.name-flame.flicker { animation: flame-flicker 0.9s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes flame-flicker { from { transform: scale(1, 1); filter: brightness(1); } to { transform: scale(0.92, 1.1); filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .banner-art.animated::after, .name-flame.flicker { animation: none; } }