/* pages.css: lobby, wallet, leaderboard and profile. Shared components (btn, card, pill, table, tabs...) live in base.css; this file only adds page-specific layout. */

/* ================= shared bits used by several pages ================= */
.lobby-link { display: inline; padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; font: inherit; text-decoration: underline; }
.lobby-link:hover { color: var(--text); }
.card.stack > .card-head, .modal-body .card-head { margin-bottom: 0; }
.lobby-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ================= lobby ================= */
.lobby > :empty { display: none; }
.lobby-form { display: flex; flex-direction: column; gap: var(--gap); }
.lobby-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); align-items: start; }
.lobby-seg { width: 100%; }
.lobby-seg .tab { flex: 1; min-height: 36px; }
.lobby-seg .tab[aria-checked="true"] { background: var(--panel-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--red); }
.lobby-seg .tab:focus-visible { box-shadow: var(--ring); }
.lobby-avail { margin: 0; }

.lobby-team { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.lobby-team img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.lobby-mon-fallback { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--panel-3); color: var(--text-dim); font: 700 12px var(--font-display); text-transform: uppercase; }
.lobby-preview { min-height: 0; }
.lobby-preview:empty { display: none; }
.lobby-risk { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.lobby-wager { display: inline-flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }

.lobby-funds { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s5); padding: var(--s3) var(--s4); }
.lobby-fund { display: flex; flex-direction: column; gap: 2px; }
.lobby-fund .sol { font-size: 20px; }
.lobby-fund-text { flex: 1 1 260px; min-width: 0; }
.lobby-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.lobby-notice { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.lobby-notice.warn { border-color: var(--yellow); }
.lobby-notice .lobby-item-main { flex: 1 1 240px; }

.lobby-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.lobby-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.lobby-item.targeted { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, var(--bg-2)); }
.lobby-item.fresh { animation: lobby-flash 1.6s var(--ease); }
@keyframes lobby-flash { from { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, var(--bg-2)); } }
.lobby-item-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lobby-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); font: 600 15px var(--font-display); overflow-wrap: anywhere; }
.lobby-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); color: var(--text-dim); font-size: 13px; }
.lobby-item-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
.lobby-item .pill svg, .lobby-notice .pill svg, .lb-table .pill svg { width: 12px; height: 12px; flex: none; }
.lobby-item.compact { padding: var(--s2) var(--s3); }

.lobby-chat-log { height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: var(--s3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.lobby-chat-log .empty { margin: auto 0; border: 0; padding: var(--s4); }
.lobby-msg { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.lobby-msg-from { font: 700 13px var(--font-display); color: var(--blue); }
.lobby-msg.mine .lobby-msg-from { color: var(--yellow); }
.lobby-msg-time { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.lobby-chat-form { display: flex; gap: var(--s2); margin-top: var(--s3); }
.lobby-chat-form .input { flex: 1; }

/* ================= wallet ================= */
.wallet-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wallet-tile { display: flex; flex-direction: column; gap: var(--s1); }
.wallet-tile-value { font: 800 28px var(--font-display); line-height: 1.1; }
.wallet-tile-value .sol { font-size: inherit; }
.wallet-chips { margin-top: var(--s1); }
.wallet-good { color: var(--green); }
.wallet-pending { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); border-color: var(--yellow); }
.wallet-pending > :first-child { flex: 1 1 220px; min-width: 0; }
.wallet-details summary { cursor: pointer; font: 600 14px var(--font-display); letter-spacing: .03em; color: var(--text-dim); padding: var(--s1) 0; }
.wallet-details summary:hover { color: var(--text); }
.wallet-details[open] > summary { margin-bottom: var(--s2); }
.wallet-steps { margin: 0 0 var(--s4); padding-left: var(--s5); display: flex; flex-direction: column; gap: var(--s2); color: var(--text-dim); }
.wallet-steps strong { color: var(--text); }
.wallet-addr { align-items: center; }
.wallet-addr code { flex: 1; min-width: 0; padding: var(--s2) var(--s3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; overflow-wrap: anywhere; }
.wallet code { font-size: 13px; color: var(--text); }

/* ================= leaderboard ================= */
.lb-stamp { margin-left: auto; }
.page-head .lb-stamp + .sub { margin-top: calc(var(--s2) * -1); }
.lb-table td, .lb-table th { white-space: nowrap; }
.lb-player { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text); font-weight: 600; }
.lb-player:hover .lb-name { text-decoration: underline; }
.lb-rank { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; font: 700 14px var(--font-display); color: var(--text-dim); }
.lb-rank[data-medal="1"] { background: var(--yellow); color: var(--on-electric); }
.lb-rank[data-medal="2"] { background: var(--t-steel); color: var(--on-steel); }
.lb-rank[data-medal="3"] { background: color-mix(in srgb, var(--t-fire) 65%, var(--t-dark)); color: var(--on-fighting); }
@media (max-width: 640px) { .lb-hide-sm { display: none; } .lb-stamp { margin-left: 0; flex-basis: 100%; } }

/* ================= profile ================= */
.profile-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.profile-id { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.profile-id h1 { overflow-wrap: anywhere; }
.profile-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.profile-tile { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4); }
.profile-tile-value { font: 800 24px var(--font-display); line-height: 1.1; }
.profile-tile-value .sol { font-size: inherit; }
.profile-name-form .row { align-items: stretch; }
.profile-name-form .input { flex: 1; min-width: 0; }
.profile-avatars { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.profile-avatar { aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel-3); cursor: pointer; transition: border-color .15s, transform .1s; }
.profile-avatar:hover { border-color: var(--line-2); transform: translateY(-1px); }
.profile-avatar[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; image-rendering: pixelated; display: block; }
.profile-avatars .spinner { grid-column: 1 / -1; }
.profile-missing { max-width: 560px; margin: var(--s6) auto; text-align: center; align-items: center; }
@media (max-width: 640px) { .profile-hide-sm { display: none; } }
.profile-picker > summary { display: flex; align-items: center; gap: var(--s3); cursor: pointer; font: 600 14px var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: var(--s1) 0; }
.profile-picker > summary:hover { color: var(--text); }
.profile-picker[open] > summary { margin-bottom: var(--s3); }
.lobby-format { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.lobby-tier { padding: 0 8px; color: var(--blue); border-color: rgba(92, 200, 255, .4); }
.wallet-status .hint { margin-top: 2px; } .wallet-hold { color: var(--yellow); }