/* QeepX · assets/css/qx-polish.css   Cross-app polish pass (geometry, rhythm, type) · loaded after the bundle
   One radius scale (8 / 12 / 16 / 20) · one chip height (28) · one card shadow · tabular numbers everywhere digits line up */

/* ── UI typeface · Inter (self-hosted variable 400–800) · THE SAME font as the native app, so web and app feel identical.
   The app's display font token pointed at Bricolage Grotesque but it was never loaded → headings fell back to system.
   Everything now uses Inter with the app's own tight tracking (native Typography: -0.2..-0.6 on headings). ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/Inter-var.woff2') format('woff2')}
:root{
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --qx-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --qx-font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
body{font-family:var(--ff);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* premium tracking to match the app · headings tight, small labels open (native: labelMedium +0.2, labelSmall +0.3) */
h1,.qx-h1,.top-bar .logo{letter-spacing:-.022em;font-weight:800}
h2,h3,.qx-row__name,.post-name,.vp__h,.profile-name,.qx-banner b,.stat-num{letter-spacing:-.015em}
.nav-label,.pill-tab,.game-badge,.stat-label{letter-spacing:.01em}

:root{--qx-r-sm:8px;--qx-r-md:12px;--qx-r-lg:16px;--qx-r-xl:20px;--qx-shadow-card:0 1px 2px rgba(20,0,20,.06),0 4px 14px rgba(20,0,20,.06)}

/* ── header: same 36px icon buttons, same gap ── */
.hdr-actions,.header-actions{gap:8px}
.hdr-actions a,.hdr-actions button,.header-actions a,.header-actions button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}

/* ── horizontal chip rows: fade at the right edge instead of a hard clip ── */
.pill-tabs,.profile-tabs,.gift-cats,.fun-tabs{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
.pill-tab,.profile-tab,.gift-cat-btn{height:30px;padding:0 14px;border-radius:15px;font-size:12.5px;letter-spacing:.1px}
.pill-tab .qx-i{width:13px;height:13px}

/* ── numbers ── */
.wallet-strip,.qx-contrib__val,.stat-num,.stat-value,.qx-row__online,.react-count,.vc-cost,.lb-score,.lb-rank,.qx-lb__pts{font-variant-numeric:tabular-nums}

/* ── top bar + currency strip: one radius language (base used an odd 5px pill) ── */
.top-icon-btn{width:36px;height:36px}
.wallet-strip{gap:7px}
.wallet-item{border-radius:11px;height:28px;padding:0 9px 0 7px}
.wallet-item .wi-val{font-variant-numeric:tabular-nums;font-weight:800}

/* ── Home ── */
.stories-row{gap:16px;padding:12px 14px 10px}
.post-header{padding:12px 14px 10px}
.post-name{font-size:14.5px}
.post-meta{margin-top:1px}
.post-img{border-radius:0}
.post-actions{padding:6px 8px 8px}
.qx-contrib__head{padding:0 2px 8px}
.qx-contrib__item .qx-contrib__name{font-size:11px}

/* ── Party ── */
.qx-row{border-radius:14px;padding:10px;gap:12px;box-shadow:var(--qx-shadow-card)}
.qx-row__cover{width:84px;height:84px;border-radius:12px}
.qx-row__cover .lv{height:18px;font-size:10px;letter-spacing:.6px;background:linear-gradient(90deg,#ff4684,#ff6a3d);gap:4px}
.qx-row__cover .lv::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;animation:qx-blink 1.2s infinite}
.qx-row__name{font-size:15px;font-weight:800;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qx-row__tag{height:20px;border-radius:10px;padding:0 8px;font-size:11px}
.qx-row__sub{margin-top:6px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.qx-row__mics img,.qx-row__mics i{width:20px;height:20px}
.qx-row__online{position:static;align-self:flex-start;height:22px;padding:0 8px;border-radius:11px;background:var(--qx-surface-alt);color:var(--qx-ink-600);font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:3px}
#room-search{border-radius:22px!important;height:44px;box-shadow:none;border:1px solid var(--border)}

/* ── Games ── */
.games-grid{gap:10px;padding:12px}
.game-tile{padding:14px 6px 12px;border-radius:16px;gap:6px;min-height:138px;justify-content:flex-start;box-shadow:var(--qx-shadow-card);border-width:1.5px}
.game-icon{width:56px;height:56px;border-radius:16px;font-size:28px;margin-bottom:2px}
.game-name{font-size:12px;font-weight:800;line-height:1.2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.game-badge{font-size:10.5px;font-weight:700;color:var(--muted)!important;display:flex;align-items:center;gap:3px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.game-badge svg{width:12px;height:12px}
.new-label::after{top:8px;right:8px;height:16px;padding:0 6px;border-radius:8px;font-size:9px;letter-spacing:.6px;line-height:16px}
.game-tile.new-game{border-color:transparent;box-shadow:var(--qx-shadow-card),0 0 0 1.5px var(--lime) inset}

/* ── lists (followers, messages, visitors, notifications): one row geometry ── */
.qx-list-row,.msg-row,.follow-row,.visitor-row,.notif-row{min-height:64px;padding:10px 14px;gap:12px;border-radius:14px}
.msg-row img,.follow-row img,.visitor-row img,.notif-row img{width:46px;height:46px;border-radius:50%}
.follow-btn,.following-btn,.btn-follow{height:30px;padding:0 14px;border-radius:15px;font-size:12px;font-weight:800}

/* ── leaderboard: fancy-font usernames keep a sane size and one weight ── */
.lb-name,.qx-lb__name,.podium-name{font-size:13px;font-weight:700;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── wallet ── */
.wallet-hero,.wh{border-radius:18px}
.qa-btn,.quick-btn{height:44px;border-radius:14px;font-size:13px}

/* ── forms: one control height and radius ── */
.form-group input:not([type=checkbox]):not([type=radio]),.form-group select,.form-control,input.input,select.input{height:46px;border-radius:12px;font-size:15px}
.form-group textarea,textarea.input{border-radius:12px;font-size:15px}
.btn-block{height:48px;border-radius:24px;font-size:15px}

/* ── toasts: always centred, above the tab bar, never off-screen ── */
#toast-container{position:fixed!important;left:0!important;right:0!important;width:auto!important;max-width:none!important;transform:none!important;margin:0!important;bottom:calc(var(--nav-h,64px) + 14px + env(safe-area-inset-bottom,0px))!important;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:1000;padding:0 16px}
#toast-container .toast{max-width:100%;white-space:normal;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ── inline field errors ── */
.qx-ferr{color:#c0392b;font-size:12px;font-weight:600;margin:6px 2px 0;animation:qx-ferr .2s ease-out}
.qx-ferr-in{border-color:#c0392b!important;box-shadow:0 0 0 2px rgba(192,57,43,.15)!important}
@keyframes qx-ferr{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
#toast-container .toast.bump{animation:qx-bump .25s ease}@keyframes qx-bump{50%{transform:scale(1.05)}}