/* ========== shared: badges, shop, account (used by the hub and every game) ========== */
.bdg { --bs: 30px; position: relative; display: inline-grid; place-items: center; width: var(--bs); height: var(--bs); border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--b1) 60%, var(--b2)); box-shadow: 0 0 0 calc(var(--bs) * .07) #fff, 0 calc(var(--bs) * .08) calc(var(--bs) * .2) rgba(0,0,0,.35); }
.bdg-e { font-size: calc(var(--bs) * .62); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.bdg.r-common { --b1: #c9f7e1; --b2: #6fd6a8; }
.bdg.r-rare { --b1: #cfe6ff; --b2: #4c8dff; }
.bdg.r-epic { --b1: #f1d2ff; --b2: #a64dff; }
.bdg.r-legend { --b1: #fff1b8; --b2: #ff9f1c; box-shadow: 0 0 0 calc(var(--bs) * .07) #fff, 0 0 calc(var(--bs) * .5) #ffc94a; }
.bdg.r-legend::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.8) 50%, transparent 65%); background-size: 250% 100%; animation: bdgShine 2.6s linear infinite; pointer-events: none; }
@keyframes bdgShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.bdg.a-bob .bdg-e { animation: bdgBob 1.8s ease-in-out infinite; }
.bdg.a-wiggle .bdg-e { animation: bdgWig 1.6s ease-in-out infinite; }
.bdg.a-spin .bdg-e { animation: bdgSpin 4s linear infinite; }
.bdg.a-pulse .bdg-e { animation: bdgPulse 1.2s ease-in-out infinite; }
.bdg.a-float .bdg-e { animation: bdgFloat 2.4s ease-in-out infinite; }
.bdg.a-shake .bdg-e { animation: bdgShake 2.2s ease-in-out infinite; }
.bdg.a-flip .bdg-e { animation: bdgFlip 3s ease-in-out infinite; }
.bdg.a-glow .bdg-e { animation: bdgGlow 1.6s ease-in-out infinite; }
@keyframes bdgBob { 50% { transform: translateY(-12%); } }
@keyframes bdgWig { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes bdgSpin { to { transform: rotate(360deg); } }
@keyframes bdgPulse { 50% { transform: scale(1.16); } }
@keyframes bdgFloat { 50% { transform: translateY(-10%) rotate(-6deg); } }
@keyframes bdgShake { 0%, 70%, 100% { transform: none; } 75% { transform: translateX(-8%) rotate(-8deg); } 85% { transform: translateX(8%) rotate(8deg); } }
@keyframes bdgFlip { 0%, 60%, 100% { transform: none; } 80% { transform: rotateY(180deg); } }
@keyframes bdgGlow { 50% { filter: drop-shadow(0 0 6px #fff6a8) brightness(1.15); } }
/* badges sit on top of the profile banner */
.pc-badges { position: absolute; top: 6px; inset-inline-start: 8px; z-index: 3; display: flex; gap: 6px; }
.pgrid .pc-badges { top: calc(.8 * var(--vm)); gap: calc(.6 * var(--vm)); }
.tm-chip .bdg, .vs-pl .bdg { margin-inline-start: 2px; }
/* shop */
.shop-modal { width: min(760px, 96vw); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.shop-head { display: flex; align-items: center; gap: 12px; } .shop-head h2 { margin: 0; flex: 1; }
.shop-cred { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: linear-gradient(135deg, #5ee7ff33, #a64dff33); border: 1px solid #a64dff88; font-weight: 900; }
.shop-cred b { font-size: 1.2rem; }
.shop-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; } .shop-prev-card { width: min(340px, 100%); }
.shop-tier { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.r-common-t { color: #6fd6a8; } .r-rare-t { color: #6aa5ff; } .r-epic-t { color: #c084ff; } .r-legend-t { color: #ffc94a; }
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; background: var(--surf2); border: 2px solid var(--line); transition: .2s var(--ease); text-align: center; }
.shop-item:hover { transform: translateY(-3px); }
.shop-item b { font-size: .95rem; } .shop-item small { font-weight: 800; color: var(--muted); } .shop-item .price { color: #8fd8ff; }
.shop-item.own { border-color: color-mix(in srgb, var(--good) 55%, transparent); } .shop-item.on { box-shadow: 0 0 0 3px var(--good); } .shop-item.on small { color: var(--good); }
.shop-item.poor { opacity: .55; }
.cred-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: linear-gradient(135deg, #5ee7ff33, #a64dff33); font-weight: 900; font-size: .9rem; }
/* Mind Auction menu: back to the hub */

/* ---------- social: friends, messages, notifications, global chat ---------- */
/* the top row of every main page: your chip on one side, the action buttons on the other, all centred on one line */
.hub-top, .menu-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.hub-top .me-chip, .menu-top .me-chip { flex: 0 1 auto; min-width: 0; align-self: center; }
.me-chip > div { min-width: 0; overflow: hidden; padding-inline-end: 2px; }
.me-chip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip .me-lv { white-space: nowrap; flex-wrap: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.soc-bar { display: flex; align-items: center; gap: 8px; }
.soc-btn { --h: 46px; position: relative; width: var(--h); height: var(--h); border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; text-decoration: none; color: inherit;
  background: var(--surf); border: 1px solid var(--line); transition: transform .18s var(--ease), background .18s, border-color .18s; }
.soc-btn:hover { transform: translateY(-2px); background: var(--surf2); border-color: color-mix(in srgb, var(--pri) 45%, var(--line)); }
.soc-btn:active { transform: scale(.94); }
.top-actions .cred-chip.big { height: 46px; padding: 0 16px; border-radius: 15px; }
@media (max-width: 430px) {
  .hub-top, .menu-top { gap: 8px; }
  .top-actions, .soc-bar { gap: 6px; }
  .soc-btn { --h: 40px; border-radius: 13px; font-size: 1.1rem; }
  .top-actions .cred-chip.big { height: 40px; padding: 0 11px; font-size: .95rem; border-radius: 13px; }
  .hub-top .me-chip, .menu-top .me-chip { padding-inline-end: 12px; }
  .me-chip .me-lv .xpbar { display: none; }
}
.soc-count { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ff3d6e; color: #fff; font-size: .72rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg1); }
.soc-modal { width: min(560px, 96vw); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; }
.soc-head { display: flex; align-items: center; gap: 10px; } .soc-head h2, .soc-head h3 { margin: 0; flex: 1; }
.soc-add .inp { flex: 1; }
.soc-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.soc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--surf2); text-align: start; width: 100%; }
.soc-row .grow { display: flex; flex-direction: column; min-width: 0; } .soc-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-dot { font-style: normal; background: #ff3d6e; color: #fff; border-radius: 99px; padding: 0 6px; font-size: .75rem; }
.soc-convo { height: min(640px, 88vh); }
.soc-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 2px; min-height: 160px; }
.soc-bub { max-width: 80%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 16px; background: var(--surf2); }
.soc-bub.me { align-self: flex-end; background: color-mix(in srgb, var(--pri) 45%, transparent); }
.soc-bub span { white-space: pre-wrap; word-break: break-word; user-select: text; } .soc-bub small { opacity: .6; font-size: .7rem; }
.soc-send .inp { flex: 1; }
.soc-note { margin: 0; }
.soc-line { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 14px; }
.soc-line.me { background: color-mix(in srgb, var(--pri) 18%, transparent); }
.soc-line .grow { display: flex; flex-direction: column; min-width: 0; }
.soc-name { font-weight: 900; text-align: start; display: inline-flex; align-items: center; gap: 4px; color: var(--acc); }
.soc-bdg { display: inline-flex; gap: 2px; }
.soc-txt { white-space: pre-wrap; word-break: break-word; user-select: text; }
.muted-line { opacity: .6; }
.soc-who { display: flex; flex-direction: column; gap: 10px; width: min(360px, 86vw); }

/* ---------- profile card layout ----------
   photo (--avs) sits across the bottom edge of the banner; name + level stacked beside it below the banner;
   badges and the 🏆 wins tag share one tidy row in the top corner */
.pc-banner { height: calc(var(--avs, 64px) * .5); }
.pgrid .pc-banner, .pcard.big .pc-banner, .elim-card .pc-banner { height: 58%; } /* TV cards keep their proportions */
/* the photo starts at 20% of its size and the banner ends at 50%, so the name always starts just below the banner */
.pc-body { align-items: flex-start; gap: 12px; padding: calc(var(--avs, 64px) * .2) 14px 12px; }
.pc-body > .av { flex: none; }
.pc-info { display: flex; flex-direction: column; gap: 3px; margin-top: calc(var(--avs, 64px) * .3 + 6px); }
.pc-body > :last-child:not(.pc-info):not(.av) { align-self: flex-end; }
.pgrid .pc-body, .pcard.big .pc-body, .elim-card .pc-body { align-items: flex-end; }
.pgrid .pc-info, .pcard.big .pc-info, .elim-card .pc-info { margin-top: 0; }
.pc-name { font-size: clamp(1rem, calc(var(--avs, 64px) * .2), 1.3rem); line-height: 1.2; }
.pc-lv { line-height: 1.2; }
.pc-lv .tier { flex: none; }
.pc-tags { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.pc-tags .pc-badges, .pc-tags .pc-wins { position: static; inset: auto; }
.pc-tags .pc-badges { display: flex; gap: 4px; }
.pc-tags .pc-wins { height: var(--bs, 24px); padding: 0 10px; font-size: .82rem; line-height: 1; }
.pgrid .pc-tags { top: calc(.8 * var(--vm)); inset-inline-end: calc(1 * var(--vm)); gap: calc(.6 * var(--vm)); }
.pgrid .pc-tags .pc-wins, .pcard.big .pc-tags .pc-wins { height: auto; padding: calc(.4 * var(--vm)) calc(1.2 * var(--vm)); font-size: calc(2.2 * var(--vm)); }

/* ---------- leaderboards (home page) ---------- */
.lb-card { display: flex; flex-direction: column; gap: 10px; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lb-head h3 { margin: 0; }
.lb-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab { flex: none; padding: 7px 12px; border-radius: 99px; background: var(--surf2); border: 1px solid var(--line); font-weight: 800; font-size: .85rem; white-space: nowrap; transition: .15s; }
.lb-tab.on { background: var(--pri); border-color: transparent; color: #fff; box-shadow: none; }
.lb-sort { margin-top: 2px; }
.lb-list { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 16px; background: var(--surf2); animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * .03s); }
.lb-row.me { background: color-mix(in srgb, var(--pri) 28%, transparent); border: 2px solid var(--pri); }
.lb-pos { width: 28px; flex: none; text-align: center; font-size: 1.2rem; line-height: 1; } .lb-pos b { font-size: .95rem; }
.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-who b { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-who small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.lb-bdg { display: inline-flex; gap: 2px; flex: none; }
.lb-val { flex: none; font-weight: 900; }
.lb-me:empty { display: none; } .lb-me { border-top: 1px dashed var(--line); padding-top: 8px; }
.lb-modal .lb-list { max-height: 60vh; }
/* dev mode players list */
.dv-row .grow { display: flex; flex-direction: column; min-width: 0; }
.dv-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); opacity: .5; }
.dv-dot.on { background: #2ee67a; opacity: 1; box-shadow: none; }
.dv-seen { display: flex; flex-direction: column; align-items: flex-end; text-align: end; flex: none; }
.dv-seen b { font-size: .8rem; } .dv-seen b.on { color: #2ee67a; } .dv-seen small { font-size: .72rem; }
.dv-stats { margin: 0; }
/* a fixed height (not just a max-height) so the list below is a real scroll area on every phone browser */
.dv-modal { height: min(88vh, 900px); height: min(88dvh, 900px); }
.dv-modal .dv-list { flex: 1 1 0; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.dv-modal .dv-row { flex: none; }

/* dev mode: one player's tools */
.dv-row.tap { cursor: pointer; transition: background .15s; } .dv-row.tap:hover { background: color-mix(in srgb, var(--pri) 18%, var(--surf2)); }
.dv-tools .pcard { flex: none; }
.dv-info, .dv-games { display: flex; flex-direction: column; gap: 6px; }
.dv-info > div, .dv-games > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 12px; background: var(--surf2); }
.dv-info span, .dv-games span { color: var(--muted); font-weight: 800; font-size: .85rem; flex: none; }
.dv-info b, .dv-games b { text-align: end; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.dv-id { cursor: copy; font-family: ui-monospace, monospace; font-size: .75rem !important; opacity: .8; }
.dv-danger { margin-top: 6px; padding: 12px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--bad) 60%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); display: flex; flex-direction: column; gap: 8px; }
.dv-confirm { width: min(420px, 94vw); display: flex; flex-direction: column; gap: 12px; }
.dv-warn { margin: 0; line-height: 1.6; color: color-mix(in srgb, var(--bad) 70%, var(--text)); font-weight: 700; }

/* dev mode: tools */
.dv-global { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-row.susp { opacity: .7; }
.dv-susp { padding: 8px 12px; border-radius: 12px; font-weight: 900; background: color-mix(in srgb, var(--bad) 18%, transparent); color: color-mix(in srgb, var(--bad) 70%, var(--text)); }
.dv-tool { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surf2); }
.dv-tool .row .inp { flex: 1; min-width: 0; padding: 9px 12px; font-size: .95rem; }
.dv-btns { flex-direction: row; flex-wrap: wrap; }
.dv-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.dv-b { display: grid; place-items: center; padding: 4px; border-radius: 12px; border: 2px solid transparent; opacity: .4; transition: .15s; }
.dv-b.on { opacity: 1; border-color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.dv-danger .row .inp { flex: 1; min-width: 0; padding: 9px 12px; font-size: .9rem; }
.dv-switch { padding: 8px 2px; }
/* announcement banner on the home page */
.hub-notice:empty { display: none; }
.notice-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, #ffd36b 22%, var(--surf)), color-mix(in srgb, #ff9f1c 18%, var(--surf))); border: 1px solid color-mix(in srgb, #ffd36b 55%, transparent); }
.notice-card .nc-ic { font-size: 1.6rem; line-height: 1; flex: none; }
.notice-card p { margin: 0; flex: 1; font-weight: 800; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.dv-check { width: 22px; height: 22px; accent-color: var(--good); }
/* your chip (top row): photo, then name over level, evenly spaced */
.hub-top .me-chip, .menu-top .me-chip { gap: 10px; padding: 5px; padding-inline-end: 16px; }
.me-chip > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0; }
.me-chip b { font-size: 1rem; line-height: 1.15; font-weight: 900; }
.me-chip .me-lv { gap: 5px; font-size: .8rem; line-height: 1; }
.me-chip .me-lv .tier, .me-chip .me-lv svg { width: 16px; height: 16px; flex: none; display: block; }
@media (max-width: 430px) { .hub-top .me-chip, .menu-top .me-chip { gap: 9px; padding-inline-end: 14px; } }
.shop-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: clamp(1.2rem, 5vw, 1.6rem); }
.shop-head .shop-cred { flex: none; }
@media (max-width: 430px) { .shop-head { gap: 8px; } .shop-head .shop-cred small { display: none; } .shop-head h2 { font-size: 1.25rem; } }
/* sideways tab rows fade at the edges so it's clear they scroll */
.lb-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); padding-inline: 10px; scroll-padding-inline: 10px; scroll-snap-type: x proximity; }
.lb-tab { scroll-snap-align: start; flex: none; }

/* the name in the top bar: always in full on one line. The chip is as wide as the name needs; when the name and
   the buttons (🔔 👥 💠) don't fit side by side, the buttons drop to their own row under it instead of squeezing the name */
.hub-top, .menu-top { flex-wrap: wrap; row-gap: 8px; }
.hub-top .me-chip, .menu-top .me-chip { flex: 1 1 auto; min-width: auto; max-width: 100%; }
.hub-top .me-chip > div, .menu-top .me-chip > div { min-width: auto; overflow: visible; }
.hub-top .me-chip b, .menu-top .me-chip b { white-space: nowrap; overflow: visible; text-overflow: clip; }
.hub-top .top-actions, .menu-top .top-actions { flex: none; margin-inline-start: auto; }
/* 🛠️ Dev tools: a small pill under the top bar */
.dev-strip { display: flex; justify-content: center; margin: -6px 0 -4px; }
.dev-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: var(--surf); border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--line)); font-weight: 800; font-size: .85rem; }
.dev-pill:hover { background: var(--surf2); }
/* global chat on the home page */
.hub-chat { order: 4; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 1.05rem; text-align: start; }
.hc-arrow { transition: transform .2s; font-size: 1.1rem; }
.hub-chat.closed .hc-arrow { transform: rotate(-90deg); }
html[dir=rtl] .hub-chat.closed .hc-arrow { transform: rotate(90deg); }
.hub-chat.closed .hc-body { display: none; }
.hc-body { display: flex; flex-direction: column; gap: 8px; }
.hc-body .soc-msgs { height: 320px; min-height: 0; flex: none; }
.soc-chatwrap { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.soc-chatwrap .soc-msgs { flex: 1; }

/* profile cards: the banner fills the whole card (it used to cover only the top, with a grey strip below);
   a soft dark shade at the bottom keeps the name and level readable on any banner */
.pcard > .pc-banner { inset: 0; height: auto !important; opacity: 1; }
.pcard > .pc-banner::after { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .5) 100%); }
.pcard .pc-name, .pcard .pc-lv { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }
/* the photo sits in the middle of the banner (top to bottom), with the name and level centred beside it;
   a tight dark outline plus a soft dark shadow keep the text readable on the brightest banner */
.pcard > .pc-body { align-items: center; padding-top: calc(var(--avs, 64px) * .2); padding-bottom: calc(var(--avs, 64px) * .2); }
.pcard > .pc-body > .pc-info { margin-top: 0; justify-content: center; }
.pcard > .pc-body > :last-child:not(.pc-info):not(.av) { align-self: center; }
.pcard .pc-name, .pcard .pc-lv { text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .55); }
.pcard .pc-lv .tier { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }

/* leaderboards: every row shows that player's banner behind it, with the same shade and text shadow as the profile cards */
.lb-row.bnr { position: relative; overflow: hidden; isolation: isolate; flex: none; }
.lb-row.bnr > .lb-bn { position: absolute; inset: 0; z-index: -1; }
.lb-row.bnr > .lb-bn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, .45)); }
.lb-row.bnr .lb-pos, .lb-row.bnr .lb-who b, .lb-row.bnr .lb-who small, .lb-row.bnr .lb-val { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .55); }
.lb-row.bnr.me { border: 2px solid #fff; }