:root {
  color-scheme: light;
  --bg: #edf3fb;
  --card: #ffffff;
  --card-soft: #f3f6fb;
  --text: #0d1b32;
  --muted: #64748b;
  --accent: #176bff;
  --accent-dark: #0f3f91;
  --accent-text: #ffffff;
  --success: #32c88a;
  --warning: #f7bf4f;
  --danger: #ff6b7a;
  --line: rgba(20, 46, 84, .11);
  --shadow: 0 16px 42px rgba(27, 54, 93, .08);
  --keyboard-offset: 0px;
}
* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; overscroll-behavior-y: none; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { min-height: 50px; border: 0; border-radius: 15px; cursor: pointer; font-weight: 850; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.shell { width: min(100%, 520px); margin: 0 auto; padding: 14px 14px calc(105px + env(safe-area-inset-bottom)); }
.app-head { min-height: 130px; display: flex; align-items: center; justify-content: space-between; padding: 15px 8px 10px; }
.app-head .eyebrow { margin: 0 0 8px; }
.app-head h1 { margin: 0; font-size: 42px; }
.ball-small { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: #dceeff; font-size: 38px; transform: rotate(5deg); box-shadow: 0 14px 35px rgba(35, 78, 125, .16); }
.title-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 3px 10px; }
.title-row h2 { margin: 0; }
.title-actions { display: flex; align-items: center; gap: 6px; }
.mini { min-height: 36px; padding: 0 12px; font-size: 12px; }
.games { display: grid; gap: 10px; }
.game-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; width: 100%; min-height: 112px; padding: 17px 48px 17px 18px; text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.game-card.is-confirmed { border-color: rgba(20, 157, 101, .38); }
.game-card.is-completed { background: #f8fafc; border-color: var(--line); }
.game-card.is-completed .game-day, .game-card.is-completed strong { color: #536277; }
.game-card .game-day { color: var(--accent); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.game-card strong { grid-column: 1; font-size: 25px; letter-spacing: -.03em; }
.game-card .game-info { grid-column: 1 / span 2; color: var(--muted); font-size: 12px; }
.game-status { align-self: start; justify-self: end; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; }
.game-status.confirmed { color: #071d15; background: var(--success); }
.game-status.pending { color: #241603; background: var(--warning); }
.game-status.completed { color: #46566b; background: #e7ecf3; }
.game-card i { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); font-size: 28px; color: var(--muted); font-style: normal; }
.history-label { margin: 14px 4px 0; color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.empty-games { margin-top: 0; text-align: center; }
.profile-card { border-color: rgba(25, 118, 210, .3); }
.profile-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profile-summary .eyebrow { margin: 0 0 5px; }
.profile-summary strong { font-size: 17px; }
.profile-summary-person { min-width: 0; display: flex; align-items: center; gap: 10px; }
.profile-summary-person > div { min-width: 0; }
.profile-summary-person strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-avatar { flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; color: #0f5a9e; background: #dceeff; border-radius: 50%; font-weight: 900; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-actions { display: flex; gap: 6px; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 8px; display: grid; grid-template-columns: repeat(3, 1fr); width: min(calc(100% - 20px), 500px); min-height: 66px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 40px rgba(25, 49, 80, .18); backdrop-filter: blur(18px); transform: translateX(-50%); }
.bottom-nav button { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px; color: var(--muted); background: transparent; border-radius: 16px; font-weight: 750; touch-action: manipulation; }
.bottom-nav button span { font-size: 20px; filter: grayscale(1); opacity: .72; }
.bottom-nav button b { font-size: 10px; }
.bottom-nav button.active { color: var(--accent); background: #edf6ff; }
.bottom-nav button.active span { filter: none; opacity: 1; transform: translateY(-1px); }
body.keyboard-open .bottom-nav { display: none !important; }
body.keyboard-open .shell { padding-bottom: calc(28px + var(--keyboard-offset) + env(safe-area-inset-bottom)); }
body.keyboard-open .account-card { scroll-margin-bottom: calc(28px + var(--keyboard-offset)); }
body.keyboard-open .account-card form:not(.hidden) { scroll-margin-block: 22px calc(28px + var(--keyboard-offset)); }
body.keyboard-open input:focus, body.keyboard-open textarea:focus, body.keyboard-open select:focus { scroll-margin-block: 30vh; }
.stats-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.stats-summary > div { display: grid; gap: 2px; padding: 14px 8px; text-align: center; background: var(--card-soft); border: 1px solid var(--line); border-radius: 16px; }
.stats-summary strong { font-size: 25px; letter-spacing: -.04em; }
.stats-summary span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.stats-note { margin: 14px 2px 0; font-size: 11px; line-height: 1.45; }
.stats-head { margin-bottom: 0; }
.avatar-profile-button { display: grid; place-items: center; min-height: 36px; padding: 0 11px; color: var(--text); cursor: pointer; }
.stats-games { margin-top: 15px; border-top: 1px solid var(--line); }
.goals-row { grid-template-columns: minmax(0, 1fr) 64px auto; align-items: end; gap: 9px; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.goals-game { min-width: 0; align-self: center; }
.goals-game strong, .goals-game small { display: block; }
.goals-game strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.goals-game small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.goals-row input { min-height: 38px; padding-inline: 8px; text-align: center; }
.goals-row button { min-height: 38px; }
.stats-empty { margin: 16px 0 0; font-size: 12px; line-height: 1.45; }
.leaderboard-head, .leaderboard-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 44px 38px; align-items: center; gap: 6px; }
.leaderboard-head { margin-top: 20px; padding: 0 8px 8px; color: var(--muted); font-size: 9px; font-weight: 850; text-align: center; text-transform: uppercase; }
.leaderboard-head span:first-child { text-align: left; }
.leaderboard-row { width: 100%; min-height: 52px; padding: 7px 8px; color: var(--text); background: transparent; border-radius: 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 800; text-align: center; }
.leaderboard-row.is-me { margin-inline: -5px; padding-inline: 13px; background: #edf6ff; border-color: rgba(25, 118, 210, .18); border-radius: 13px; }
.leaderboard-player { min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; }
.leaderboard-player > b { flex: 0 0 24px; display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); background: #edf1f6; border-radius: 8px; font-size: 10px; }
.leaderboard-player > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player > i { padding: 3px 5px; color: #0f5a9e; background: #dceeff; border-radius: 99px; font-size: 8px; font-style: normal; }
.leaderboard-avatar { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; color: #0f5a9e; background: #dceeff; border-radius: 50%; font-size: 10px; }
.leaderboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.leaderboard-note { margin: 14px 2px 0; font-size: 10px; line-height: 1.45; }
.profile-back { margin-bottom: 18px; }
.player-profile-hero { display: flex; align-items: center; gap: 16px; }
.player-profile-hero .eyebrow { margin: 0 0 5px; }
.player-profile-hero h2 { font-size: 27px; }
.player-avatar-wrap { position: relative; flex: 0 0 78px; width: 78px; height: 78px; }
.player-avatar { display: grid; place-items: center; width: 78px; height: 78px; object-fit: cover; color: #0f5a9e; background: #dceeff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 8px 24px rgba(35, 78, 125, .18); font-size: 30px; font-weight: 900; }
.avatar-upload { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 29px; height: 29px; color: white; background: var(--accent); border: 2px solid white; border-radius: 50%; font-size: 13px; cursor: pointer; }
.player-rank { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.player-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.player-numbers > div { display: grid; gap: 2px; padding: 13px 8px; text-align: center; background: var(--card-soft); border-radius: 15px; }
.player-numbers strong { font-size: 24px; }
.player-numbers span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.activity-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.activity-summary > div { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; }
.activity-summary p { margin: 0; }
.activity-summary strong, .activity-summary small { display: block; }
.activity-summary strong { font-size: 14px; }
.activity-summary small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.activity-icon { font-size: 20px; }
.motivation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 15px; background: linear-gradient(135deg, #e3f2ff, #f2f9ff); border: 1px solid rgba(25, 118, 210, .22); border-radius: 17px; }
.motivation > div { min-width: 0; }
.motivation strong { font-size: 15px; }
.motivation p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.motivation button { flex: 0 0 auto; }
.tracker-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tracker-strip > div { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 11px 8px; background: var(--card-soft); border: 1px solid var(--line); border-radius: 14px; }
.tracker-strip > div > span { font-size: 18px; }
.tracker-strip p { min-width: 0; margin: 0; }
.tracker-strip strong, .tracker-strip small { display: block; }
.tracker-strip strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tracker-strip small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.2; }
.tracker-block { margin-top: 22px; }
.tracker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tracker-head h3 { margin: 0; font-size: 14px; }
.tracker-head > span { color: var(--muted); font-size: 9px; font-weight: 800; text-align: right; text-transform: uppercase; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.achievement-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; min-height: 82px; padding: 11px; overflow: hidden; background: #f4f6f9; border: 1px solid var(--line); border-radius: 15px; }
.achievement-card.earned { background: linear-gradient(145deg, #fff8dc, #fffdf5); border-color: rgba(218, 164, 32, .38); box-shadow: 0 8px 22px rgba(129, 94, 9, .07); }
.achievement-medal { display: grid; place-items: center; align-self: start; width: 38px; height: 38px; background: #e7ebf1; border-radius: 12px; font-size: 22px; filter: grayscale(1); opacity: .46; }
.achievement-card.earned .achievement-medal { background: #fff0b9; filter: none; opacity: 1; transform: rotate(-3deg); }
.achievement-copy { min-width: 0; }
.achievement-copy strong, .achievement-copy small { display: block; }
.achievement-copy strong { font-size: 11px; line-height: 1.25; }
.achievement-copy small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.3; }
.achievement-state { margin-top: 7px; color: var(--muted); font-size: 8px; font-weight: 800; }
.achievement-card.earned .achievement-state { color: #8a6300; }
.achievement-progress { height: 4px; margin-top: 5px; overflow: hidden; background: #dfe5ed; border-radius: 99px; }
.achievement-progress i { display: block; height: 100%; background: #aab5c3; border-radius: inherit; }
.achievement-card.earned .achievement-progress i { background: linear-gradient(90deg, #e3a915, #ffce48); }
.activity-calendar { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start; padding: 13px; background: var(--card-soft); border: 1px solid var(--line); border-radius: 16px; }
.calendar-weekdays { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; color: var(--muted); font-size: 7px; line-height: 12px; }
.calendar-cells { display: grid; grid-template-columns: repeat(12, minmax(8px, 1fr)); grid-template-rows: repeat(7, 12px); grid-auto-flow: column; gap: 3px; }
.calendar-day { min-width: 0; background: #e2e8f0; border: 1px solid transparent; border-radius: 3px; }
.calendar-day.played { background: #2a84da; border-color: #1976d2; box-shadow: 0 2px 5px rgba(25, 118, 210, .2); }
.calendar-day.multiple { background: #0f5598; border-color: #0b447a; }
.calendar-day.future { opacity: .28; }
.calendar-legend { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 2px; color: var(--muted); font-size: 8px; }
.calendar-legend i { width: 9px; height: 9px; background: #e2e8f0; border-radius: 3px; }
.calendar-legend i.active { background: #2a84da; }
.calendar-best { margin: 8px 2px 0; color: var(--muted); font-size: 9px; }
.calendar-best strong { color: var(--text); }
.player-recent { margin-top: 22px; }
.player-recent h3 { margin: 0 0 8px; font-size: 14px; }
.player-game-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; border-top: 1px solid var(--line); }
.player-game-row strong { font-size: 11px; text-transform: capitalize; }
.player-game-row > b { font-size: 11px; }
.calorie-note { margin: 14px 2px 0; font-size: 9px; line-height: 1.4; }
.auth-card { border-color: rgba(25, 118, 210, .28); box-shadow: 0 18px 50px rgba(39, 80, 128, .08); }
.auth-card h2 { font-size: 30px; }
.account-card .profile-summary { align-items: flex-start; }
.account-card .profile-summary > div { min-width: 0; }
.account-card .muted { margin: 6px 0 0; line-height: 1.4; }
.account-card form { padding-top: 14px; border-top: 1px solid var(--line); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.settings-head .eyebrow { margin: 0 0 5px; }
.logout { width: 100%; margin-top: 12px; }
.field-hint { color: var(--muted); font-size: 10px; font-weight: 500; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 88px; }
.password-toggle { position: absolute; top: 50%; right: 6px; min-height: 34px; padding: 0 9px; color: var(--accent); background: #edf6ff; border-radius: 9px; font-size: 11px; transform: translateY(-50%); touch-action: manipulation; }
.password-toggle[aria-pressed="true"] { color: #3d4c60; background: #e7ecf3; }
.field-warning { color: #a04900; font-size: 10px; font-weight: 700; line-height: 1.35; }
.session-note { margin: -2px 2px 0; color: #34725a; font-size: 10px; font-weight: 700; line-height: 1.35; }
.consent { grid-template-columns: 22px 1fr; align-items: start; gap: 9px; font-weight: 500; line-height: 1.4; }
.consent input { width: 20px; min-height: 20px; margin: 0; accent-color: var(--accent); }
a { color: var(--accent); }
.button-link { display: grid; place-items: center; width: 100%; min-height: 50px; margin-top: 18px; padding: 0 16px; border-radius: 15px; font-weight: 850; text-decoration: none; }
.full-button { width: 100%; }
.text-button { min-height: 32px; padding: 0; color: var(--accent); background: transparent; font-size: 12px; }
.forgot-note { margin: 16px 2px; font-size: 11px; line-height: 1.45; }
.hero { min-height: 285px; padding: 24px; position: relative; overflow: hidden; border-radius: 30px; background: radial-gradient(circle at 82% 18%, rgba(25, 118, 210, .18) 0 12%, transparent 37%), linear-gradient(135deg, #dceeff, #f4f9ff); border: 1px solid rgba(25, 118, 210, .22); }
.hero::after { content: ""; position: absolute; inset: auto -60px -130px auto; width: 300px; height: 300px; border: 1px solid rgba(25, 118, 210, .18); border-radius: 50%; }
.ball { position: absolute; right: 25px; top: 55px; font-size: 72px; filter: drop-shadow(0 15px 20px rgba(35, 78, 125, .2)); transform: rotate(12deg); }
.back { position: relative; z-index: 2; min-height: 34px; padding: 0 11px; color: var(--text); background: rgba(255, 255, 255, .72); border: 1px solid var(--line); font-size: 12px; }
.eyebrow { margin: 52px 0 6px; color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(45px, 13vw, 68px); line-height: .95; letter-spacing: -.06em; }
h2 { margin: 3px 0 0; font-size: 25px; letter-spacing: -.03em; }
h3 { color: var(--text); }
.meta { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.meta span { padding: 8px 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .72); border-radius: 100px; font-size: 13px; }
.card { margin-top: 12px; padding: 20px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.section-head .eyebrow, .card > .eyebrow, .game-state-card .eyebrow { margin: 0 0 5px; }
.meter { width: 82px; height: 7px; background: #e3eaf3; border-radius: 99px; overflow: hidden; }
.meter i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s ease; }
.roster { margin: 20px 0; padding: 0; list-style-position: inside; }
.roster-group { margin-top: 20px; padding-top: 2px; }
.roster-group + .roster-group { border-top: 1px solid var(--line); padding-top: 18px; }
.roster-group h3 { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.roster-group h3 span { color: var(--text); }
.roster-group .roster { margin: 8px 0 15px; }
.substitutes { background: rgba(98, 185, 255, .035); margin-inline: -10px; padding-inline: 10px; border-radius: 14px; }
.reserve h3 { color: var(--warning); }
.roster li { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.roster li::before { content: attr(data-number); width: 23px; color: var(--muted); font-variant-numeric: tabular-nums; }
.roster .empty { color: var(--muted); }
.name { flex: 1; font-weight: 700; }
.you, .paid, .checking, .guest-badge { padding: 4px 7px; border-radius: 99px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.you { color: #0f5a9e; background: #e1f0ff; }
.guest-badge { color: #66500b; background: #fff1b9; }
.paid { color: #061c14; background: var(--success); }
.checking { color: #271802; background: var(--warning); }
.remove-guest { min-height: 28px; padding: 0 8px; color: #b32635; background: #fff0f2; border: 1px solid #ffd0d5; font-size: 10px; }
.actions { display: grid; gap: 8px; }
.payment-debt-warning { display: grid; gap: 12px; margin: 18px 0 10px; padding: 16px; background: #fff5e6; border: 1px solid #f2c477; border-radius: 17px; }
.payment-debt-warning strong { display: block; color: #663b00; font-size: 16px; }
.payment-debt-warning p { margin: 6px 0 0; color: #765832; line-height: 1.45; }
.payment-debt-warning button { width: 100%; border-color: #d69b3c; }
.primary { background: var(--accent); color: var(--accent-text); }
.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.danger-button { width: 100%; margin-top: 22px; color: #2b0509; background: var(--danger); }
.delete-hint { margin: 8px 4px 0; text-align: center; font-size: 11px; line-height: 1.4; }
.game-state-card { display: flex; align-items: center; gap: 14px; border-color: rgba(255, 189, 89, .38); }
.game-state-card.confirmed { border-color: rgba(53, 215, 149, .42); }
.game-state-card.completed { border-color: var(--line); }
.game-state-card .state-icon { flex: 0 0 50px; display: grid; place-items: center; width: 50px; height: 50px; color: #261702; background: var(--warning); border-radius: 16px; font-size: 24px; font-weight: 900; }
.game-state-card.confirmed .state-icon { color: #061c14; background: var(--success); }
.game-state-card.completed .state-icon { color: #46566b; background: #e7ecf3; }
.game-state-card p:last-child { margin: 7px 0 0; line-height: 1.45; }
.payment-card { text-align: center; border-color: rgba(98, 185, 255, .34); }
.payment-card > img { display: block; width: min(100%, 290px); aspect-ratio: 1; object-fit: contain; margin: 18px auto 12px; background: white; border-radius: 18px; padding: 10px; }
.payment-card #save-qr { width: min(100%, 290px); }
.save-hint { max-width: 330px; margin: 8px auto 18px; font-size: 12px; line-height: 1.4; }
.payment-note { margin: 16px 0; font-weight: 800; }
.receipt-state { display: grid; gap: 14px; padding: 16px; text-align: left; background: var(--card-soft); border: 1px solid var(--line); border-radius: 17px; }
.receipt-state strong { font-size: 17px; }
.receipt-state p { margin: 5px 0 0; line-height: 1.4; }
.receipt-pending { border-color: rgba(255, 189, 89, .45); }
.receipt-approved { border-color: rgba(53, 215, 149, .48); }
.receipt-rejected { border-color: rgba(255, 113, 128, .48); }
.file-button { display: grid; place-items: center; min-height: 48px; border-radius: 14px; font-size: 14px; cursor: pointer; }
.muted, .status { color: var(--muted); }
form { display: grid; gap: 13px; margin-top: 18px; }
.friend-form { margin-top: 16px; padding: 16px; background: #f6f9fd; border: 1px solid var(--line); border-radius: 17px; }
.friend-form h3, .friend-form p { margin: 0; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 45px; padding: 0 12px; color: var(--text); background: #ffffff; border: 1px solid var(--line); border-radius: 11px; font-size: 16px; line-height: 1.2; }
input[type="file"] { padding: 10px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.payments-list { margin-top: 24px; }
.payments-list > h3 { margin: 0 0 8px; }
.payment-row { display: grid; grid-template-columns: 50px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.payment-row > span { min-width: 0; }
.payment-row small { display: block; margin: 3px 0 6px; color: var(--muted); font-size: 10px; font-weight: 600; }
.receipt-thumb, .receipt-empty { width: 50px; height: 50px; border-radius: 10px; }
.receipt-thumb { object-fit: cover; background: white; cursor: zoom-in; }
.receipt-empty { display: grid; place-items: center; color: var(--muted); background: #eef2f7; }
.status-badge { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 9px; }
.status-badge.approved { color: #061c14; background: var(--success); }
.status-badge.pending { color: #271802; background: var(--warning); }
.status-badge.rejected { color: #2b0509; background: var(--danger); }
.status-badge.none { color: var(--muted); background: #eef2f7; }
.friend-payments { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.friend-payment { display: grid; gap: 12px; padding: 16px; background: var(--card-soft); border: 1px solid var(--line); border-radius: 17px; }
.friend-payment strong { display: block; margin-top: 3px; font-size: 16px; }
.friend-payment p { margin: 5px 0 0; }
.friend-payment-label { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.friend-paid { justify-self: start; padding: 7px 10px; color: #061c14; background: var(--success); border-radius: 999px; font-size: 11px; }
.reserve-payment { border-color: rgba(255, 174, 48, .42); }
.payment-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.payment-actions button { min-height: 38px; padding: 0 10px; font-size: 12px; }
.payment-actions .approve { color: #061c14; background: var(--success); }
.payment-actions .reject { color: #2b0509; background: var(--danger); }
.payment-actions .remove-player { grid-column: 1 / -1; min-height: 38px; color: #9b2230; background: #fff0f2; border: 1px solid #ffd0d5; }
.web-accounts-list { margin-top: 18px; }
.web-account-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.web-account-row span { min-width: 0; }
.web-account-row strong, .web-account-row small { display: block; }
.web-account-row small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.privacy-page { max-width: 700px; padding-top: 28px; }
.privacy-page .card { margin-top: 18px; }
.privacy-page h1 { margin: 4px 0 24px; font-size: clamp(38px, 9vw, 58px); }
.privacy-page h2 { margin-top: 28px; font-size: 21px; }
.privacy-page p { line-height: 1.65; }
.back-link { font-weight: 800; text-decoration: none; }
.status { min-height: 20px; text-align: center; font-size: 13px; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: no-preference) { .card { animation: rise .35s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } } }
@media (max-width: 380px) { .app-head h1 { font-size: 36px; } .grid { grid-template-columns: 1fr; } .profile-summary { align-items: flex-start; } .profile-actions { flex-direction: column; } .profile-summary-person { align-items: flex-start; } .goals-row { grid-template-columns: minmax(0, 1fr) 60px; } .goals-row button { grid-column: 1 / -1; } .activity-summary { grid-template-columns: 1fr; } .motivation { align-items: flex-start; flex-direction: column; } .roster li { gap: 5px; } .you, .paid, .checking, .guest-badge { font-size: 8px; padding-inline: 5px; } }
@media (max-width: 380px) { .activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .activity-summary > div:last-child { grid-column: 1 / -1; } .achievement-grid { grid-template-columns: 1fr; } .tracker-strip { grid-template-columns: 1fr; } .tracker-strip > div { min-height: 52px; } }

/* Visual system: Premium Sport + Street Football */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-icon, .inline-icon { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body { min-height: 100vh; background:
  radial-gradient(circle at 88% 4%, rgba(23, 107, 255, .11), transparent 28%),
  radial-gradient(circle at 2% 55%, rgba(50, 200, 138, .07), transparent 24%),
  var(--bg); }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(23, 107, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 107, 255, .06) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 50%); }
.shell { padding-inline: 16px; }
.app-head { min-height: 124px; padding: 22px 5px 14px; }
.app-head-copy { min-width: 0; }
.club-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.club-kicker > span { width: 7px; height: 7px; background: var(--success); border: 2px solid rgba(50, 200, 138, .24); border-radius: 50%; box-shadow: 0 0 0 4px rgba(50, 200, 138, .12); }
.app-head h1 { overflow: hidden; color: var(--text); font-size: clamp(34px, 10vw, 46px); line-height: .98; letter-spacing: -.055em; text-overflow: ellipsis; white-space: nowrap; }
.club-crest { flex: 0 0 70px; display: grid; place-items: center; align-content: center; width: 70px; height: 76px; overflow: hidden; color: white; background: linear-gradient(150deg, #10284e, #176bff); border: 1px solid rgba(255,255,255,.38); border-radius: 24px; box-shadow: 0 16px 36px rgba(19, 72, 153, .22); transform: rotate(3deg); }
.club-crest svg { width: 31px; height: 31px; fill: rgba(255,255,255,.1); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); }
.club-crest small { margin-top: 5px; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
.card { border-color: rgba(26, 53, 89, .09); border-radius: 25px; box-shadow: var(--shadow); }
.profile-summary { min-height: 70px; padding: 14px 16px; background: rgba(255,255,255,.86); backdrop-filter: blur(16px); }
.profile-summary .eyebrow { color: #7990ad; font-size: 8px; letter-spacing: .15em; }
.mini-avatar { width: 42px; height: 42px; flex-basis: 42px; color: white; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 8px 18px rgba(23,107,255,.2); }
.title-row { margin-top: 24px; margin-bottom: 12px; }
.title-row h2 { font-size: 19px; letter-spacing: -.035em; }
.games { gap: 12px; }
.game-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 17px; grid-template-rows: auto auto auto auto; gap: 8px 13px; min-height: 174px; padding: 17px 13px 15px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,250,255,.98)); border: 1px solid rgba(22, 59, 110, .1); border-radius: 24px; box-shadow: 0 17px 44px rgba(27, 54, 93, .09); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.game-card::after { content: ""; position: absolute; top: -48px; right: -45px; width: 130px; height: 130px; border: 1px solid rgba(23,107,255,.09); border-radius: 50%; box-shadow: inset 0 0 0 16px rgba(23,107,255,.025); pointer-events: none; }
.game-card:active { transform: scale(.985); box-shadow: 0 9px 24px rgba(27,54,93,.1); }
.game-card.is-confirmed { border-color: rgba(50, 200, 138, .36); background: linear-gradient(145deg, #fff, #f4fffa); }
.game-card.is-completed { background: linear-gradient(145deg, #f8fafc, #f2f5f9); opacity: .9; }
.game-date-badge { grid-column: 1; grid-row: 1 / span 4; display: grid; place-items: center; align-content: center; width: 58px; height: 66px; color: var(--accent); background: #eaf2ff; border: 1px solid rgba(23,107,255,.12); border-radius: 18px; }
.game-date-badge b { font-size: 23px; line-height: 1; letter-spacing: -.05em; }
.game-date-badge small { margin-top: 5px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.is-confirmed .game-date-badge { color: white; background: linear-gradient(145deg, #153b71, #176bff); border-color: transparent; box-shadow: 0 10px 23px rgba(23,107,255,.22); }
.is-completed .game-date-badge { color: #66768b; background: #e9edf3; border-color: transparent; box-shadow: none; }
.game-card-main { grid-column: 2; grid-row: 1; min-width: 0; display: grid; gap: 3px; }
.game-card .game-day { overflow: hidden; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.game-card-main > strong { color: var(--text); font-size: 22px; line-height: 1.08; letter-spacing: -.045em; }
.game-location { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.game-location .inline-icon { width: 12px; height: 12px; }
.game-status { grid-column: 2; grid-row: 2; justify-self: start; padding: 6px 9px; font-size: 9px; letter-spacing: .02em; }
.game-status.confirmed { color: #073b28; background: #bff3dc; }
.game-status.pending { color: #5f3d00; background: #fff0c8; }
.game-progress { grid-column: 2; grid-row: 3; align-self: end; height: 6px; overflow: hidden; background: #e5ebf3; border-radius: 99px; }
.game-progress > i { position: static; display: block; height: 100%; color: inherit; background: linear-gradient(90deg, var(--accent), #62a0ff); border-radius: inherit; transform: none; }
.is-confirmed .game-progress > i { background: linear-gradient(90deg, #1cb978, #55dba5); }
.game-card .game-info { grid-column: 2; grid-row: 4; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.game-info .inline-icon { width: 13px; height: 13px; }
.game-chevron { grid-column: 3; grid-row: 1 / span 4; align-self: center; position: static !important; color: #9aabc0 !important; font-size: 25px !important; transform: none !important; }
.empty-games { display: grid; place-items: center; min-height: 190px; text-align: center; }
.empty-games-icon { display: grid; place-items: center; width: 54px; height: 54px; color: var(--accent); background: #eaf2ff; border-radius: 18px; }
.empty-games-icon .inline-icon { width: 25px; height: 25px; }
.empty-games strong { margin-top: 12px; font-size: 16px; }
.empty-games small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.bottom-nav { bottom: 9px; min-height: 70px; padding: 7px 9px calc(7px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); border-color: rgba(20,46,84,.1); border-radius: 25px; box-shadow: 0 20px 55px rgba(19, 46, 87, .2); }
.bottom-nav button { position: relative; gap: 4px; min-height: 54px; color: #7c8da4; border-radius: 18px; }
.bottom-nav button b { font-size: 9px; letter-spacing: .01em; }
.bottom-nav .nav-icon { width: 21px; height: 21px; }
.bottom-nav button.active { color: var(--accent); background: #eaf2ff; }
.bottom-nav button.active::after { content: ""; position: absolute; bottom: 4px; width: 16px; height: 3px; background: var(--accent); border-radius: 99px; }
.primary { background: linear-gradient(135deg, #176bff, #0f55d5); box-shadow: 0 10px 24px rgba(23,107,255,.18); }
.ghost { background: rgba(255,255,255,.66); }
button { transition: transform .14s ease, filter .14s ease; }
button:active { transform: scale(.98); }
input, select { min-height: 48px; background: #f9fbfe; border-color: rgba(20,46,84,.13); border-radius: 14px; }
input:focus, select:focus { outline: 3px solid rgba(23,107,255,.12); border-color: rgba(23,107,255,.55); }
.leaderboard-card, .player-profile-card, .stats-card, .account-card { overflow: hidden; }
.leaderboard-head, .leaderboard-row { grid-template-columns: minmax(0, 1fr) repeat(3, 34px); gap: 4px; }
.leaderboard-row { min-height: 58px; border-top-color: rgba(20,46,84,.08); }
.leaderboard-row.is-me { background: linear-gradient(135deg, #eaf2ff, #f5f9ff); }
.leaderboard-player > b { color: var(--accent); background: #eaf2ff; }
.player-avatar { border-width: 4px; box-shadow: 0 12px 30px rgba(23,107,255,.18); }
.player-numbers > div, .stats-summary > div { background: linear-gradient(145deg, #f7f9fd, #eef3fa); border: 1px solid rgba(20,46,84,.07); }
.activity-summary > div { background: rgba(250,252,255,.8); }
.motivation { background: linear-gradient(135deg, #e7f1ff, #f4f9ff 62%, #effcf7); }
.achievement-card.earned { background: linear-gradient(145deg, #fff8dc, #fffdf6); box-shadow: 0 10px 25px rgba(129,94,9,.07); }
.activity-calendar { background: linear-gradient(145deg, #f7f9fd, #f1f5fa); }
.hero { background: radial-gradient(circle at 82% 18%, rgba(23,107,255,.2) 0 12%, transparent 37%), linear-gradient(145deg, #e6f0ff, #f7fbff); box-shadow: var(--shadow); }
.game-state-card.confirmed { background: linear-gradient(145deg, #f4fff9, #fff); }
.status { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .game-card { animation: sport-card-in .4s cubic-bezier(.2,.8,.2,1) both; }
  .game-card:nth-child(2) { animation-delay: .06s; }
  .game-card:nth-child(3) { animation-delay: .12s; }
  @keyframes sport-card-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
}
@media (max-width: 380px) {
  .shell { padding-inline: 12px; }
  .app-head { min-height: 112px; }
  .club-crest { width: 62px; height: 68px; flex-basis: 62px; border-radius: 21px; }
  .club-crest svg { width: 27px; height: 27px; }
  .app-head h1 { font-size: 34px; }
  .game-card { grid-template-columns: 52px minmax(0, 1fr) 15px; gap-inline: 10px; }
  .game-date-badge { width: 52px; height: 62px; }
  .game-card-main > strong { font-size: 20px; }
}
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px; }
}

/* Club rating */
.leaderboard-head,.leaderboard-row{grid-template-columns:minmax(0,1fr) 46px 48px 38px;gap:5px}.leaderboard-name{min-width:0;display:grid;gap:2px;text-align:left}.leaderboard-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-name small{color:var(--muted);font-size:8px;font-weight:700}.rating-points{color:#0f58c7;font-size:13px}.leaderboard-note strong{color:#50627d}.rating-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 18px}.rating-breakdown>div{display:grid;place-items:center;gap:3px;min-height:58px;padding:8px 5px;background:linear-gradient(145deg,#edf4ff,#f8fbff);border:1px solid #dce9fa;border-radius:14px;text-align:center}.rating-breakdown strong{color:#1159c9;font-size:17px}.rating-breakdown span{color:var(--muted);font-size:8px;font-weight:800}

/* Game-style medal cabinet */
.achievement-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.achievement-card,.achievement-card.earned{display:flex;flex-direction:column;align-items:center;min-height:150px;padding:3px 2px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;text-align:center}.achievement-medal{--metal1:#bb7a40;--metal2:#6f351e;position:relative;display:grid;place-items:center;width:68px;height:68px;margin-top:18px;background:radial-gradient(circle at 35% 28%,#fff7 0 7%,transparent 8%),linear-gradient(145deg,var(--metal1),var(--metal2));border:3px solid color-mix(in srgb,var(--metal1) 70%,white);border-radius:50%;box-shadow:inset 0 0 0 4px #0002,inset 0 -10px 18px #0003,0 8px 16px #1a294028;filter:none;opacity:1;transform:none}.achievement-medal:before,.achievement-medal:after{content:"";position:absolute;z-index:-1;top:-19px;width:22px;height:36px;background:linear-gradient(90deg,#1c345f 0 34%,#e1e7f2 34% 66%,#1c345f 66%);border-radius:4px 4px 2px 2px}.achievement-medal:before{left:10px;transform:rotate(-12deg)}.achievement-medal:after{right:10px;transform:rotate(12deg)}.achievement-medal i{display:grid;place-items:center;width:45px;height:45px;background:#fff2;border:1px solid #fff4;border-radius:50%;font-size:25px;font-style:normal;text-shadow:0 2px 2px #0005}.tier-silver .achievement-medal{--metal1:#d7e0ea;--metal2:#718092}.tier-gold .achievement-medal{--metal1:#ffd45e;--metal2:#a26708}.tier-elite .achievement-medal{--metal1:#85d9ff;--metal2:#174a93}.achievement-card.locked .achievement-medal{filter:grayscale(1);opacity:.28}.achievement-copy{width:100%;margin-top:9px}.achievement-copy strong{font-size:10px}.achievement-copy small{min-height:21px;margin-top:3px;font-size:7px}.achievement-state{margin-top:5px;font-size:7px}.achievement-progress{width:72%;height:3px;margin:5px auto 0}.achievement-card.earned .achievement-state{color:#8a6300}.achievement-card.earned .achievement-progress{opacity:0}.achievement-card.earned .achievement-copy:after{content:"ПОЛУЧЕНО";display:inline-block;margin-top:4px;padding:2px 5px;color:#795207;background:#fff2bd;border-radius:99px;font-size:6px;font-weight:950;letter-spacing:.06em}.achievement-card.earned .achievement-state{display:none}

@media(max-width:380px){.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.leaderboard-head,.leaderboard-row{grid-template-columns:minmax(0,1fr) 42px 44px 32px}.leaderboard-avatar{display:none}.leaderboard-player{gap:5px}}

/* Datskiy FC — football game interface */
:root {
  color-scheme: dark;
  --bg: #06100e;
  --card: #101b19;
  --card-soft: #15231f;
  --text: #f5f8f6;
  --muted: #91a49e;
  --accent: #b8ff37;
  --accent-dark: #63bd29;
  --accent-text: #07110d;
  --success: #56e59d;
  --warning: #ffca57;
  --danger: #ff707b;
  --line: rgba(221, 255, 233, .12);
  --shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
body {
  background:
    radial-gradient(circle at 50% -5%, rgba(184, 255, 55, .18), transparent 29%),
    radial-gradient(circle at 110% 36%, rgba(30, 106, 255, .16), transparent 34%),
    linear-gradient(155deg, #071411 0%, #06100e 45%, #081713 100%);
  color: var(--text);
}
body::before {
  opacity: .24;
  background-image:
    linear-gradient(rgba(189, 255, 214, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 255, 214, .08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000 0 46%, transparent 82%);
}
body::after { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 49.8%,rgba(184,255,55,.08) 50%,transparent 50.2%); opacity:.55; }
.shell { padding-inline: 14px; }
.app-head { min-height: 126px; padding-inline: 2px; }
.club-kicker { color: var(--accent); font-size: 9px; }
.club-kicker > span { background: var(--accent); border-color: rgba(184,255,55,.3); box-shadow:0 0 0 4px rgba(184,255,55,.12),0 0 20px rgba(184,255,55,.45); }
.app-head h1 { color: var(--text); font-weight: 950; text-transform: uppercase; letter-spacing: -.065em; }
.club-crest { width: 68px; height: 78px; color:#07110d; background:linear-gradient(145deg,#d7ff73,#8ee327 60%,#4a9e20); border:1px solid rgba(255,255,255,.4); border-radius:0; clip-path:polygon(14% 0,86% 0,100% 14%,100% 80%,50% 100%,0 80%,0 14%); box-shadow:0 0 35px rgba(184,255,55,.22); transform:none; }
.club-crest svg { filter:none; }
.card { position:relative; background:linear-gradient(145deg,rgba(19,32,29,.98),rgba(10,20,17,.98)); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.card::before { content:""; position:absolute; top:-1px; left:18px; width:56px; height:3px; background:var(--accent); box-shadow:0 0 14px rgba(184,255,55,.42); }
.eyebrow { color:var(--accent); letter-spacing:.16em; }
h1,h2,h3,strong { color:var(--text); }
.muted,.status { color:var(--muted); }
button { border-radius:4px; text-transform:uppercase; letter-spacing:.035em; }
.primary { color:#07110d; background:linear-gradient(105deg,#d8ff75,#a4ef30); box-shadow:0 10px 25px rgba(132,219,41,.16); }
.ghost { color:var(--text); background:#172420; border:1px solid rgba(221,255,233,.14); }
.text-button { color:var(--accent); }
input,select { color:var(--text); background:#0a1512; border:1px solid rgba(221,255,233,.15); border-radius:3px; }
input:focus,select:focus { outline:2px solid rgba(184,255,55,.2); border-color:rgba(184,255,55,.7); }
.password-toggle { color:var(--accent); background:#17251f; border-radius:2px; }
.session-note { color:#7fe2aa; }
.auth-card,.profile-card { border-color:rgba(184,255,55,.2); }
.profile-summary { background:linear-gradient(105deg,#13221d,#0c1815); backdrop-filter:blur(18px); }
.profile-summary::after { content:"PLAYER"; margin-left:auto; color:rgba(184,255,55,.38); font-size:9px; font-weight:950; letter-spacing:.18em; }
.mini-avatar { color:#07110d; background:linear-gradient(145deg,#d3ff70,#7ed225); border-radius:4px; clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); box-shadow:none; }

.game-card { min-height:170px; color:var(--text); background:linear-gradient(125deg,#152520,#0b1714); border-color:rgba(214,255,228,.13); border-radius:0; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); box-shadow:0 18px 42px rgba(0,0,0,.24); }
.game-card::before { content:"MATCH DAY"; position:absolute; right:31px; bottom:17px; color:rgba(225,255,234,.04); font-size:32px; font-style:italic; font-weight:950; letter-spacing:-.05em; }
.game-card::after { border-color:rgba(184,255,55,.1); box-shadow:inset 0 0 0 16px rgba(184,255,55,.02); }
.game-card.is-confirmed { border-color:rgba(184,255,55,.45); background:linear-gradient(125deg,#17301f,#0c1914); }
.game-card.is-completed { background:linear-gradient(125deg,#17201e,#0b1211); opacity:.76; }
.game-card-main > strong,.game-card strong { color:var(--text); }
.game-card .game-day { color:var(--accent); }
.game-date-badge { color:#07110d; background:linear-gradient(150deg,#d7ff78,#8ddf27); border:0; border-radius:0; clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%); }
.is-confirmed .game-date-badge { color:#07110d; background:linear-gradient(150deg,#ebff9d,#a2ef31); box-shadow:0 0 25px rgba(184,255,55,.16); }
.is-completed .game-date-badge { color:#9aa9a4; background:#26332f; }
.game-status { border-radius:2px; }
.game-status.confirmed { color:#07110d; background:var(--accent); }
.game-status.pending { color:#201605; background:var(--warning); }
.game-progress { background:#26332f; border-radius:0; }
.game-progress > i,.is-confirmed .game-progress > i { background:linear-gradient(90deg,#66c52b,#d7ff71); border-radius:0; }
.empty-games-icon { color:#07110d; background:var(--accent); border-radius:3px; }

.bottom-nav { bottom:8px; background:rgba(8,18,15,.94); border-color:rgba(215,255,228,.16); border-radius:5px; box-shadow:0 24px 55px rgba(0,0,0,.46); }
.bottom-nav button { color:#81958e; border-radius:2px; }
.bottom-nav button.active { color:#07110d; background:linear-gradient(110deg,#d5ff71,#9be62d); }
.bottom-nav button.active::after { background:#07110d; border-radius:0; }

.hero { color:var(--text); background:radial-gradient(circle at 78% 18%,rgba(184,255,55,.2),transparent 35%),linear-gradient(145deg,#162a24,#0b1714); border:1px solid rgba(184,255,55,.17); border-radius:7px; box-shadow:var(--shadow); }
.hero::after { content:"DFC"; position:absolute; right:14px; bottom:3px; color:rgba(184,255,55,.07); font-size:76px; font-style:italic; font-weight:950; }
.hero .ball { background:#d3ff70; border-radius:3px; filter:none; }
.meta span,.game-state-card .state-icon,.receipt-state,.friend-payment,.friend-form,.payment-debt-warning { border-radius:4px; }
.roster-group { border-color:rgba(215,255,228,.1); }
.roster li { border-radius:2px; }
.roster li:not(.empty) { background:linear-gradient(90deg,#17261f,#101b18); }
.roster li.empty { color:#687b74; }
.you,.paid,.checking,.guest-badge { border-radius:2px; }
.paid { color:#07110d; background:var(--accent); }
.meter { background:#26332f; border-radius:0; }
.meter i { background:linear-gradient(90deg,#79d82d,#d6ff71); border-radius:0; }
.game-state-card.confirmed { background:linear-gradient(145deg,#132a1d,#0e1b17); }
.game-state-card .state-icon { color:#201605; }
.game-state-card.confirmed .state-icon { color:#07110d; background:var(--accent); }

.leaderboard-head,.leaderboard-row { grid-template-columns:minmax(0,1fr) 46px 48px 38px; }
.leaderboard-row { color:var(--text); background:#0d1815; border:1px solid rgba(221,255,233,.08); border-radius:3px; margin-top:5px; }
.leaderboard-row.is-me { margin-inline:0; padding-inline:8px; color:#07110d; background:linear-gradient(105deg,#d8ff76,#a1ed31); border-color:transparent; border-radius:3px; }
.leaderboard-row.is-me * { color:#07110d; }
.leaderboard-player > b { color:#07110d; background:var(--accent); border-radius:2px; }
.leaderboard-avatar { color:#07110d; background:#b8ff37; border-radius:3px; clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); }
.leaderboard-player > i { color:#07110d; background:#fff; border-radius:2px; }
.rating-points { color:var(--accent); }
.leaderboard-note strong { color:#d4dfdb; }

.passport-stage { display:grid; place-items:center; gap:13px; padding:8px 0 2px; }
.player-passport { position:relative; width:min(100%,292px); aspect-ratio: .72; overflow:hidden; color:#171306; background:
  radial-gradient(circle at 50% 30%,rgba(255,255,255,.8),transparent 24%),
  linear-gradient(150deg,#fff1a3 0%,#c69425 24%,#f7df78 47%,#9c6818 76%,#f6dc70 100%);
  clip-path:polygon(17% 0,83% 0,100% 11%,96% 78%,82% 100%,18% 100%,4% 78%,0 11%);
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.42)); isolation:isolate; }
.player-passport::before { content:""; position:absolute; z-index:-1; inset:7px; background:
  linear-gradient(125deg,transparent 0 48%,rgba(255,255,255,.26) 49% 50%,transparent 51%),
  radial-gradient(circle at 50% 22%,rgba(255,255,255,.3),transparent 42%),
  linear-gradient(165deg,#d7aa3b,#f8e58c 44%,#b37618 100%);
  clip-path:polygon(16% 0,84% 0,100% 10%,96% 77%,81% 100%,19% 100%,4% 77%,0 10%); }
.player-passport::after { content:""; position:absolute; z-index:2; left:8%; right:8%; bottom:70px; height:1px; background:linear-gradient(90deg,transparent,#4f390e,transparent); opacity:.7; }
.passport-rating { position:absolute; z-index:4; top:39px; left:28px; display:grid; justify-items:center; line-height:.8; }
.passport-rating strong { color:#171306; font-size:42px; font-weight:950; letter-spacing:-.08em; }
.passport-rating span { margin-top:9px; font-size:9px; font-weight:950; letter-spacing:.16em; }
.passport-rank { position:absolute; z-index:4; top:96px; left:28px; min-width:48px; padding:4px 5px; color:#f8e893; background:#201907; border:1px solid #f5db6a; font-size:7px; font-weight:950; letter-spacing:.12em; text-align:center; }
.passport-avatar-wrap { position:absolute; z-index:3; top:43px; left:50%; width:188px; height:226px; transform:translateX(-39%); }
.passport-avatar { width:100%; height:100%; object-fit:cover; object-position:center top; color:#5d430d; background:linear-gradient(150deg,#ffe993,#b77f1c); border:0; border-radius:0; clip-path:polygon(18% 0,82% 0,100% 16%,96% 100%,4% 100%,0 16%); box-shadow:none; }
.passport-initial { display:grid; place-items:center; font-size:76px; font-weight:950; }
.avatar-upload { z-index:6; right:8px; bottom:13px; width:34px; height:34px; color:#07110d; background:var(--accent); border:2px solid #f7df78; border-radius:3px; }
.passport-club { position:absolute; z-index:4; top:137px; left:29px; display:grid; justify-items:center; width:47px; color:#211904; }
.passport-club span { display:grid; place-items:center; width:40px; height:44px; color:#d9ff71; background:#101b16; clip-path:polygon(12% 0,88% 0,100% 15%,88% 83%,50% 100%,12% 83%,0 15%); font-size:11px; font-weight:950; }
.passport-club small { margin-top:4px; font-size:6px; font-weight:950; }
.passport-name { position:absolute; z-index:4; left:20px; right:20px; bottom:72px; overflow:hidden; color:#181305; font-size:23px; font-weight:950; letter-spacing:-.04em; text-align:center; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.passport-stats { position:absolute; z-index:4; left:29px; right:29px; bottom:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; text-align:center; }
.passport-stats span { display:grid; gap:2px; font-size:7px; font-weight:950; letter-spacing:.08em; }
.passport-stats b { color:#171306; font-size:17px; letter-spacing:-.04em; }
.passport-caption { text-align:center; }
.passport-caption .eyebrow { margin:0; }
.passport-caption .player-rank { margin-top:5px; color:var(--muted); }

.my-passport-preview { display:grid; grid-template-columns:58px 70px minmax(0,1fr); align-items:center; gap:10px; width:100%; min-height:104px; margin:15px 0; padding:11px 14px; color:#171306; background:linear-gradient(130deg,#f7e184,#b87b19 55%,#f5dc72); border:1px solid #ffe99a; border-radius:0; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); text-align:left; }
.my-passport-rating { display:grid; justify-items:center; line-height:.8; }
.my-passport-rating strong { color:#171306; font-size:34px; letter-spacing:-.08em; }
.my-passport-rating small { margin-top:8px; font-size:8px; font-weight:950; }
.my-passport-avatar { display:grid; place-items:center; width:66px; height:80px; overflow:hidden; color:#50390c; background:rgba(255,255,255,.22); clip-path:polygon(16% 0,84% 0,100% 15%,96% 100%,4% 100%,0 15%); font-size:28px; }
.my-passport-avatar img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.my-passport-copy { min-width:0; display:grid; gap:4px; }
.my-passport-copy small { font-size:7px; font-weight:950; letter-spacing:.16em; }
.my-passport-copy strong { overflow:hidden; color:#171306; font-size:16px; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.my-passport-copy em { font-size:8px; font-style:normal; font-weight:900; }

.bonus-wallet { margin:14px 0 18px; padding:17px; color:#f4fff7; background:
  radial-gradient(circle at 88% 10%,rgba(184,255,55,.2),transparent 34%),
  linear-gradient(125deg,#182b24,#0b1713); border:1px solid rgba(184,255,55,.24); clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px)); }
.bonus-wallet-top { display:flex; align-items:start; justify-content:space-between; }
.bonus-wallet-top span { display:grid; gap:4px; }
.bonus-wallet-top small { color:var(--accent); font-size:8px; font-weight:950; letter-spacing:.18em; }
.bonus-wallet-top strong { font-size:30px; letter-spacing:-.05em; }
.bonus-wallet-top i { display:grid; place-items:center; width:45px; height:48px; color:#07110d; background:var(--accent); clip-path:polygon(12% 0,88% 0,100% 15%,88% 83%,50% 100%,12% 83%,0 15%); font-size:10px; font-style:normal; font-weight:950; }
.bonus-progress { height:5px; margin-top:14px; overflow:hidden; background:#304039; }
.bonus-progress i { display:block; height:100%; background:linear-gradient(90deg,#75d02c,#d8ff73); }
.bonus-wallet > p { margin:8px 0 0; color:#bdcbc5; font-size:9px; }
.bonus-rules { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.bonus-rules span { padding:9px; color:var(--accent); background:#111f1a; border-left:2px solid var(--accent); font-size:16px; font-weight:950; }
.bonus-rules small { display:block; margin-top:2px; color:var(--muted); font-size:7px; text-transform:uppercase; }
.bonus-note { line-height:1.35; }

.player-numbers>div,.stats-summary>div,.rating-breakdown>div,.tracker-strip>div,.activity-summary>div { background:#101c18; border:1px solid rgba(221,255,233,.1); border-radius:3px; }
.rating-breakdown strong { color:var(--accent); }
.activity-calendar { background:#0d1815; border-color:rgba(221,255,233,.1); border-radius:3px; }
.calendar-day { background:#26332f; border-radius:1px; }
.calendar-day.played { background:#8de02c; border-color:#b8ff37; box-shadow:0 0 8px rgba(184,255,55,.18); }
.calendar-day.multiple { background:#d5ff6e; border-color:#eaffad; }
.calendar-legend i { background:#26332f; border-radius:1px; }
.calendar-legend i.active { background:#a5eb37; }
.motivation { background:linear-gradient(125deg,#18301f,#0e1b17); border-color:rgba(184,255,55,.18); border-radius:3px; }

.achievement-grid { gap:17px 8px; }
.achievement-card,.achievement-card.earned { min-height:151px; }
.achievement-medal { --metal1:#b87639; --metal2:#51270d; width:72px; height:76px; margin-top:14px; border:0; border-radius:0; clip-path:polygon(50% 0,88% 14%,100% 50%,82% 86%,50% 100%,18% 86%,0 50%,12% 14%); background:radial-gradient(circle at 36% 25%,#fff8 0 4%,transparent 5%),linear-gradient(145deg,var(--metal1),var(--metal2)); box-shadow:inset 0 0 0 5px #0002,inset 0 -12px 20px #0004,0 10px 18px #0006; }
.achievement-medal::before,.achievement-medal::after { display:none; }
.achievement-medal i { width:47px; height:47px; color:#f8e6b5; background:#1118; border:1px solid #fff3; border-radius:0; clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); font-size:24px; }
.category-goals .achievement-medal i { color:#eaff97; }
.category-streak .achievement-medal i { color:#9ee5ff; }
.tier-silver .achievement-medal { --metal1:#d7e2e3; --metal2:#526764; }
.tier-gold .achievement-medal { --metal1:#ffe477; --metal2:#8c5708; }
.tier-elite .achievement-medal { --metal1:#a6edff; --metal2:#1459a0; filter:drop-shadow(0 0 12px rgba(91,196,255,.36)); }
.achievement-copy strong { color:var(--text); }
.achievement-copy small,.achievement-state { color:var(--muted); }
.achievement-card.earned .achievement-copy::after { color:#07110d; background:var(--accent); border-radius:1px; }

.payment-card { border-color:rgba(184,255,55,.2); }
.payment-card>img { border-radius:3px; }
.bonus-pay-box { display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; margin:15px 0; padding:14px; text-align:left; background:linear-gradient(125deg,#1b3027,#0e1c17); border:1px solid rgba(184,255,55,.28); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.bonus-pay-box>span { display:grid; gap:3px; }
.bonus-pay-box small { color:var(--accent); font-size:7px; font-weight:950; letter-spacing:.15em; }
.bonus-pay-box strong { font-size:23px; }
.bonus-pay-button { min-height:42px; padding:0 12px; color:#07110d; background:var(--accent); }
.bonus-pay-button:disabled { color:#83938e; background:#26332f; cursor:not-allowed; }
.bonus-pay-box>p { grid-column:1/-1; margin:0; color:var(--muted); font-size:9px; }
.receipt-state,.friend-payment { background:#0e1916; border-color:rgba(221,255,233,.11); }
.file-button { border-radius:3px; }

@media(max-width:380px) {
  .player-passport { width:260px; }
  .passport-avatar-wrap { width:169px; height:203px; }
  .passport-rating { top:35px; left:25px; }
  .passport-rating strong { font-size:37px; }
  .passport-rank,.passport-club { left:25px; }
  .passport-name { bottom:64px; font-size:20px; }
  .passport-stats { left:26px; right:26px; bottom:24px; }
  .passport-stats b { font-size:15px; }
  .my-passport-preview { grid-template-columns:52px 61px minmax(0,1fr); padding-inline:10px; }
  .my-passport-avatar { width:59px; height:72px; }
}

/* Light football game theme */
:root {
  color-scheme: light;
  --bg:#eef3f0;
  --card:#ffffff;
  --card-soft:#f4f7f5;
  --text:#12241d;
  --muted:#667a72;
  --accent:#397c4d;
  --accent-dark:#245b37;
  --accent-text:#ffffff;
  --line:rgba(30,73,48,.13);
  --shadow:0 18px 46px rgba(31,62,44,.10);
}
body {
  background:
    radial-gradient(circle at 50% -7%,rgba(167,230,91,.28),transparent 29%),
    radial-gradient(circle at 105% 38%,rgba(59,130,246,.10),transparent 34%),
    linear-gradient(155deg,#f5f8f6 0%,#edf3ef 50%,#f8faf9 100%);
  color:var(--text);
}
body::before { opacity:.42; background-image:linear-gradient(rgba(45,104,65,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(45,104,65,.055) 1px,transparent 1px); }
body::after { background:linear-gradient(90deg,transparent 49.8%,rgba(58,125,76,.055) 50%,transparent 50.2%); }
.app-head h1,h1,h2,h3,strong { color:var(--text); }
.club-kicker,.eyebrow { color:var(--accent); }
.club-kicker>span { background:#84d53e; border-color:rgba(91,166,54,.24); box-shadow:0 0 0 4px rgba(118,196,64,.10),0 0 15px rgba(93,177,53,.18); }
.club-crest { color:#10231a; background:linear-gradient(145deg,#dfff8a,#9de547 62%,#69bb38); box-shadow:0 15px 32px rgba(70,130,55,.18); }
.card { background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,251,249,.99)); border-color:var(--line); box-shadow:var(--shadow); }
.card::before { background:#83cf45; box-shadow:none; }
.muted,.status { color:var(--muted); }
.primary { color:#fff; background:linear-gradient(110deg,#397c4d,#2b6840); box-shadow:0 10px 22px rgba(45,105,65,.15); }
.ghost { color:var(--text); background:#f5f8f6; border-color:var(--line); }
.text-button { color:var(--accent); }
input,select { color:var(--text); background:#f8faf9; border-color:rgba(34,80,52,.18); }
input:focus,select:focus { outline-color:rgba(57,124,77,.14); border-color:rgba(57,124,77,.58); }
.password-toggle { color:var(--accent); background:#eaf2ed; }
.session-note { color:#387051; }
.profile-summary { background:rgba(255,255,255,.94); }
.profile-summary::after { content:"ИГРОК"; color:rgba(45,105,65,.42); }
.mini-avatar { color:#17321f; background:linear-gradient(145deg,#dbff85,#9dde47); }

.game-card { color:var(--text); background:linear-gradient(125deg,#fff,#f5f9f6); border-color:rgba(34,80,52,.14); box-shadow:0 16px 36px rgba(30,65,43,.10); }
.game-card::before { content:"ДЕНЬ ИГРЫ"; color:rgba(42,91,58,.045); }
.game-card::after { border-color:rgba(57,124,77,.09); box-shadow:inset 0 0 0 16px rgba(57,124,77,.018); }
.game-card.is-confirmed { border-color:rgba(80,151,68,.36); background:linear-gradient(125deg,#fff,#f2faee); }
.game-card.is-completed { background:linear-gradient(125deg,#f7f9f8,#eef2f0); }
.game-card-main>strong,.game-card strong { color:var(--text); }
.game-card .game-day { color:var(--accent); }
.game-location,.game-card .game-info,.game-chevron { color:var(--muted)!important; }
.game-date-badge,.is-confirmed .game-date-badge { color:#17321f; background:linear-gradient(150deg,#e0ff8c,#a8e852); box-shadow:0 9px 20px rgba(77,139,55,.12); }
.is-completed .game-date-badge { color:#66776f; background:#e6ece8; }
.game-progress { background:#dfe8e2; }
.game-progress>i,.is-confirmed .game-progress>i { background:linear-gradient(90deg,#4d985e,#9bd84b); }
.empty-games-icon { color:#17321f; background:#d8f88a; }

.bottom-nav { background:rgba(255,255,255,.96); border-color:rgba(32,76,49,.14); box-shadow:0 18px 45px rgba(28,59,40,.16); }
.bottom-nav button { color:#74847d; }
.bottom-nav button.active { color:#17321f; background:linear-gradient(110deg,#ddff8b,#a9e64f); }
.bottom-nav button.active::after { background:#2f6c43; }

.hero { color:var(--text); background:radial-gradient(circle at 78% 18%,rgba(149,218,74,.20),transparent 35%),linear-gradient(145deg,#fff,#f0f7f2); border-color:rgba(45,105,65,.14); }
.hero::after { content:"ДАТСКИЙ"; color:rgba(45,105,65,.05); font-size:55px; }
.hero .ball { background:#d9fa86; }
.meta span { color:var(--text); background:#fff; border-color:var(--line); }
.roster-group { border-color:rgba(32,76,49,.11); }
.roster li:not(.empty) { color:var(--text); background:linear-gradient(90deg,#f5f9f6,#edf4ef); }
.roster li.empty { color:#8a9992; }
.meter { background:#dce7df; }
.game-state-card,.game-state-card.confirmed { background:linear-gradient(145deg,#fff,#f4f9f5); }
.game-state-card.confirmed .state-icon { color:#17321f; background:#b9ec68; }
.payment-debt-warning { background:#fff8e8; }

.leaderboard-row { color:var(--text); background:#f8faf9; border-color:rgba(31,74,47,.10); }
.leaderboard-row.is-me { color:#17321f; background:linear-gradient(105deg,#e3faad,#c8ed7d); }
.leaderboard-player>b { color:#fff; background:#397c4d; }
.leaderboard-avatar { color:#17321f; background:#d9f786; }
.leaderboard-player>i { color:#fff; background:#397c4d; }
.rating-points { color:#2c7045; }
.leaderboard-note strong { color:#4e6259; }

.passport-rating span { max-width:54px; font-size:6px; line-height:1.15; text-align:center; }
.passport-rank { min-width:58px; font-size:6px; }
.passport-club { top:139px; left:23px; width:60px; }
.passport-club span { width:42px; }
.passport-club small { width:66px; margin-top:4px; font-size:4.5px; line-height:1.12; text-align:center; }
.passport-stats span { font-size:6px; }
.passport-caption .player-rank { color:var(--muted); }
.my-passport-rating small { max-width:50px; font-size:6px; line-height:1.05; text-align:center; }

.bonus-wallet { color:var(--text); background:radial-gradient(circle at 88% 10%,rgba(157,222,76,.25),transparent 34%),linear-gradient(125deg,#f9fcfa,#eef6f0); border-color:rgba(57,124,77,.20); }
.bonus-wallet-top small { color:var(--accent); }
.bonus-wallet-top strong { color:var(--text); }
.bonus-wallet-top i { color:#17321f; background:#c9ef72; }
.bonus-progress { background:#d7e4da; }
.bonus-progress i { background:linear-gradient(90deg,#3f8752,#9bd84b); }
.bonus-wallet>p { color:#60736a; }
.bonus-rules span { color:#2f7447; background:#fff; border-left-color:#77bd4a; }
.bonus-rules small { color:var(--muted); }

.player-numbers>div,.stats-summary>div,.rating-breakdown>div,.tracker-strip>div,.activity-summary>div { background:#f5f8f6; border-color:rgba(31,74,47,.10); }
.rating-breakdown strong { color:#2d7447; }
.activity-calendar { background:#f5f8f6; border-color:rgba(31,74,47,.10); }
.calendar-day { background:#dce5df; }
.calendar-day.played { background:#79bd50; border-color:#5ba13a; box-shadow:none; }
.calendar-day.multiple { background:#3f8351; border-color:#2f6b41; }
.calendar-legend i { background:#dce5df; }
.calendar-legend i.active { background:#69ae48; }
.motivation { background:linear-gradient(125deg,#eef8e9,#f8fbf8); border-color:rgba(69,133,71,.18); }

.tracker-head { display:grid; place-items:center; justify-content:center; gap:4px; text-align:center; }
.tracker-head>span { max-width:none; text-align:center; }
.achievement-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:17px 8px; }
.achievement-card,.achievement-card.earned { flex:0 0 calc(33.333% - 6px); width:calc(33.333% - 6px); align-items:center; justify-content:flex-start; text-align:center; }
.achievement-medal { margin-left:auto; margin-right:auto; }
.achievement-copy { display:grid; justify-items:center; width:100%; text-align:center; }
.achievement-copy strong { color:var(--text); text-align:center; }
.achievement-copy small,.achievement-state { color:var(--muted); text-align:center; }
.achievement-card.earned .achievement-copy::after { color:#17321f; background:#d8f481; }

.payment-card { border-color:rgba(57,124,77,.18); }
.payment-card #qr-payment>img { display:block; width:min(100%,290px); aspect-ratio:1; object-fit:contain; margin:18px auto 12px; padding:10px; background:#fff; border-radius:12px; }
.payment-card #qr-payment #save-qr { width:min(100%,290px); }
.phone-payment { display:grid; justify-items:center; gap:8px; margin:18px 0 12px; padding:18px; background:linear-gradient(145deg,#eff7f1,#f9fcfa); border:1px solid rgba(57,124,77,.18); border-radius:18px; }
.phone-payment .eyebrow { margin:0; color:#397c4d; }
.phone-payment>strong { font-size:15px; }
.phone-copy-button { display:grid; gap:3px; width:min(100%,310px); padding:13px 16px; color:#fff; background:linear-gradient(135deg,#397c4d,#285f3a); border:0; border-radius:14px; box-shadow:0 10px 24px rgba(48,113,68,.18); cursor:pointer; }
.phone-copy-button>span { font-size:22px; font-weight:950; letter-spacing:.025em; }
.phone-copy-button>small { color:rgba(255,255,255,.76); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.payment-recipient { margin:0; color:var(--muted); font-size:11px; font-weight:750; }
.bonus-pay-box { background:linear-gradient(125deg,#f4faf4,#eaf4ec); border-color:rgba(57,124,77,.22); }
.bonus-pay-box small { color:var(--accent); }
.bonus-pay-box strong { color:var(--text); }
.bonus-pay-button { color:#fff; background:#397c4d; }
.bonus-pay-button:disabled { color:#7a8a83; background:#dfe7e2; }
.receipt-state,.friend-payment,.friend-form { background:#f6f9f7; border-color:rgba(31,74,47,.11); }
#stats-games { scroll-margin-top:18px; scroll-margin-bottom:110px; }
.goals-entry-block { padding:16px; background:linear-gradient(135deg,#f8fbf8,#eef7ef); border:1px solid rgba(57,124,77,.18); border-radius:20px; }
.goals-entry-head { display:flex; justify-content:space-between; text-align:left; }
.goals-entry-head>div { display:grid; gap:2px; }
.goals-entry-head .eyebrow { margin:0; }
.goals-entry-head h3 { margin:0; }
.goals-entry-head>span { max-width:none; padding:7px 10px; color:#2f7447; background:#fff; border:1px solid rgba(57,124,77,.15); border-radius:999px; white-space:nowrap; }
.goals-entry-block .stats-note { margin-top:10px; }
.goals-entry-block .stats-games { margin-top:12px; }
.goals-entry-block .goals-row:last-child { border-bottom:0; padding-bottom:0; }
.goals-row label { font-size:9px; line-height:1.15; }
.goals-empty { display:grid; gap:5px; margin-top:12px; padding:14px; text-align:center; background:#fff; border:1px dashed rgba(57,124,77,.25); border-radius:14px; }
.goals-empty strong { font-size:13px; }
.goals-empty p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.goal-review-status { display:inline-flex; width:max-content; max-width:100%; margin-top:6px; padding:4px 7px; overflow:hidden; color:var(--muted); background:#edf3ef; border-radius:999px; font-size:8px; font-style:normal; font-weight:800; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.goal-review-status.pending { color:#8b5e00; background:#fff1cb; }
.goal-review-status.approved { color:#2b7447; background:#e5f5e9; }
.goal-review-status.rejected { color:#a63a48; background:#fff0f2; }

@media(max-width:380px) {
  .achievement-card,.achievement-card.earned { flex-basis:calc(50% - 4px); width:calc(50% - 4px); }
  .goals-entry-head { align-items:flex-start; }
}