/* Accounts, profiles, leaderboard, friends, membership, ads. Uses the variables from app.css. */

.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red-soft); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.vip-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; color: var(--gold); font-size: 12px; font-weight: 800; vertical-align: middle; }
.vip-tag .ico { width: 15px; height: 15px; }
.vip-tag.big { font-size: 14px; padding: 2px 8px; border-radius: 10px; background: rgba(242, 201, 76, .12); }
.vip-tag.big .ico { width: 18px; height: 18px; }
.signup-cta { justify-content: center; }
.online-dot::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green-hi); margin: 0 6px 1px 4px; vertical-align: middle; }

/* account menu */
.account-menu { display: flex; flex-direction: column; gap: 4px; min-width: 300px; }
.am-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.am-name { font-family: var(--font-head); font-weight: 800; font-size: 20px; }
.am-actions { display: flex; gap: 10px; margin: 6px 0 10px; }
.am-actions .btn { flex: 1; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 700; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; text-align: left; width: 100%; }
.menu-item:hover { background: var(--hover); }
.menu-item .ico { width: 20px; height: 20px; color: var(--text-3); }

/* sign in and sign up */
.auth-page { display: flex; justify-content: center; padding-top: 40px; }
.auth-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px 26px 22px; }
.auth-card h1 { margin: 0 0 6px; font-size: 30px; }
.auth-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--green-sh); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.auth-logo .ico { width: 28px; height: 28px; }
.auth-tabs { display: flex; gap: 4px; margin: 18px 0 14px; background: var(--bg-3); border-radius: 8px; padding: 4px; }
.auth-tabs a { flex: 1; text-align: center; padding: 8px; border-radius: 6px; color: var(--text-3); font-weight: 800; text-decoration: none; font-family: var(--font-head); font-size: 16px; }
.auth-tabs a.on { background: var(--gray); color: var(--text); }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.auth-field small { font-weight: 500; font-size: 12.5px; }
.auth-error { background: rgba(250, 65, 45, .12); border: 1px solid rgba(250, 65, 45, .4); color: #ffb3a8; border-radius: 6px; padding: 9px 12px; font-size: 14px; }
.auth-small { font-size: 13.5px; text-align: center; margin: 4px 0 0; }
.auth-small a, .auth-done { color: var(--green-hi); }
.auth-done { font-size: 14px; }

/* profile */
.profile-page { max-width: 980px; }
.pf-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 6px 0 22px; }
.pf-id { flex: 1; min-width: 220px; }
.pf-id h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-bio { margin: 8px 0 0; color: var(--text-2); }
.pf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pf-rating { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.pr-cat { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 800; font-family: var(--font-head); font-size: 16px; }
.pr-cat .ico { width: 20px; height: 20px; color: var(--green-hi); }
.pr-num { font-family: var(--font-head); font-size: 34px; font-weight: 800; margin: 4px 0 2px; }
.pr-sub { font-size: 13px; }
.pf-record { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.pf-record > div:not(.pf-bar) { display: flex; flex-direction: column; }
.pf-record b { font-family: var(--font-head); font-size: 24px; }
.pf-record b.win { color: var(--green-hi); }
.pf-record b.loss { color: #ff8a78; }
.pf-bar { grid-column: 1 / -1; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-3); }
.pf-bar i.w { background: var(--green); }
.pf-bar i.d { background: #8c9194; }
.pf-bar i.l { background: #c8443c; }
.game-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.game-row { display: grid; grid-template-columns: 64px 1fr 120px 150px 54px 110px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 6px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 14px; }
.game-row:hover { background: var(--hover); }
.gr-res { font-weight: 800; font-family: var(--font-head); }
.gr-res.win { color: var(--green-hi); }
.gr-res.loss { color: #ff8a78; }
.gr-res.draw { color: var(--text-2); }
.gr-rc { font-weight: 800; text-align: right; }
.gr-rc.up { color: var(--green-hi); }
.gr-rc.down { color: #ff8a78; }
.gr-date { text-align: right; }
@media (max-width: 760px) {
  .game-row { grid-template-columns: 54px 1fr 50px; }
  .gr-tc, .gr-why, .gr-date { display: none; }
  .pf-record { grid-template-columns: repeat(2, 1fr); }
}

/* leaderboard */
.leaderboard-page { max-width: 860px; }
.lb-tabs { margin: 4px 0 14px; }
.lb-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.lb-tabs .ico { width: 18px; height: 18px; }
.lb-table { display: flex; flex-direction: column; gap: 2px; }
.lb-row { display: grid; grid-template-columns: 44px 34px 1fr auto 70px; gap: 12px; align-items: center; padding: 8px 14px; background: var(--panel); border-radius: 6px; color: var(--text); text-decoration: none; }
.lb-row:hover { background: var(--hover); }
.lb-row.me { outline: 1px solid var(--green); }
.lb-rank { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--text-3); text-align: center; }
.lb-row.top1 .lb-rank { color: #f2c94c; }
.lb-row.top2 .lb-rank { color: #d3d6da; }
.lb-row.top3 .lb-rank { color: #d39a62; }
.lb-name { font-weight: 800; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-wld { font-size: 13px; }
.lb-rating { font-family: var(--font-head); font-weight: 800; font-size: 20px; text-align: right; }
.lb-pager { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
@media (max-width: 600px) { .lb-wld { display: none; } .lb-row { grid-template-columns: 34px 34px 1fr 60px; } }

/* friends */
.friends-page { max-width: 860px; }
.add-friend, .inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.add-friend .input, .inline-form .input { flex: 1; min-width: 180px; }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border-radius: 6px; margin-bottom: 2px; }
.fr-who { display: flex; align-items: center; gap: 12px; flex: 1; color: var(--text); text-decoration: none; min-width: 0; }
.fr-name { font-weight: 800; }
.fr-sub { font-size: 13px; }
.fr-btns { display: flex; gap: 8px; }
.seg.wrap { flex-wrap: wrap; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.card h3 { margin: 0 0 10px; }

/* account settings */
.account-page { max-width: 720px; }
.acct-line { display: flex; gap: 12px; margin-bottom: 8px; }
.acct-line .muted { width: 90px; }
.acct-card .auth-field { margin-bottom: 12px; }
.avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-picker .ap { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; cursor: pointer; }
.avatar-picker .ap.on { border-color: var(--green-hi); }
.danger-zone { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
textarea.input { resize: vertical; font: inherit; }

/* membership */
.membership-page { max-width: 880px; }
.mb-hero { text-align: center; margin: 10px 0 24px; }
.mb-hero h1 { margin: 6px 0; font-size: 36px; }
.mb-hero p { color: var(--text-2); max-width: 560px; margin: 0 auto; }
.mb-crown { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #c99a22); align-items: center; justify-content: center; color: #4a3507; box-shadow: 0 6px 18px rgba(242, 201, 76, .25); }
.mb-crown .ico { width: 36px; height: 36px; }
.mb-table { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mb-row { display: grid; grid-template-columns: 1fr 130px 130px; align-items: center; border-top: 1px solid var(--line); }
.mb-row:first-child { border-top: 0; }
.mb-row > div { padding: 12px 16px; }
.mb-headrow { background: var(--panel-2); font-family: var(--font-head); font-weight: 800; font-size: 18px; }
.mb-col { text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mb-col.vip { background: rgba(242, 201, 76, .06); color: var(--gold); }
.mb-col.vip .ico { width: 20px; height: 20px; }
.mb-headrow .mb-col.vip { color: var(--gold); }
.mb-label { font-weight: 600; }
.mb-mark { display: inline-flex; width: 26px; height: 26px; }
.mb-mark svg { width: 100%; height: 100%; }
.mb-mark.off { opacity: .45; }
.mb-buy { max-width: 520px; margin: 22px auto 40px; display: flex; flex-direction: column; gap: 12px; }
.mb-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mb-plan { background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 14px; text-align: left; color: var(--text); cursor: pointer; font: inherit; }
.mb-plan.on { border-color: var(--gold); background: rgba(242, 201, 76, .06); }
.mb-plan-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.mb-save { font-size: 11px; background: var(--gold); color: #3a2a05; padding: 2px 6px; border-radius: 8px; }
.mb-plan-price { font-size: 22px; font-weight: 800; margin-top: 4px; }
.mb-plan-price .muted { font-size: 14px; font-weight: 500; }
.mb-fine { font-size: 13px; text-align: center; }
@media (max-width: 600px) { .mb-row { grid-template-columns: 1fr 74px 74px; } .mb-row > div { padding: 10px 8px; } }

/* ads */
.ad-slot { margin: 16px auto; max-width: 970px; text-align: center; }
.ad-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; z-index: 900; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; box-shadow: 0 10px 30px #0008; }
.consent-banner p { margin: 0; flex: 1; min-width: 220px; font-size: 14px; }
.consent-banner > div { display: flex; gap: 8px; }

/* board vote */
.vote-panel h3 { margin: 0 0 6px; }
.vote-time { font-family: var(--font-mono); font-weight: 600; color: var(--gold); margin: 6px 0 12px; }
.vote-grid { display: flex; flex-direction: column; gap: 10px; }
.vote-card { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--panel-2); border: 2px solid var(--line); border-radius: 10px; padding: 10px; color: var(--text); cursor: pointer; font: inherit; }
.vote-card:hover { border-color: var(--gray-hi); }
.vote-card.on { border-color: var(--green-hi); background: rgba(95, 165, 100, .1); }
.vc-preview { flex: none; pointer-events: none; }
.vc-text { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.vc-text b { font-family: var(--font-head); font-size: 17px; }
.vote-status { font-size: 13.5px; color: var(--text-2); margin-top: 12px; }
.vote-reel { font-family: var(--font-head); font-weight: 800; font-size: 30px; text-align: center; padding: 18px; border-radius: 10px; background: var(--bg-3); margin: 10px 0; }
.vote-reel.spinning { color: var(--text-2); }
.vote-reel.landed { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }

/* VIP stats */
.pf-stats { margin-top: 14px; }
.pf-teaser { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; border-color: rgba(242, 201, 76, .35); }
.pf-teaser p { margin: 4px 0 0; }
.pf-chart { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 10px 0 4px; }
.rating-svg { width: 100%; height: auto; display: block; }
.rg-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.rg-lab { fill: var(--text-3); font: 600 11px var(--font-mono); }
.rg-line { fill: none; stroke: var(--green-hi); stroke-width: 2.5; stroke-linejoin: round; }
.rg-area { fill: rgba(113, 183, 117, .12); }
.rg-dot { fill: var(--green-hi); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pf-grid .card { margin: 0; }
.btn-review { background: #2d6a8f; box-shadow: 0 3px 0 0 #1b4560; }
.btn-review:hover { background: #3880ab; }

/* legal pages and footer */
.legal-page { max-width: 820px; line-height: 1.6; }
.legal-page h1 { margin: 10px 0 2px; }
.legal-page h2 { font-size: 20px; margin: 22px 0 6px; }
.legal-page p { color: var(--text-2); margin: 0 0 10px; }
.legal-intro { font-size: 17px; color: var(--text) !important; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.legal-nav a { padding: 6px 12px; border-radius: 16px; background: var(--panel); color: var(--text-2); text-decoration: none; font-weight: 700; font-size: 13.5px; }
.legal-nav a.on { background: var(--green-sh); color: #fff; }
.legal-warn { background: rgba(242, 201, 76, .12); border: 1px solid rgba(242, 201, 76, .45); color: #f6dc8a; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.legal-lang { font-style: italic; }
.legal-foot { margin-top: 26px !important; font-size: 13px; }
.side-legal { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 14px 10px; font-size: 11.5px; }
.side-legal a, .side-legal button { color: var(--text-3); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.side-legal a:hover, .side-legal button:hover { color: var(--text); }
.side-legal .copy { width: 100%; color: var(--text-3); opacity: .8; }
.terms-check { align-items: flex-start; }
.terms-check a { color: var(--green-hi); }
.terms-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; z-index: 899; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; box-shadow: 0 10px 30px #0008; }
.terms-banner p { margin: 0; flex: 1; min-width: 220px; font-size: 14px; }
.terms-banner a { color: var(--green-hi); }
.guest-name { flex: 1; min-width: 180px; display: flex; align-items: center; padding: 0 12px; background: var(--bg-3); border-radius: 6px; font-weight: 800; font-family: var(--font-head); font-size: 18px; }

/* staff panel */
.admin-page { max-width: 1200px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.admin-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.admin-stat b { font-family: var(--font-head); font-size: 24px; }
.admin-body { margin-top: 12px; }
.admin-split { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 14px; align-items: start; }
.admin-split > div:first-child .input { width: 100%; margin-bottom: 8px; }
.admin-results { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
.admin-row { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--panel); border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; color: var(--text); cursor: pointer; font: inherit; }
.admin-row:hover { background: var(--hover); }
.admin-row.on { border-color: var(--green); }
.ar-main { min-width: 0; }
.ar-name { font-weight: 800; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ar-sub { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ad-head h2 { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ad-actions { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.ad-actions h3 { margin: 0 0 8px; font-size: 16px; }
.tag.role-admin { background: #7a3db8; color: #fff; }
.tag.role-staff { background: #2d6a8f; color: #fff; }
.tag.banned { background: #b3362a; color: #fff; }
.log-line { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.staff-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #2d6a8f; color: #fff; font-size: 11px; font-weight: 800; vertical-align: middle; }
@media (max-width: 760px) { .admin-split { grid-template-columns: 1fr; } }

/* phones: the sidebar is a single top row, so the legal links live in the account menu instead */
@media (max-width: 860px) {
  .side-legal { display: none; }
  .signup-cta .lbl { display: none; }
}
.am-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.am-legal a, .am-legal button { color: var(--text-3); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.am-legal a:hover, .am-legal button:hover { color: var(--text); }
.am-legal .copy { width: 100%; color: var(--text-3); }
/* short screens: the sidebar scrolls instead of cutting off the bottom */
@media (min-width: 861px) { .sidebar { overflow-x: hidden; overflow-y: auto; } }

/* sign-up protection: the hidden field and the Turnstile check */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-box:empty { display: none; }
.turnstile-box { min-height: 65px; }

/* block and report */
.pf-safety { display: flex; gap: 4px; flex-basis: 100%; }
.pf-safety .btn { color: var(--text-3); font-weight: 600; }
.report-body { display: flex; flex-direction: column; gap: 12px; width: min(420px, 78vw); max-width: 100%; }
.report-reasons { display: flex; flex-direction: column; gap: 6px; }
.report-reasons .check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.report-body textarea { resize: vertical; min-height: 70px; font: inherit; width: 100%; box-sizing: border-box; }

/* staff panel: reports */
.tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--red-soft); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.seg.seg-sm { margin-bottom: 10px; }
.seg.seg-sm button { padding: 5px 12px; font-size: 13px; }
.report-list { display: flex; flex-direction: column; gap: 10px; }
.report-card { display: flex; flex-direction: column; gap: 8px; }
.report-card.open { border-left: 3px solid var(--gold); }
.rc-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rc-detail { margin: 0; padding: 8px 10px; background: var(--panel-2, #0002); border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.report-card a { display: inline-flex; gap: 6px; align-items: center; color: var(--green-hi); font-weight: 600; }
.link-btn { background: none; border: 0; padding: 0; color: var(--green-hi); font: inherit; font-weight: 700; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.err-stack { font-size: 12px; max-height: 180px; overflow: auto; }
/* a reported game's chat as it stood, folded under the report, the reported player's lines marked */
.rc-chat { background: var(--panel-2); border-radius: 6px; padding: 6px 10px; font-size: 13.5px; }
.rc-chat summary { cursor: pointer; font-weight: 700; color: var(--text-2); }
.rc-chat[open] summary { margin-bottom: 6px; }
.rc-chat .chat-msg { margin-bottom: 4px; }
.rc-chat .rc-them { background: #4a3c2240; border-inline-start: 3px solid var(--gold); padding-inline-start: 6px; border-radius: 2px; }
.report-card .rc-game.muted { font-size: 13px; }