:root {
  color-scheme: light;
  --bg: #edf2f5;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef4f9;
  --line: rgba(31, 73, 109, .14);
  --line-strong: rgba(22, 117, 222, .34);
  --text: #132536;
  --muted: #647789;
  --blue: #258bff;
  --blue-dark: #0759d8;
  --cyan: #45d2df;
  --green: #36d884;
  --grass: #24b76b;
  --grass-dark: #087044;
  --gold: #ffc857;
  --red: #ff6374;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 16px 42px rgba(31, 57, 78, .12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 48% -12%, #123a61 0, #061923 31%, transparent 58%), radial-gradient(circle at 90% 78%, rgba(13, 103, 69, .18), transparent 28%), var(--bg); }
body.modal-open { overflow: hidden; }
body.presentation-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, input, select, label { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

.app-shell { position: relative; width: min(100%, 720px); min-height: 100dvh; margin: 0 auto; background: linear-gradient(180deg, rgba(5, 19, 27, .97), rgba(2, 10, 16, .99)); box-shadow: 0 0 90px rgba(0, 0, 0, .5); }
.topbar { position: sticky; top: 0; z-index: 30; min-height: calc(66px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; background: rgba(3, 15, 22, .82); border-bottom: 1px solid rgba(99, 167, 204, .15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.brand-mini { display: flex; align-items: center; justify-content: center; gap: 9px; line-height: .96; letter-spacing: -.01em; }
.brand-mini img { width: 38px; height: 38px; border-radius: 11px; }
.brand-mini span { display: flex; flex-direction: column; font-style: italic; }
.brand-mini b { font-size: 15px; }
.brand-mini em { color: var(--blue); font-size: 14px; font-weight: 900; font-style: normal; }

.app-version-badge {
  width: max-content;
  margin-top: 3px;
  padding: 2px 6px;
  color: #0b67c9;
  font-size: 9px;
  font-weight: 950;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: .06em;
  background: #e8f3ff;
  border: 1px solid #bfdcff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(17, 93, 166, .10);
  white-space: nowrap;
}
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--text); background: linear-gradient(145deg, rgba(13, 40, 54, .9), rgba(5, 20, 29, .9)); border: 1px solid rgba(105, 173, 211, .2); border-radius: 14px; box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.icon-button .icon { width: 22px; height: 22px; }

.content { min-height: calc(100dvh - 66px); padding: 20px 18px calc(106px + env(safe-area-inset-bottom)); }
.bottom-nav { position: fixed; z-index: 40; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 720px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(3, 15, 22, .94); border-top: 1px solid rgba(99, 167, 204, .16); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.nav-item { min-width: 0; min-height: 58px; padding: 6px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #738ca2; background: transparent; border: 0; border-radius: 14px; }
.nav-item .icon { width: 21px; height: 21px; stroke-width: 2; }
.nav-item b { max-width: 100%; overflow: hidden; color: inherit; font-size: 11px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.active { color: #79c8ff; background: linear-gradient(145deg, rgba(27, 121, 230, .2), rgba(20, 164, 104, .09)); box-shadow: inset 0 0 0 1px rgba(67, 157, 255, .08); }

.hero { position: relative; min-height: 300px; overflow: hidden; padding: 26px 24px 24px; isolation: isolate; background: radial-gradient(circle at 82% 12%, rgba(33, 135, 255, .38), transparent 34%), linear-gradient(145deg, #0c3140, #071c27 58%, #08271c); border: 1px solid rgba(74, 166, 222, .34); border-radius: 28px; box-shadow: 0 24px 54px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04); }
.hero-photo { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--hero-photo-visibility, .70); filter: saturate(.92) contrast(1.04); }
.hero.photo-failed .hero-photo { display: none; }
.hero-overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(1, 12, 19, .94) 0%, rgba(3, 19, 28, .79) 48%, rgba(3, 20, 25, .45) 100%), linear-gradient(0deg, rgba(1, 10, 16, .74), transparent 62%); }
.hero:not(.has-photo) .hero-overlay, .hero.photo-failed .hero-overlay { background: radial-gradient(circle at 82% 12%, rgba(37, 139, 255, .3), transparent 34%), linear-gradient(135deg, rgba(5, 27, 38, .4), rgba(4, 45, 29, .34)); }
.hero-field-art { position: absolute; z-index: -3; inset: 0; overflow: hidden; opacity: .72; background: linear-gradient(112deg, transparent 0 49.7%, rgba(255, 255, 255, .09) 50%, transparent 50.3%), linear-gradient(0deg, rgba(20, 126, 71, .5), transparent 70%); }
.hero-field-art::before { position: absolute; inset: 18% 9% -20%; content: ""; border: 2px solid rgba(255, 255, 255, .09); border-radius: 50% 50% 0 0; transform: perspective(450px) rotateX(64deg); }
.hero-field-art i { position: absolute; bottom: -42px; width: 1px; height: 210px; background: rgba(255, 255, 255, .08); transform-origin: bottom; }
.hero-field-art i:nth-child(1) { left: 28%; transform: rotate(13deg); }
.hero-field-art i:nth-child(2) { left: 50%; }
.hero-field-art i:nth-child(3) { right: 28%; transform: rotate(-13deg); }
.hero-copy { position: relative; z-index: 2; max-width: 440px; }
.hero-photo-action { position: absolute; z-index: 4; top: 16px; right: 16px; min-height: 40px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; color: #e2f1ff; font-size: 10px; font-weight: 850; background: rgba(2, 15, 22, .72); border: 1px solid rgba(151, 204, 234, .25); border-radius: 12px; backdrop-filter: blur(10px); }
.hero-photo-action .icon { width: 16px; height: 16px; color: #75c5ff; }
.hero-signature { position: absolute; z-index: 2; right: 18px; bottom: 17px; display: inline-flex; align-items: center; gap: 6px; color: rgba(221, 239, 247, .66); font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.hero-signature .icon { width: 14px; height: 14px; color: #59d292; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 7px; color: #84bfff; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { position: relative; z-index: 1; padding: 8px 10px; color: #c5d8e8; background: rgba(4, 17, 29, .64); border: 1px solid var(--line); border-radius: 999px; letter-spacing: .04em; }
.eyebrow .icon, .section-kicker .icon { width: 16px; height: 16px; }
.hero h1 { position: relative; z-index: 1; margin: 27px 0 7px; font-size: clamp(40px, 11vw, 60px); font-weight: 950; font-style: italic; line-height: .86; letter-spacing: -.06em; text-shadow: 0 4px 24px rgba(0, 0, 0, .42); }
.hero h1 span { display: block; color: #3393ff; }
.hero p { position: relative; z-index: 1; max-width: 390px; margin: 17px 0 0; color: #bed0df; font-size: 14px; line-height: 1.55; }
.status-pill { position: relative; z-index: 1; margin-top: 16px; padding: 9px 11px; display: inline-flex; align-items: center; gap: 7px; color: #bdd1e2; font-size: 11px; font-weight: 750; background: rgba(5, 22, 36, .82); border: 1px solid var(--line); border-radius: 999px; }
.status-pill .icon { width: 16px; height: 16px; }
.status-pill.admin { color: #b8f8d5; background: rgba(3, 45, 29, .7); border-color: rgba(53, 215, 127, .38); }

.quick-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.action-card { position: relative; min-height: 112px; overflow: hidden; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 13px; color: var(--text); text-align: left; background: linear-gradient(145deg, rgba(13, 39, 54, .9), rgba(6, 23, 31, .94)); border: 1px solid rgba(123, 184, 217, .15); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0, 0, 0, .15), inset 0 1px rgba(255, 255, 255, .025); }
.action-card::after { position: absolute; right: -24px; bottom: -30px; width: 88px; height: 88px; content: ""; background: radial-gradient(circle, rgba(46, 144, 255, .12), transparent 68%); }
.action-card:nth-child(2)::after { background: radial-gradient(circle, rgba(40, 206, 121, .13), transparent 68%); }
.action-card > .icon { width: 27px; height: 27px; color: #58abff; }
.action-card:nth-child(2) > .icon { color: #54dc96; }
.action-card b, .action-card small { display: block; }
.action-card b { font-size: 15px; }
.action-card small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.page-heading { margin: 5px 2px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.page-heading h1 { margin: 5px 0 2px; font-size: clamp(27px, 8vw, 36px); line-height: 1; letter-spacing: -.035em; }
.page-heading p, .section-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.section-head { margin: 30px 2px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section-head h2 { margin: 5px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }

.btn { min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 850; background: var(--surface-3); border: 1px solid var(--line); border-radius: 14px; }
.btn .icon { width: 18px; height: 18px; }
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border-color: rgba(92, 164, 255, .55); box-shadow: 0 9px 24px rgba(0, 91, 255, .24); }
.btn.text { min-height: 44px; padding: 0 10px; color: #76b7ff; background: transparent; border-color: transparent; }
.btn.danger { color: #ffadb6; background: #35151c; border-color: rgba(255, 99, 116, .28); }
.btn.block { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.button-row { margin-top: 14px; display: flex; gap: 9px; }
.button-row > * { flex: 1; }
.button-row.compact { margin-top: 9px; justify-content: flex-start; }
.button-row.compact > * { flex: 0 1 auto; }

.admin-bar, .offline-bar { margin-bottom: 12px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; font-size: 12px; border-radius: 14px; }
.admin-bar { background: linear-gradient(100deg, #116bea, #064dc1); box-shadow: 0 8px 22px rgba(0, 90, 230, .22); }
.admin-bar div { display: flex; flex-direction: column; gap: 1px; }
.admin-bar span { color: #d7e9ff; font-size: 10px; }
.offline-bar { color: #ffe39b; background: #32290c; border: 1px solid #69591d; }

.podium-list, .history-list, .player-list, .selection-list { display: flex; flex-direction: column; gap: 9px; }
.ranking-row, .history-row { min-width: 0; padding: 11px 12px; display: flex; align-items: center; gap: 10px; color: var(--text); background: linear-gradient(145deg, rgba(8, 27, 37, .94), rgba(5, 20, 27, .98)); border: 1px solid rgba(121, 182, 214, .15); border-radius: 16px; box-shadow: inset 0 1px rgba(255, 255, 255, .02); }
.ranking-number { width: 26px; color: #5ba8ff; font-size: 15px; text-align: center; }
.profile-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.profile-copy b, .profile-copy span, .profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy b { font-size: 15px; }
.profile-copy > span { margin-top: 2px; color: #b0c1d0; font-size: 12px; }
.profile-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.history-row { width: 100%; min-height: 62px; text-align: left; }
.history-row > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; color: #69afff; background: rgba(33, 135, 255, .1); border-radius: 12px; }
.history-row > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.history-row small { color: var(--muted); }
.history-row > strong { color: #82bcff; font-size: 12px; }

.avatar { position: relative; width: 54px; height: 54px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; color: #a8d2ff; font-size: 16px; font-weight: 900; background: linear-gradient(145deg, #1a578f, #0b2944); border: 1px solid rgba(84, 166, 255, .3); border-radius: 17px; }
.avatar img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.image-failed img { display: none; }
.avatar-fallback { position: relative; z-index: 1; }
.avatar.medium { width: 48px; height: 48px; border-radius: 15px; }
.avatar.small { width: 44px; height: 44px; border-radius: 14px; font-size: 13px; }
.avatar.tiny { width: 38px; height: 38px; border-radius: 12px; font-size: 11px; }
.avatar.large { width: 82px; height: 82px; border-radius: 23px; font-size: 23px; }

.rank-badge { min-width: 50px; padding: 5px 7px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 5px; color: #b8cce0; background: #12263a; border: 1px solid var(--line); border-radius: 11px; }
.rank-badge b { grid-row: span 2; font-size: 23px; line-height: 1; }
.rank-badge > span { font-size: 8px; font-weight: 800; white-space: nowrap; }
.rank-badge .placement { color: #fff; }
.rank-s { color: #ffd66c; border-color: rgba(255, 200, 87, .35); }
.rank-a { color: #6fd6ff; border-color: rgba(66, 202, 255, .32); }
.rank-b { color: #7af0ae; }
.rank-c { color: #aebed0; }
.rank-d, .rank-e { color: #d5b38d; }

.search-field { min-height: 50px; margin-bottom: 13px; padding: 0 14px; display: flex; align-items: center; gap: 10px; color: var(--muted); background: #06131f; border: 1px solid var(--line); border-radius: 15px; }
.search-field:focus-within { color: #72b5ff; border-color: #398fe9; box-shadow: 0 0 0 3px rgba(33, 135, 255, .12); }
.search-field input { min-width: 0; flex: 1; height: 48px; color: var(--text); background: transparent; border: 0; outline: 0; }
.player-card { padding: 13px; background: linear-gradient(145deg, #0b1d2c, #071521); border: 1px solid var(--line); border-radius: var(--radius); }
.player-card.inactive { opacity: .65; }
.player-main { min-width: 0; display: flex; align-items: center; gap: 11px; }
.nickname-line { display: flex; align-items: center; gap: 7px; }
.shirt-number { padding: 2px 5px; color: #8fbce9 !important; font-size: 9px !important; font-weight: 850; background: #132a3e; border-radius: 6px; }
.profile-stats { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px 9px; }
.profile-stats span { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 9px; }
.profile-stats .icon { width: 12px; height: 12px; color: #62a9f8; }
.level-meter { height: 5px; margin-top: 11px; overflow: hidden; background: #14283b; border-radius: 99px; }
.level-meter i { display: block; height: 100%; background: linear-gradient(90deg, #167cff, #41cbff); border-radius: inherit; }
.player-footer { min-height: 38px; margin-top: 7px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.tier-copy, .readonly-label { color: var(--muted); font-size: 10px; }
.readonly-label { display: inline-flex; align-items: center; gap: 4px; }
.readonly-label .icon { width: 13px; height: 13px; }
.row-actions { display: flex; gap: 6px; }
.mini-btn { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: #cce3fb; background: #10253a; border: 1px solid var(--line); border-radius: 12px; }
.mini-btn.danger { color: #ff8d99; background: #2d141a; }
.mini-btn .icon { width: 17px; height: 17px; }

.panel { margin-top: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form-grid { display: grid; gap: 13px; }
.field label { margin: 0 0 7px 2px; display: block; color: #c0d0de; font-size: 12px; font-weight: 800; }
.field > small { margin: 6px 2px 0; display: block; color: var(--muted); font-size: 10px; }
.field input, .field select { width: 100%; min-height: 50px; padding: 0 13px; color: var(--text); background: #06131f; border: 1px solid rgba(145, 184, 219, .22); border-radius: 14px; outline: 0; }
.field input:focus, .field select:focus { border-color: #398fe9; box-shadow: 0 0 0 3px rgba(33, 135, 255, .12); }
.field input:disabled, .field select:disabled { color: #aebfd0; cursor: not-allowed; opacity: .8; background: #091621; }
.two-columns, .team-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.selector button { min-height: 46px; color: #acc1d4; font-size: 12px; font-weight: 850; background: #102439; border: 1px solid var(--line); border-radius: 13px; }
.selector button.active { color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); border-color: #4c9eff; }
.selector button:disabled { cursor: not-allowed; opacity: .8; }
.hint { padding: 11px 12px; display: flex; align-items: flex-start; gap: 8px; color: #a9c9e8; font-size: 11px; line-height: 1.45; background: #0b2947; border: 1px solid #164b76; border-radius: 13px; }
.hint .icon { width: 17px; height: 17px; margin-top: 1px; }
.notice { margin-bottom: 12px; padding: 12px 13px; display: flex; align-items: flex-start; gap: 9px; color: #cce6ff; font-size: 12px; background: #0b2c4f; border: 1px solid #17527f; border-radius: 14px; }
.notice > div { display: flex; flex-direction: column; gap: 3px; }
.notice span { color: #aac9e5; font-size: 11px; line-height: 1.4; }
.notice.success { color: #b8f6d2; background: #0b3120; border-color: #17613a; }
.count-chip { padding: 7px 9px; color: #8cc2ff; font-size: 10px; font-weight: 850; white-space: nowrap; background: #0d3158; border-radius: 999px; }
.participant-row { min-height: 68px; padding: 10px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.participant-row > input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--blue); }
.participant-row.readonly { cursor: default; }
.participant-row.readonly > input { cursor: not-allowed; opacity: .65; }
.level-token { min-width: 44px; display: flex; flex-direction: column; align-items: center; }
.level-token b { font-size: 19px; }
.level-token small { color: #6eacf2; font-size: 8px; font-weight: 850; }
.sticky-action { margin-top: 14px; }

.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.team-card { min-width: 0; overflow: hidden; background: linear-gradient(145deg, #0c2743, #071521); border: 1px solid #206abe; border-radius: var(--radius); }
.team-card:nth-child(even) { background: linear-gradient(145deg, #1b2734, #09121b); border-color: #5d7186; }
.team-card header { padding: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.team-card header span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.team-card h3 { max-width: 120px; margin: 2px 0 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.team-card header > strong { color: #6cb2ff; font-size: 27px; line-height: 1; }
.team-card header > strong small { margin-left: 2px; font-size: 8px; text-transform: uppercase; }
.team-members { padding: 4px 10px 9px; }
.team-player { min-width: 0; min-height: 58px; padding: 9px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, .065); }
.team-player:last-child { border-bottom: 0; }
.team-player > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.team-player b, .team-player small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-player b { font-size: 11px; }
.team-player b em { color: #82b9ef; font-size: 9px; font-style: normal; }
.team-player span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.team-player > strong { min-width: 25px; display: flex; flex-direction: column; align-items: center; color: #75b6ff; font-size: 15px; }
.team-player > strong small { color: var(--muted); font-size: 8px; }
.balance-banner { margin: 13px 0; padding: 14px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #0b345c, #0d2134); border: 1px solid rgba(50, 145, 247, .38); border-radius: var(--radius); }
.balance-banner .icon { color: #68b0ff; }
.balance-banner span, .balance-banner small { color: #abc5dc; font-size: 11px; }
.balance-banner strong { color: #5cadff; font-size: 26px; }

.photo-editor { padding: 12px; display: flex; align-items: center; gap: 13px; background: #071522; border: 1px solid var(--line); border-radius: 17px; }
.photo-editor > div:last-child { min-width: 0; display: flex; flex-direction: column; }
.photo-editor > div > span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; cursor: pointer; opacity: 0; }
.hero-photo-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 210px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #0c3340, #082d20); border: 1px solid rgba(96, 182, 163, .3); border-radius: 19px; }
.hero-photo-preview::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(2, 14, 20, .68), rgba(2, 16, 21, .12)); }
.hero-photo-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo-preview > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #d8f4e7; text-align: center; }
.hero-photo-preview > div .icon { width: 34px; height: 34px; margin-bottom: 4px; color: #63dfa0; }
.hero-photo-preview > div span { color: #99c8b1; font-size: 11px; }
.hero-upload-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.field-notice { margin: 0; }
.rank-preview { min-height: 61px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #0b2845, #0b1928); border: 1px solid var(--line-strong); border-radius: 15px; }
.rank-letter { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; font-weight: 950; background: #102940; border: 1px solid currentColor; border-radius: 12px; }
.rank-preview > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.rank-preview small { color: var(--muted); }
.toggle-row { min-height: 64px; padding: 11px 12px; display: flex; align-items: center; gap: 11px; background: #071522; border: 1px solid var(--line); border-radius: 15px; }
.toggle-row input { width: 23px; height: 23px; accent-color: var(--blue); }
.toggle-row span { display: flex; flex-direction: column; gap: 3px; }
.toggle-row small { color: var(--muted); }
.form-error { padding: 11px 12px; color: #ffc1c8; font-size: 12px; line-height: 1.4; background: #37151c; border: 1px solid #70303a; border-radius: 13px; }
.help-text, .modal-summary { color: var(--muted); font-size: 11px; text-align: center; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { min-height: 134px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; background: linear-gradient(145deg, rgba(7, 26, 35, .62), rgba(4, 19, 25, .72)); border: 1px solid rgba(107, 171, 204, .13); border-radius: var(--radius); box-shadow: inset 0 1px rgba(255, 255, 255, .02); }
.empty-state > .icon { width: 30px; height: 30px; margin-bottom: 9px; color: #63aef5; }
.empty-state h2 { margin: 0; color: #dbe8f3; font-size: 16px; }
.empty-state p { max-width: 330px; margin: 7px 0 0; font-size: 12px; line-height: 1.5; }
.empty-state .btn { margin-top: 14px; }
.skeleton-stack { display: grid; gap: 12px; }
.skeleton { height: 92px; overflow: hidden; background: #0a1c2b; border-radius: var(--radius); }
.skeleton.hero-skeleton { height: 264px; border-radius: 28px; }
.skeleton::after { width: 70%; height: 100%; display: block; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .055), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(180%); } }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(100%, 720px); max-height: 91dvh; overflow: auto; padding: 18px 17px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #081b25, #05141c); border: 1px solid rgba(111, 178, 211, .2); border-radius: 26px 26px 0 0; box-shadow: 0 -22px 70px rgba(0, 0, 0, .55); }
.modal-header { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-header h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); width: min(calc(100% - 28px), 620px); padding: 13px 15px; color: #fff; font-size: 12px; background: #12304b; border: 1px solid #295b83; border-radius: 14px; box-shadow: var(--shadow); pointer-events: none; opacity: 0; transform: translate(-50%, 18px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #3a171d; border-color: #7e3440; }

.history-actions { min-height: 48px; margin-top: 14px; display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center; }
.draw-experience { position: fixed; z-index: 300; inset: 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 16%, rgba(25, 111, 214, .32), transparent 32%), linear-gradient(155deg, #02070c, #061725 52%, #02090e); }
.draw-experience-bar { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; min-height: calc(62px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.draw-live { display: inline-flex; align-items: center; gap: 7px; color: #9ecfff; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.draw-live .icon { width: 17px; height: 17px; }
.draw-skip { min-height: 42px; padding: 0 12px; color: #c4d3df; font-size: 11px; font-weight: 800; background: rgba(7, 25, 36, .72); border: 1px solid rgba(144, 188, 218, .26); border-radius: 13px; }
.draw-field-lines { position: absolute; inset: 0; pointer-events: none; opacity: .34; background: linear-gradient(90deg, transparent 49.85%, rgba(111, 183, 232, .18) 50%, transparent 50.15%), linear-gradient(0deg, transparent 49.85%, rgba(111, 183, 232, .09) 50%, transparent 50.15%); }
.draw-field-lines::before { position: absolute; top: 50%; left: 50%; width: min(58vw, 420px); aspect-ratio: 1; content: ""; border: 1px solid rgba(112, 185, 233, .15); border-radius: 50%; transform: translate(-50%, -50%); }
.draw-stage { position: relative; z-index: 2; width: min(100%, 900px); height: 100%; margin: auto; overflow: auto; padding: calc(76px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: grid; place-items: center; scrollbar-width: thin; }
.draw-stage > * { width: 100%; }
.draw-kicker { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #78bdff; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.draw-opening, .draw-countdown, .shuffle-stage, .reveal-round, .presentation-summary, .draw-outro, .presentation-final { text-align: center; }
.draw-opening h1, .presentation-summary h1, .draw-outro h1, .presentation-final h1 { margin: 22px 0 10px; font-size: clamp(34px, 10vw, 74px); font-style: italic; line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.draw-opening h1 em { display: block; color: #258bff; font-style: inherit; }
.draw-opening p, .shuffle-stage p, .draw-outro p, .presentation-final > p { color: #a9bfd1; font-size: 13px; line-height: 1.5; }
.draw-loader { height: 32px; margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.draw-loader i { width: 8px; height: 8px; background: #42a0ff; border-radius: 50%; animation: draw-pulse .9s ease-in-out infinite alternate; }
.draw-loader i:nth-child(2) { animation-delay: .18s; }
.draw-loader i:nth-child(3) { animation-delay: .36s; }
.draw-countdown span { display: block; font-size: clamp(78px, 28vw, 190px); font-weight: 950; font-style: italic; line-height: .85; letter-spacing: -.08em; text-shadow: 0 0 46px rgba(37, 139, 255, .48); animation: count-in .58s ease both; }
.shuffle-stage h2 { margin: 13px 0 22px; font-size: clamp(23px, 6vw, 38px); }
.shuffle-strip { display: flex; justify-content: center; gap: 9px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.shuffle-strip > div { min-width: 96px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(10, 33, 49, .86); border: 1px solid rgba(94, 166, 224, .18); border-radius: 16px; animation: shuffle-card 1.1s ease-in-out infinite alternate; }
.shuffle-strip > div:nth-child(even) { animation-direction: alternate-reverse; }
.shuffle-strip b { max-width: 88px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shuffle-strip small { color: #86a2b8; font-size: 8px; }
.duel-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(8px, 4vw, 32px); }
.round-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.round-grid.teams-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reveal-player { min-width: 0; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(155deg, rgba(11, 44, 75, .94), rgba(5, 20, 31, .95)); border: 1px solid rgba(63, 151, 239, .42); border-radius: 24px; box-shadow: 0 22px 44px rgba(0, 0, 0, .26); animation: reveal-card .48s ease both; }
.reveal-player:nth-child(even) { animation-delay: .08s; }
.reveal-player.empty { min-height: 190px; justify-content: center; color: var(--muted); }
.avatar.reveal { width: clamp(76px, 22vw, 110px); height: clamp(76px, 22vw, 110px); font-size: 25px; border-radius: 30%; }
.reveal-team { max-width: 100%; margin-top: 12px; overflow: hidden; color: #72b7ff; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.reveal-player h3 { max-width: 100%; margin: 5px 0 3px; overflow: hidden; font-size: clamp(17px, 5vw, 27px); text-overflow: ellipsis; white-space: nowrap; }
.reveal-player p { margin: 0; color: #a8becf; font-size: 11px; }
.versus-mark { color: #ffc857; font-size: clamp(21px, 6vw, 44px); font-style: italic; text-shadow: 0 0 25px rgba(255, 200, 87, .35); }
.presentation-summary { align-self: start; }
.presentation-summary h1, .presentation-final h1 { font-size: clamp(30px, 8vw, 58px); }
.presentation-summary .team-grid, .presentation-final .team-grid { margin-top: 20px; text-align: left; }
.presentation-summary .balance-banner, .presentation-final .balance-banner { background: rgba(10, 48, 80, .9); }
.draw-outro > .icon { width: 74px; height: 74px; margin: 0 auto; color: #4ba4ff; filter: drop-shadow(0 0 22px rgba(37, 139, 255, .44)); }
.equilibrium-seal { width: fit-content; margin: 16px auto 0; padding: 10px 13px; display: flex; align-items: center; gap: 7px; color: #baf5d2; font-size: 11px; letter-spacing: .08em; background: rgba(12, 72, 43, .72); border: 1px solid rgba(69, 211, 132, .36); border-radius: 999px; }
.presentation-actions { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
@keyframes draw-pulse { to { transform: translateY(-9px); opacity: .4; } }
@keyframes count-in { from { opacity: 0; transform: scale(.55); } 70% { transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes shuffle-card { from { transform: translateY(-8px); opacity: .55; } to { transform: translateY(8px); opacity: 1; } }
@keyframes reveal-card { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

:focus-visible { outline: 3px solid rgba(90, 170, 255, .72); outline-offset: 2px; }
@media (hover: hover) {
  .action-card:hover, .player-card:hover, .ranking-row:hover, .history-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .btn:hover:not(:disabled), .icon-button:hover, .mini-btn:hover { filter: brightness(1.12); }
}
button:active:not(:disabled), .action-card:active { transform: scale(.985); }

@media (min-width: 760px) {
  body { padding: 22px 0; }
  .app-shell { min-height: calc(100dvh - 44px); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; }
  .bottom-nav { bottom: 22px; border-radius: 0 0 28px 28px; }
  .content { padding-right: 20px; padding-left: 20px; }
  .modal { place-items: center; padding: 22px; }
  .modal-card { border-radius: 26px; }
}

@media (max-width: 430px) {
  .team-grid, .team-grid.many { grid-template-columns: 1fr; }
  .team-card h3 { max-width: 210px; }
  .presentation-actions { grid-template-columns: 1fr; }
  .presentation-final { align-self: start; }
  .round-grid { gap: 6px; }
  .round-grid .reveal-player { padding: 13px 5px; }
  .round-grid .avatar.reveal { width: 62px; height: 62px; border-radius: 18px; }
  .round-grid .reveal-player h3 { font-size: 14px; }
}

@media (max-width: 365px) {
  .content { padding-right: 10px; padding-left: 10px; }
  .hero { padding: 20px 17px; }
  .hero h1 { font-size: 36px; }
  .quick-grid { grid-template-columns: 1fr; }
  .action-card { min-height: 88px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .brand-mini b { font-size: 13px; }
  .brand-mini em { font-size: 12px; }
  .app-version-badge { margin-top: 2px; padding: 1px 5px; font-size: 8px; }
  .nav-item b { font-size: 10px; }
  .two-columns, .team-name-grid { grid-template-columns: 1fr; }
  .photo-editor { align-items: flex-start; }
  .photo-editor .button-row { flex-wrap: wrap; }
  .hero-photo-action span { display: none; }
  .hero-photo-action { width: 40px; padding: 0; justify-content: center; }
  .hero-signature { display: none; }
  .hero-upload-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===================================================================
   TEMA CLARO + LOGO OFICIAL + POLIMENTO MOBILE (v6)
   Mantém a apresentação do sorteio escura/cinematográfica por design.
   =================================================================== */
html, body { overflow-x: hidden; }
html { background: #e9eff3; }
body { color: var(--text); background: linear-gradient(180deg, #e9eff3 0, #f4f7f9 42%, #edf2f5 100%); }
.app-shell { background: #f6f8fa; box-shadow: 0 0 54px rgba(37, 62, 82, .12); }
.topbar { padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); background: rgba(249, 251, 252, .94); border-color: rgba(38, 78, 109, .12); box-shadow: 0 5px 18px rgba(30, 58, 79, .05); }
.brand-mini img { width: 40px; height: 40px; padding: 1px; object-fit: contain; background: #fff; border: 1px solid #b7c8d5; border-radius: 12px; box-shadow: 0 3px 10px rgba(37, 68, 91, .08); }
.brand-mini b { color: #1a2f42; }
.brand-mini em { color: #0f6fdf; }
.icon-button { color: #1f4563; background: #fff; border-color: #cbd7df; box-shadow: 0 3px 10px rgba(30, 60, 82, .06); }
.content { padding-right: max(18px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); }
.bottom-nav { padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); background: rgba(250, 252, 253, .97); border-color: rgba(38, 78, 109, .13); box-shadow: 0 -9px 30px rgba(25, 52, 73, .08); }
.nav-item { color: #687b8b; }
.nav-item.active { color: #086edb; background: #e8f2ff; box-shadow: inset 0 0 0 1px rgba(35, 124, 222, .10); }

.hero { min-height: 320px; padding-top: 22px; color: #10283c; background: linear-gradient(145deg, #fff, #edf5fb 70%, #edf7f2); border-color: #bfd4e2; box-shadow: 0 18px 42px rgba(34, 67, 91, .12); }
.hero-brand-logo { position: relative; z-index: 2; width: 82px; height: 82px; margin-bottom: 12px; padding: 2px; object-fit: contain; background: #fff; border: 1.5px solid #9fb9cb; border-radius: 22px; box-shadow: 0 8px 22px rgba(25, 58, 82, .13); }
.hero.has-photo .hero-overlay { background: linear-gradient(90deg, rgba(250, 252, 253, .96) 0%, rgba(250, 252, 253, .86) 43%, rgba(250, 252, 253, .48) 76%, rgba(250, 252, 253, .18) 100%), linear-gradient(0deg, rgba(248, 251, 252, .58), transparent 58%); }
.hero:not(.has-photo) .hero-overlay, .hero.photo-failed .hero-overlay { background: radial-gradient(circle at 86% 10%, rgba(30, 126, 231, .16), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.46), rgba(226,244,235,.52)); }
.hero-field-art { opacity: .42; background: linear-gradient(112deg, transparent 0 49.7%, rgba(19, 95, 68, .13) 50%, transparent 50.3%), linear-gradient(0deg, rgba(102, 198, 142, .28), transparent 70%); }
.hero-field-art::before { border-color: rgba(27, 104, 75, .13); }
.hero-field-art i { background: rgba(27, 104, 75, .10); }
.hero-photo { filter: saturate(.94) contrast(1.01) brightness(1.03); }
.hero-photo-action { color: #184665; background: rgba(255, 255, 255, .90); border-color: #bed0dd; box-shadow: 0 5px 16px rgba(27, 62, 86, .10); }
.hero-photo-action .icon { color: #0e75e5; }
.hero-signature { color: #557080; }
.hero-signature .icon { color: #15925a; }
.eyebrow { color: #35576d; background: rgba(255,255,255,.86); border-color: #c6d5df; }
.eyebrow, .section-kicker { color: #0e6fcf; }
.hero h1 { margin-top: 8px; color: #122a3d; text-shadow: none; }
.hero h1 span { color: #0d76e8; }
.hero p { color: #4d6475; }
.status-pill { color: #496476; background: rgba(255,255,255,.90); border-color: #c8d5de; }
.status-pill.admin { color: #12653d; background: #eefaf3; border-color: #a9dfc0; }

.action-card, .ranking-row, .history-row, .player-card, .panel, .participant-row { color: var(--text); background: #fff; border-color: #d7e0e6; box-shadow: 0 8px 24px rgba(35, 66, 87, .06); }
.action-card::after { background: radial-gradient(circle, rgba(35, 128, 231, .09), transparent 68%); }
.action-card:nth-child(2)::after { background: radial-gradient(circle, rgba(30, 166, 95, .10), transparent 68%); }
.action-card > .icon { color: #1377e5; }
.action-card:nth-child(2) > .icon { color: #168f56; }
.profile-copy > span { color: #657988; }
.ranking-number, .history-row > strong { color: #0c72df; }
.history-row > span:first-child { color: #1478e5; background: #edf5ff; }
.rank-badge { color: #506577; background: #f4f7f9; border-color: #d1dde5; }
.rank-badge .placement { color: #243b4e; }
.avatar { color: #0e5ca8; background: linear-gradient(145deg, #e8f3ff, #d9e9f7); border-color: #b8d2e8; }
.search-field, .field input, .field select { color: var(--text); background: #fff; border-color: #cfdbe3; }
.search-field input { color: var(--text); }
.field label { color: #324c5f; }
.field input:disabled, .field select:disabled { color: #718493; background: #eef2f5; }
.shirt-number { color: #296a9d !important; background: #eef4f8; }
.level-meter { background: #e4ebf0; }
.mini-btn { color: #225274; background: #f4f8fb; border-color: #ccd9e2; }
.mini-btn.danger { color: #c43f50; background: #fff2f3; border-color: #efc7cd; }
.selector button { color: #4e6677; background: #f5f8fa; border-color: #ccd9e1; }
.selector button.active { color: #fff; }
.hint { color: #355f81; background: #edf6ff; border-color: #c2dff8; }
.notice { color: #285778; background: #edf6ff; border-color: #c2dff8; }
.notice span { color: #55748a; }
.notice.success { color: #236543; background: #eef9f2; border-color: #b9dfc8; }
.count-chip { color: #0d6cca; background: #e8f3ff; }
.level-token small { color: #226bb3; }

.team-card { color: #183044; background: linear-gradient(145deg, #fff, #edf6ff); border-color: #9fc9f0; box-shadow: 0 10px 28px rgba(31, 75, 109, .08); }
.team-card:nth-child(even) { background: linear-gradient(145deg, #fff, #f2f5f7); border-color: #c2cdd5; }
.team-card header { border-bottom-color: #dce4e9; }
.team-card header > strong { color: #0d73dd; }
.team-player { border-bottom-color: #e2e8ed; }
.team-player b em, .team-player > strong { color: #2e6da0; }
.balance-banner { background: #eef6ff; border-color: #bfdcf5; }
.balance-banner span, .balance-banner small { color: #58768c; }
.balance-banner strong { color: #0c70d7; }

.photo-editor, .toggle-row, .rank-preview { background: #fff; border-color: #d2dde5; }
.hero-photo-preview { background: linear-gradient(145deg, #edf6ff, #e8f5ed); border-color: #bdd9cc; }
.hero-photo-preview::after { background: linear-gradient(90deg, rgba(247,250,252,.30), rgba(247,250,252,.05)); }
.hero-photo-preview > div { color: #285946; }
.hero-photo-preview > div .icon { color: #168d54; }
.hero-photo-preview > div span { color: #637d70; }
.rank-letter { background: #f0f5f9; }
.form-error { color: #a2293a; background: #fff1f3; border-color: #efbcc5; }
.empty-state { color: var(--muted); background: #fff; border-color: #d8e2e8; box-shadow: none; }
.empty-state h2 { color: #294154; }
.skeleton { background: #e6edf2; }
.skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
.modal-backdrop { background: rgba(24, 43, 57, .42); }
.modal-card { color: var(--text); background: #f8fafb; border-color: #d0dce4; box-shadow: 0 -18px 60px rgba(31, 58, 78, .22); overscroll-behavior: contain; }
.toast { color: #fff; background: #1f5f91; border-color: #3977a7; }
.toast.error { background: #9e3140; border-color: #c75d69; }
.btn { color: #24445d; background: #f1f5f8; border-color: #cad8e1; }
.btn.primary { color: #fff; }
.btn.text { color: #0d6fcf; }
.btn.danger { color: #b73546; background: #fff0f2; border-color: #efc0c7; }
.admin-bar { color: #fff; }
.admin-bar span { color: #e8f3ff; }
.offline-bar { color: #785e08; background: #fff8dc; border-color: #e8d68e; }

/* Editor de recorte leve, sem biblioteca externa. */
body.crop-open { overflow: hidden; }
.crop-overlay { position: fixed; z-index: 260; inset: 0; display: grid; place-items: end center; padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(20, 38, 51, .58); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.crop-dialog { width: min(100%, 620px); max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); overflow: auto; padding: 16px; background: #fbfcfd; border: 1px solid #d2dde5; border-radius: 24px; box-shadow: 0 24px 70px rgba(20, 45, 63, .25); overscroll-behavior: contain; }
.crop-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crop-header h2 { margin: 4px 0 0; color: #183246; font-size: 20px; }
.crop-help { margin: 10px 0 12px; color: #5d7181; font-size: 12px; line-height: 1.45; }
.crop-canvas-wrap { position: relative; width: 100%; overflow: hidden; background: #e3e9ee; border: 1px solid #bdcbd5; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); touch-action: none; }
.crop-canvas-wrap.square { aspect-ratio: 1 / 1; }
.crop-canvas-wrap.landscape { aspect-ratio: 4 / 3; }
.crop-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.crop-canvas.dragging { cursor: grabbing; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 33.1%, rgba(255,255,255,.62) 33.33%, transparent 33.55%, transparent 66.45%, rgba(255,255,255,.62) 66.66%, transparent 66.9%), linear-gradient(0deg, transparent 33.1%, rgba(255,255,255,.62) 33.33%, transparent 33.55%, transparent 66.45%, rgba(255,255,255,.62) 66.66%, transparent 66.9%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.crop-zoom { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0,1fr) 50px; align-items: center; gap: 10px; color: #334f63; font-size: 12px; font-weight: 800; }
.crop-zoom input { width: 100%; accent-color: var(--blue); }
.crop-zoom output { color: #0b6fcf; text-align: right; font-variant-numeric: tabular-nums; }
.crop-actions { margin-top: 14px; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 9px; }

@media (min-width: 760px) {
  body { background: #e8eef2; }
  .app-shell { border-color: #d0dce4; }
  .bottom-nav { border-radius: 0 0 28px 28px; }
  .crop-overlay { place-items: center; }
}

@media (max-width: 430px) {
  .content { padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
  .topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .brand-mini { gap: 7px; }
  .brand-mini img { width: 38px; height: 38px; }
  .hero { min-height: 306px; padding: 20px 18px 22px; border-radius: 23px; }
  .hero-brand-logo { width: 70px; height: 70px; margin-bottom: 9px; border-radius: 19px; }
  .hero h1 { font-size: clamp(35px, 10.8vw, 47px); }
  .page-heading { align-items: flex-start; }
  .modal-card { max-height: calc(100dvh - env(safe-area-inset-top)); }
  .crop-dialog { padding: 14px; border-radius: 22px; }
  .crop-actions { grid-template-columns: 1fr; }
}

@media (max-width: 365px) {
  .content { padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
  .hero-brand-logo { width: 62px; height: 62px; }
  .brand-mini span { max-width: 128px; }
  .crop-dialog { padding: 12px; }
  .crop-help { font-size: 11px; }
}



/* ===================================================================
   POLIMENTO MOBILE + ESTADO DE CONEXAO (v7)
   =================================================================== */
.connection-bar { margin-bottom: 12px; min-height: 44px; padding: 9px 10px 9px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; color: #61510f; font-size: 11px; line-height: 1.35; background: #fff8dd; border: 1px solid #ead991; border-radius: 14px; box-shadow: 0 6px 18px rgba(60, 72, 42, .05); }
.connection-bar .icon { width: 17px; height: 17px; color: #9b7a09; }
.connection-bar span { min-width: 0; }
.connection-bar button { min-height: 34px; padding: 0 10px; color: #705b08; font-size: 10px; font-weight: 850; background: rgba(255,255,255,.74); border: 1px solid #dfcd80; border-radius: 10px; }
.connection-bar.offline { color: #77570b; background: #fff7d6; border-color: #e9d27b; }
.connection-bar.server { color: #6a4b15; background: #fff5e8; border-color: #eccf9e; }
.connection-bar.server .icon { color: #bb7715; }

/* Tipografia pequena com mais legibilidade. */
.section-kicker { font-size: 12px; line-height: 1.25; letter-spacing: .065em; }
.section-head h2 { font-size: 20px; }
.section-head a, .section-head button { font-size: 12px; }
.action-card small, .empty-state p { font-size: 12px; }
.history-actions { font-size: 12px; }

/* Logo mais refinada: menor no topo e protagonista apenas na home. */
.brand-mini img { width: 36px; height: 36px; border-width: 1px; border-radius: 11px; }
.hero-brand-logo { width: 74px; height: 74px; padding: 1px; border-width: 1px; border-radius: 20px; }
.hero { min-height: 300px; }

/* Mais folga real acima da barra do sistema no iPhone/PWA. */
.content { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
.bottom-nav { min-height: calc(74px + env(safe-area-inset-bottom)); }
.nav-item { min-height: 58px; }

@media (display-mode: standalone) {
  .content { padding-bottom: calc(122px + env(safe-area-inset-bottom)); }
  .bottom-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .app-shell, .bottom-nav { width: min(100%, 760px); }
}

@media (max-width: 430px) {
  .topbar { min-height: calc(64px + env(safe-area-inset-top)); }
  .content { padding-top: 16px; padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .hero { min-height: 290px; padding: 18px 16px 20px; }
  .hero-brand-logo { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 17px; }
  .section-head { margin-top: 26px; }
  .section-kicker { font-size: 11.5px; }
  .section-head h2 { font-size: 19px; }
  .nav-item { min-height: 60px; gap: 4px; }
  .nav-item b { font-size: 11px; }
  .connection-bar { grid-template-columns: auto minmax(0, 1fr); }
  .connection-bar button { grid-column: 2; justify-self: start; }
}

@media (max-width: 365px) {
  .brand-mini img { width: 34px; height: 34px; }
  .hero { min-height: 276px; }
  .hero-brand-logo { width: 58px; height: 58px; border-radius: 16px; }
  .section-kicker { font-size: 11px; letter-spacing: .05em; }
  .connection-bar { padding: 9px; font-size: 10.5px; }
}


/* ===== Placar final / estatísticas por jogador ===== */
.final-score {
  margin: 14px 0 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(31, 57, 78, .08);
}
.final-score > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.final-score > header h2 { margin: 4px 0 0; font-size: 20px; }
.final-score > header time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.score-board {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.score-team {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 10px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.score-team span { display: block; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.score-team strong { display: block; margin: 4px 0 2px; color: var(--text); font-size: clamp(32px, 10vw, 48px); line-height: 1; }
.score-team small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.score-team.win { border-color: rgba(36, 183, 107, .38); background: rgba(36, 183, 107, .08); }
.score-team.win small { color: var(--grass-dark); }
.score-team.draw { border-color: rgba(255, 200, 87, .52); background: rgba(255, 200, 87, .11); }
.score-team.loss { opacity: .88; }
.score-separator { align-self: center; color: var(--muted); font-size: 18px; font-weight: 900; }
.bad-ball {
  margin-top: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.bad-ball > .icon { width: 22px; height: 22px; color: var(--blue-dark); }
.bad-ball span:not(.avatar) { min-width: 0; display: flex; flex-direction: column; }
.bad-ball small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bad-ball b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bad-ball.empty { color: var(--muted); }
.score-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.score-input {
  padding: 12px;
  display: grid;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.score-input span { color: var(--text); font-size: 12px; font-weight: 900; }
.score-input input {
  width: 100%;
  min-height: 50px;
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}
.record-line {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}
.record-line strong,
.record-line em {
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.record-line strong { color: var(--grass-dark); background: rgba(36, 183, 107, .10); }
.record-line em { color: #6f5600; background: rgba(255, 200, 87, .18); }

@media (max-width: 430px) {
  .final-score { padding: 13px; }
  .final-score > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .final-score > header time { white-space: normal; }
  .score-board { gap: 5px; }
  .score-team { padding: 11px 6px; }
  .score-team strong { font-size: clamp(30px, 11vw, 42px); }
  .score-separator { font-size: 15px; }
  .score-form { gap: 8px; }
}
@media (max-width: 359px) {
  .score-board.teams-3,
  .score-board.teams-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-board.teams-3 .score-separator,
  .score-board.teams-4 .score-separator { display: none; }
}


/* ===================================================================
   MOBILE FIRST V9 — INTRO, CAPITÃES E APRESENTAÇÃO SEM VAZAR DA TELA
   =================================================================== */
.app-intro {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(31, 127, 227, .16), transparent 34%), #f5f8fa;
  transition: opacity .22s ease, visibility .22s ease;
}
.app-intro.leaving { opacity: 0; visibility: hidden; }
.app-intro-inner { width: min(100%, 360px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.app-intro-inner > img { width: 62px; height: 62px; margin-top: 14px; object-fit: contain; background: #fff; border: 1px solid #c7d4de; border-radius: 18px; box-shadow: 0 10px 28px rgba(28, 62, 87, .12); }
.app-intro-inner strong { margin-top: 12px; color: #18334a; font-size: clamp(22px, 7vw, 31px); font-style: italic; letter-spacing: -.04em; }
.app-intro-inner strong em { color: #0f73df; font-style: inherit; }
.app-intro-inner small { margin-top: 5px; color: #60798d; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.intro-ball { width: 62px; height: 62px; display: grid; place-items: center; color: #1678df; animation: intro-ball 1.05s cubic-bezier(.22,.8,.32,1) both; }
.intro-ball .icon { width: 58px; height: 58px; filter: drop-shadow(0 10px 14px rgba(14, 80, 142, .18)); }
@keyframes intro-ball {
  0% { opacity: 0; transform: translate3d(-42vw, -8px, 0) rotate(-260deg) scale(.76); }
  60% { opacity: 1; transform: translate3d(5px, -16px, 0) rotate(18deg) scale(1.04); }
  78% { transform: translate3d(0, 5px, 0) rotate(0) scale(.96); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

.team-player.captain { margin: 4px -4px; padding: 9px 4px; background: rgba(255, 200, 87, .09); border: 1px solid rgba(255, 200, 87, .34); border-radius: 12px; }
.captain-badge { margin-left: 6px; padding: 3px 5px; display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; color: #6d5000; font-size: 7px; font-style: normal; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; background: #ffdc7b; border-radius: 999px; }
.captain-badge .icon { width: 9px; height: 9px; }
.reveal-player.captain { border-color: rgba(255, 209, 91, .75); box-shadow: 0 0 0 2px rgba(255, 200, 87, .12), 0 20px 38px rgba(0, 0, 0, .26); }
.reveal-captain { margin-top: 9px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 4px; color: #ffe7a7; font-size: 8px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; background: rgba(117, 78, 0, .48); border: 1px solid rgba(255, 207, 87, .4); border-radius: 999px; }
.reveal-captain .icon { width: 11px; height: 11px; }

.draw-experience { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; }
.draw-stage { width: 100%; max-width: 900px; height: 100dvh; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.draw-stage > *, .duel-grid > *, .round-grid > * { min-width: 0; max-width: 100%; }
.presentation-summary, .presentation-final, .reveal-round, .shuffle-stage, .draw-opening, .draw-outro { max-width: 100%; overflow-x: hidden; }

@media (max-width: 430px) {
  .draw-experience-bar { min-height: calc(56px + env(safe-area-inset-top)); padding-top: calc(7px + env(safe-area-inset-top)); }
  .draw-live { max-width: 52vw; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .draw-skip { min-height: 38px; padding: 0 9px; font-size: 10px; }
  .draw-stage { padding: calc(62px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); place-items: start center; }
  .draw-opening, .draw-outro { align-self: center; margin: auto 0; }
  .draw-opening h1, .draw-outro h1, .presentation-summary h1, .presentation-final h1 { margin: 13px 0 8px; font-size: clamp(28px, 10.5vw, 43px); line-height: .94; }
  .draw-opening p, .shuffle-stage p, .draw-outro p, .presentation-final > p { font-size: 11.5px; }
  .draw-countdown { align-self: center; margin: auto 0; }
  .draw-countdown span { font-size: clamp(70px, 30vw, 126px); }
  .shuffle-stage { align-self: center; }
  .shuffle-stage h2 { margin: 10px 0 14px; font-size: clamp(20px, 6vw, 27px); }
  .shuffle-strip { width: 100%; max-width: 100%; gap: 6px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 2px 4px 8px; mask-image: none; scrollbar-width: none; }
  .shuffle-strip::-webkit-scrollbar { display: none; }
  .shuffle-strip > div { min-width: 74px; max-width: 74px; padding: 8px 5px; border-radius: 13px; }
  .shuffle-strip .avatar.small { width: 38px; height: 38px; }
  .shuffle-strip b { max-width: 64px; font-size: 9px; }
  .shuffle-strip small { font-size: 7px; }
  .duel-grid { margin-top: 12px; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 4px; }
  .round-grid { margin-top: 12px; gap: 5px; }
  .reveal-player { padding: 10px 5px; border-radius: 17px; }
  .avatar.reveal, .round-grid .avatar.reveal { width: clamp(54px, 17vw, 68px); height: clamp(54px, 17vw, 68px); border-radius: 18px; }
  .reveal-team { margin-top: 7px; font-size: 7.5px; }
  .reveal-player h3, .round-grid .reveal-player h3 { margin: 4px 0 2px; font-size: clamp(12px, 4vw, 15px); }
  .reveal-player p { font-size: 8.5px; }
  .reveal-captain { margin-top: 6px; padding: 4px 6px; font-size: 6.8px; }
  .versus-mark { font-size: 17px; }
  .presentation-summary, .presentation-final { align-self: start; }
  .presentation-summary .team-grid, .presentation-final .team-grid { margin-top: 12px; }
  .presentation-actions { margin-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .team-player.captain { margin-right: 0; margin-left: 0; }
  .captain-badge { display: flex; width: fit-content; margin: 4px 0 0; }
}

@media (max-width: 365px) {
  .draw-stage { padding-right: max(7px, env(safe-area-inset-right)); padding-left: max(7px, env(safe-area-inset-left)); }
  .draw-live { max-width: 48vw; letter-spacing: .08em; }
  .duel-grid { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 2px; }
  .reveal-player { padding: 8px 3px; }
  .avatar.reveal, .round-grid .avatar.reveal { width: 50px; height: 50px; }
  .reveal-player h3, .round-grid .reveal-player h3 { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-ball { animation: none; }
}


/* ===================================================================
   RESULTADOS V10 — ÚLTIMOS PLACARES + BOLA MUCHA RANK
   =================================================================== */
.result-tabs {
  margin: 2px 0 16px;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: #e7edf1;
  border: 1px solid #d2dde4;
  border-radius: 15px;
}
.result-tab {
  min-width: 0;
  min-height: 46px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #667c8d;
  background: transparent;
  border: 0;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 900;
}
.result-tab .icon { width: 17px; height: 17px; flex: 0 0 auto; }
.result-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-tab.active { color: #096fd8; background: #fff; box-shadow: 0 4px 15px rgba(31, 65, 88, .09); }
.placard-list, .bad-rank-list { display: grid; gap: 9px; }
.placard-card {
  width: 100%;
  min-width: 0;
  padding: 12px;
  color: var(--text);
  text-align: left;
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(35, 66, 87, .05);
}
.placard-card > header, .placard-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.placard-card > header span { color: #0b6fcf; font-size: 10px; font-weight: 950; text-transform: uppercase; }
.placard-card > header time { color: var(--muted); font-size: 10px; }
.placard-score { margin: 10px 0 8px; display: flex; align-items: stretch; justify-content: center; gap: 5px; min-width: 0; }
.placard-score > i { align-self: center; color: #91a1ad; font-size: 13px; font-style: normal; font-weight: 900; }
.placard-team { min-width: 0; flex: 1; padding: 8px 5px; text-align: center; background: #f4f7f9; border: 1px solid #e0e7eb; border-radius: 11px; }
.placard-team small { display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.placard-team b { display: block; margin-top: 2px; font-size: 24px; line-height: 1; }
.placard-team.win { background: #edf9f2; border-color: #c8ead6; }
.placard-team.win b { color: #16834e; }
.placard-team.draw { background: #fff9e8; border-color: #f3df9d; }
.placard-card > footer { color: var(--muted); font-size: 10px; }
.placard-bad { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: #765a00; font-weight: 850; }
.placard-bad .icon { width: 13px; height: 13px; }
.bad-rank-hero {
  margin-bottom: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #fffaf0, #fff 70%);
  border: 1px solid #ead9a4;
  border-radius: 18px;
  box-shadow: 0 9px 25px rgba(92, 72, 14, .07);
}
.bad-rank-hero > span { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; color: #9a7200; background: #fff0bd; border-radius: 15px; }
.bad-rank-hero > span .icon { width: 28px; height: 28px; }
.bad-rank-hero small { color: #8a6a0d; font-size: 9px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.bad-rank-hero h2 { margin: 2px 0; font-size: 22px; }
.bad-rank-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.bad-rank-row {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(35, 66, 87, .05);
}
.bad-rank-position { width: 30px; flex: 0 0 30px; color: #936d00; font-size: 15px; text-align: center; }
.bad-rank-row .profile-copy { min-width: 0; flex: 1; }
.bad-rank-count { min-width: 66px; padding: 6px 7px; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: 3px; color: #715500; background: #fff5d8; border-radius: 11px; text-align: center; }
.bad-rank-count .icon { width: 14px; height: 14px; }
.bad-rank-count b { font-size: 18px; line-height: 1; }
.bad-rank-count small { grid-column: 1 / -1; margin-top: 2px; font-size: 7px; font-weight: 900; text-transform: uppercase; }

@media (max-width: 430px) {
  .result-tabs { position: sticky; z-index: 8; top: calc(61px + env(safe-area-inset-top)); }
  .result-tab { min-height: 44px; padding-right: 6px; padding-left: 6px; font-size: 10px; }
  .placard-score { gap: 4px; }
  .placard-team { padding-right: 4px; padding-left: 4px; }
  .placard-team b { font-size: 22px; }
  .bad-rank-row { padding-right: 8px; padding-left: 8px; }
  .bad-rank-count { min-width: 60px; }
}


/* ===================================================================
   APRESENTAÇÃO MOBILE V11 — VIEWPORT REAL + MICROAJUSTES IPHONE/ANDROID
   Corrige vazamento em telas curtas, barras móveis do navegador e rotação.
   =================================================================== */
.draw-experience {
  width: min(100vw, var(--draw-viewport-width, 100vw));
  height: var(--draw-viewport-height, 100dvh);
  min-height: 0;
  max-width: 100vw;
  max-height: var(--draw-viewport-height, 100dvh);
  overflow: clip;
}
.draw-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}
.draw-stage > *,
.reveal-round,
.duel-grid,
.round-grid,
.presentation-summary,
.presentation-final {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 430px) {
  .draw-experience-bar {
    min-height: calc(52px + env(safe-area-inset-top));
    padding: calc(6px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  }
  .draw-live { max-width: 50vw; font-size: 8.5px; letter-spacing: .08em; }
  .draw-live .icon { width: 14px; height: 14px; }
  .draw-skip { min-height: 34px; padding: 0 8px; font-size: 9px; border-radius: 11px; }
  .draw-stage {
    padding: calc(56px + env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  }
  .draw-kicker { gap: 5px; font-size: 8.5px; letter-spacing: .09em; }
  .draw-kicker .icon { width: 14px; height: 14px; }
  .draw-opening h1,
  .draw-outro h1,
  .presentation-summary h1,
  .presentation-final h1 { margin: 9px 0 6px; font-size: clamp(25px, 9.4vw, 38px); line-height: .96; }
  .draw-opening p,
  .shuffle-stage p,
  .draw-outro p,
  .presentation-final > p { margin: 6px auto 0; max-width: 330px; font-size: 10.5px; line-height: 1.35; }
  .draw-loader { height: 24px; margin-top: 16px; }
  .draw-countdown span { font-size: clamp(64px, 27vw, 108px); }
  .shuffle-stage h2 { margin: 7px 0 10px; font-size: clamp(18px, 5.7vw, 24px); line-height: 1.05; }
  .shuffle-strip { gap: 5px; padding-bottom: 5px; }
  .shuffle-strip > div { min-width: 66px; max-width: 66px; padding: 6px 4px; gap: 2px; border-radius: 11px; }
  .shuffle-strip .avatar.small { width: 33px; height: 33px; border-radius: 10px; }
  .shuffle-strip b { max-width: 58px; font-size: 8px; }
  .shuffle-strip small { font-size: 6.5px; }
  .duel-grid { margin-top: 8px; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 3px; }
  .round-grid { margin-top: 8px; gap: 4px; }
  .reveal-player { min-height: 0; padding: 7px 4px; border-radius: 14px; box-shadow: 0 12px 24px rgba(0, 0, 0, .22); }
  .avatar.reveal,
  .round-grid .avatar.reveal {
    width: min(15vw, 9.2dvh, 58px);
    height: min(15vw, 9.2dvh, 58px);
    min-width: 44px;
    min-height: 44px;
    border-radius: 15px;
  }
  .reveal-team { margin-top: 5px; font-size: 6.8px; letter-spacing: .07em; }
  .reveal-player h3,
  .round-grid .reveal-player h3 { margin: 3px 0 1px; font-size: clamp(11px, 3.7vw, 14px); line-height: 1.05; }
  .reveal-player p { font-size: 7.7px; line-height: 1.2; }
  .reveal-captain { margin-top: 4px; padding: 3px 5px; gap: 3px; font-size: 6.2px; line-height: 1; }
  .reveal-captain .icon { width: 9px; height: 9px; }
  .versus-mark { font-size: 15px; }
  .presentation-summary .team-grid,
  .presentation-final .team-grid { margin-top: 8px; gap: 7px; }
  .presentation-summary .team-card header,
  .presentation-final .team-card header { padding: 9px 10px; }
  .presentation-summary .team-card h3,
  .presentation-final .team-card h3 { font-size: 14px; }
  .presentation-summary .team-card header > strong,
  .presentation-final .team-card header > strong { font-size: 22px; }
  .presentation-summary .team-members,
  .presentation-final .team-members { padding: 2px 8px 5px; }
  .presentation-summary .team-player,
  .presentation-final .team-player { min-height: 45px; padding: 5px 0; gap: 6px; }
  .presentation-summary .avatar.tiny,
  .presentation-final .avatar.tiny { width: 31px; height: 31px; border-radius: 9px; font-size: 9px; }
  .presentation-summary .team-player b,
  .presentation-final .team-player b { font-size: 10px; }
  .presentation-summary .team-player span small,
  .presentation-final .team-player span small { margin-top: 1px; font-size: 7px; }
  .presentation-summary .team-player > strong,
  .presentation-final .team-player > strong { min-width: 22px; font-size: 13px; }
  .presentation-summary .balance-banner,
  .presentation-final .balance-banner { margin-top: 8px; padding: 9px; }
  .equilibrium-seal { margin-top: 9px; padding: 7px 9px; font-size: 8px; }
  .presentation-actions { margin-top: 9px; gap: 6px; }
  .presentation-actions .btn { min-height: 40px; }
}

@media (max-width: 430px) and (max-height: 720px) {
  .draw-stage { padding-top: calc(52px + env(safe-area-inset-top)); }
  .draw-opening h1,
  .draw-outro h1,
  .presentation-summary h1,
  .presentation-final h1 { font-size: clamp(23px, 8.6vw, 34px); }
  .draw-opening p,
  .shuffle-stage p,
  .draw-outro p,
  .presentation-final > p { font-size: 9.5px; }
  .draw-countdown span { font-size: clamp(58px, 24vw, 92px); }
  .avatar.reveal,
  .round-grid .avatar.reveal { width: min(13.5vw, 8dvh, 52px); height: min(13.5vw, 8dvh, 52px); min-width: 40px; min-height: 40px; }
  .reveal-player { padding-top: 5px; padding-bottom: 5px; }
  .reveal-player p { font-size: 7px; }
}

@media (max-width: 430px) and (max-height: 620px) {
  .draw-experience-bar { min-height: calc(46px + env(safe-area-inset-top)); }
  .draw-stage { padding-top: calc(47px + env(safe-area-inset-top)); padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .draw-live { font-size: 7.5px; }
  .draw-skip { min-height: 30px; font-size: 8px; }
  .draw-kicker { font-size: 7.5px; }
  .draw-opening h1,
  .draw-outro h1,
  .presentation-summary h1,
  .presentation-final h1 { margin-top: 6px; font-size: clamp(21px, 8vw, 30px); }
  .draw-opening p,
  .shuffle-stage p,
  .draw-outro p,
  .presentation-final > p { font-size: 8.5px; }
  .duel-grid, .round-grid { margin-top: 5px; }
  .avatar.reveal,
  .round-grid .avatar.reveal { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .reveal-team { margin-top: 3px; }
  .reveal-player h3,
  .round-grid .reveal-player h3 { font-size: 10.5px; }
  .reveal-player p { display: none; }
  .reveal-captain { margin-top: 3px; padding: 2px 4px; font-size: 5.8px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .draw-experience-bar { min-height: calc(42px + env(safe-area-inset-top)); }
  .draw-stage { padding: calc(44px + env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)); }
  .draw-kicker { font-size: 7.5px; }
  .draw-opening h1,
  .draw-outro h1,
  .presentation-summary h1,
  .presentation-final h1 { margin: 5px 0 4px; font-size: clamp(22px, 6vw, 31px); }
  .draw-opening p,
  .shuffle-stage p,
  .draw-outro p,
  .presentation-final > p { font-size: 8.5px; }
  .draw-countdown span { font-size: min(25vh, 88px); }
  .duel-grid, .round-grid { margin-top: 5px; }
  .round-grid.teams-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reveal-player { padding: 4px 4px; }
  .avatar.reveal,
  .round-grid .avatar.reveal { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 12px; }
  .reveal-team { margin-top: 2px; font-size: 6px; }
  .reveal-player h3,
  .round-grid .reveal-player h3 { margin: 2px 0 0; font-size: 10px; }
  .reveal-player p { display: none; }
  .reveal-captain { margin-top: 2px; padding: 2px 4px; font-size: 5.5px; }
  .presentation-summary .team-grid,
  .presentation-final .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .presentation-summary .team-player,
  .presentation-final .team-player { min-height: 36px; padding: 3px 0; }
  .presentation-summary .avatar.tiny,
  .presentation-final .avatar.tiny { width: 27px; height: 27px; }
}


/* ===================================================================
   V12 — BOLA MUCHA, RANK DE CAPITÃES E SORTEANDO MOBILE
   =================================================================== */
.draw-countdown.is-word { width: 100%; max-width: 100%; }
.draw-countdown span.is-word {
  width: fit-content;
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  overflow: hidden;
  font-size: clamp(38px, 11vw, 82px);
  line-height: .92;
  letter-spacing: -.045em;
  text-overflow: clip;
  white-space: nowrap;
}

.captain-rank-list { display: grid; gap: 9px; }
.captain-rank-hero {
  margin-bottom: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff8df, #fff);
  border: 1px solid #ead99d;
  border-radius: 17px;
}
.captain-rank-hero > span { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; color: #805d00; background: #ffe9a0; border-radius: 15px; }
.captain-rank-hero > span .icon { width: 27px; height: 27px; }
.captain-rank-hero small { color: #80620d; font-size: 9px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.captain-rank-hero h2 { margin: 2px 0; font-size: 22px; }
.captain-rank-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.captain-rank-row {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(35, 66, 87, .05);
}
.captain-rank-position { width: 30px; flex: 0 0 30px; color: #8a6500; font-size: 15px; text-align: center; }
.captain-rank-row .profile-copy { min-width: 0; flex: 1; }
.captain-rank-record { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }
.captain-rank-record span { padding: 5px 2px; display: grid; place-items: center; color: #334b5f; background: #f3f6f8; border-radius: 9px; }
.captain-rank-record b { font-size: 14px; line-height: 1; }
.captain-rank-record small { margin-top: 2px; font-size: 7px; font-weight: 950; }
.captain-rank-record span:first-child { color: #126c3c; background: #ecf8f1; }
.captain-rank-record span:last-child { color: #9b3434; background: #fff0f0; }

@media (max-width: 430px) {
  .result-tabs { gap: 3px; padding: 3px; }
  .result-tab { min-width: 0; padding-right: 6px; padding-left: 6px; gap: 5px; font-size: 12px; }
  .result-tab .icon { width: 13px; height: 13px; }
  .draw-countdown span.is-word { max-width: calc(100vw - 28px); font-size: clamp(24px, 10vw, 38px); letter-spacing: -.035em; }
  .reveal-round { width: 100%; padding-top: 1px; }
  .duel-grid, .round-grid { width: 100%; max-width: 100%; }
  .captain-rank-hero { padding: 11px; gap: 9px; }
  .captain-rank-hero > span { width: 40px; height: 40px; border-radius: 12px; }
  .captain-rank-hero h2 { font-size: 18px; }
  .captain-rank-hero p { font-size: 9.5px; line-height: 1.3; }
  .captain-rank-row { padding: 8px 7px; gap: 6px; }
  .captain-rank-position { width: 24px; flex-basis: 24px; font-size: 13px; }
  .captain-rank-row .avatar.medium { width: 38px; height: 38px; }
  .captain-rank-row .profile-copy b { font-size: 11px; }
  .captain-rank-row .profile-copy span,
  .captain-rank-row .profile-copy small { font-size: 8px; }
  .captain-rank-record { grid-template-columns: repeat(3, 23px); gap: 2px; }
  .captain-rank-record b { font-size: 12px; }
}

@media (max-width: 365px) {
  .result-tab { font-size: 12px; }
  .result-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .draw-countdown span.is-word { max-width: calc(100vw - 20px); font-size: clamp(22px, 9.4vw, 33px); }
  .captain-rank-row .profile-copy > span { display: none; }
}

@media (max-width: 430px) and (max-height: 620px) {
  .draw-countdown span.is-word { font-size: clamp(21px, 8.6vw, 31px); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .draw-countdown span.is-word { max-width: calc(100vw - 80px); font-size: clamp(22px, 8vh, 34px); }
}


/* ===================================================================
   V13 — CONVIDADOS, CONFIGURAÇÕES E PERFIL DETALHADO
   =================================================================== */
.avatar-button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 18px;
}
.avatar-button:focus-visible { outline: 3px solid rgba(37, 139, 255, .28); outline-offset: 3px; }
.avatar-button .avatar { cursor: zoom-in; transition: transform .16s ease, box-shadow .16s ease; }
@media (hover: hover) { .avatar-button:hover .avatar { transform: scale(1.035); box-shadow: 0 8px 24px rgba(20, 75, 120, .14); } }

.avatar.profile-large {
  width: min(58vw, 230px);
  height: min(58vw, 230px);
  max-width: 230px;
  max-height: 230px;
  border-radius: 28px;
  font-size: 48px;
  box-shadow: 0 18px 42px rgba(26, 67, 96, .16);
}
.player-profile-modal { display: grid; gap: 14px; }
.player-profile-photo { display: grid; place-items: center; padding: 4px 0 0; }
.player-profile-title { text-align: center; }
.player-profile-title h2 { margin: 4px 0 1px; font-size: clamp(25px, 8vw, 34px); }
.player-profile-title p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-level-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-level-card > div { min-width: 0; padding: 12px; text-align: center; background: #fff; border: 1px solid #d9e3e9; border-radius: 15px; }
.profile-level-card span, .profile-level-card small { display: block; color: var(--muted); font-size: 9px; font-weight: 800; }
.profile-level-card strong { display: block; margin: 2px 0; color: var(--blue-dark); font-size: 28px; line-height: 1; }
.profile-meter { margin-top: -5px; }
.profile-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.profile-detail-grid > div { min-width: 0; padding: 10px; background: #fff; border: 1px solid #dce5ea; border-radius: 13px; }
.profile-detail-grid small { display: block; color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.profile-detail-grid b { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 13px; }
.profile-status { padding: 9px 12px; text-align: center; font-size: 11px; font-weight: 900; border-radius: 12px; }
.profile-status.active { color: #126c3c; background: #ebf8f1; border: 1px solid #c8ead7; }
.profile-status.inactive { color: #8e4850; background: #fff1f2; border: 1px solid #efccd1; }

.guest-head { align-items: flex-end; }
.guest-list { display: grid; gap: 8px; margin-bottom: 18px; }
.guest-row {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fffdf3;
  border: 1px dashed #dccb89;
  border-radius: 15px;
}
.guest-mark { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: #7c650d; background: #fff2b9; border-radius: 12px; }
.guest-mark .icon { width: 20px; height: 20px; }
.guest-row .profile-copy { min-width: 0; flex: 1; }
.guest-row .profile-copy b, .guest-row .profile-copy span, .guest-row .profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest-empty { margin: -5px 0 18px; padding: 12px; color: var(--muted); font-size: 11px; text-align: center; background: rgba(255,255,255,.64); border: 1px dashed #d7e0e6; border-radius: 14px; }

.settings-card { display: grid; gap: 10px; }
.settings-line { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid #dbe4ea; border-radius: 14px; }
.settings-line > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue-dark); background: #eaf3ff; border-radius: 11px; }
.settings-line > div { min-width: 0; display: flex; flex-direction: column; }
.settings-line b { font-size: 13px; }
.settings-line small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }

.danger-zone { margin-top: 18px; padding: 15px; background: #fff7f7; border: 1px solid #efcbd0; border-radius: 18px; }
.danger-zone h2 { margin: 4px 0 4px; color: #8d2f3b; font-size: 20px; }
.danger-zone > p { margin: 0 0 12px; color: #805760; font-size: 10px; line-height: 1.45; }
.danger-action {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  color: #7d333c;
  background: #fff;
  border: 1px solid #edc8cd;
  border-radius: 14px;
}
.danger-action > span { width: 37px; height: 37px; flex: 0 0 auto; display: grid; place-items: center; background: #fff0f1; border-radius: 11px; }
.danger-action > div { min-width: 0; display: flex; flex-direction: column; }
.danger-action b { font-size: 12px; }
.danger-action small { margin-top: 2px; color: #805b61; font-size: 9px; line-height: 1.35; }
.danger-action.critical { color: #fff; background: #9e2735; border-color: #9e2735; }
.danger-action.critical > span { color: #fff; background: rgba(255,255,255,.14); }
.danger-action.critical small { color: #ffe5e8; }
.danger-notice { color: #8c3440; background: #fff0f1; border-color: #efc3c9; }

@media (max-width: 430px) {
  .bottom-nav { gap: 2px; padding-right: max(6px, env(safe-area-inset-right)); padding-left: max(6px, env(safe-area-inset-left)); }
  .nav-item { min-height: 56px; padding-right: 1px; padding-left: 1px; gap: 4px; }
  .nav-item .icon { width: 19px; height: 19px; }
  .nav-item b { font-size: 9px; }
  .avatar.profile-large { width: min(62vw, 205px); height: min(62vw, 205px); border-radius: 24px; }
  .profile-detail-grid > div { padding: 8px; }
  .profile-detail-grid b { font-size: 12px; }
  .guest-head { align-items: flex-start; }
  .guest-head .btn { min-height: 40px; padding: 8px 10px; font-size: 10px; }
}

@media (max-width: 350px) {
  .nav-item b { font-size: 8px; }
  .nav-item .icon { width: 18px; height: 18px; }
  .profile-detail-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   V14 — BOLA MUCHA DA GALERA
   =================================================================== */
.crowd-rank-hero {
  margin-bottom: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #eef7ff, #fff 72%);
  border: 1px solid #cddfed;
  border-radius: 18px;
  box-shadow: 0 9px 25px rgba(40, 91, 128, .07);
}
.crowd-rank-hero > span {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #0a6bc2;
  background: #dcefff;
  border-radius: 15px;
}
.crowd-rank-hero > span .icon { width: 27px; height: 27px; }
.crowd-rank-hero small { color: #276a9e; font-size: 9px; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.crowd-rank-hero h2 { margin: 2px 0; font-size: 22px; }
.crowd-rank-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.crowd-rank-list, .community-game-list, .community-candidates, .community-comment-list { display: grid; gap: 9px; }
.crowd-rank-row {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(35, 66, 87, .05);
}
.crowd-rank-position { width: 30px; flex: 0 0 30px; color: #0a69ba; font-size: 15px; text-align: center; }
.crowd-rank-row .profile-copy { min-width: 0; flex: 1; }
.crowd-rank-count {
  min-width: 74px;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 3px;
  color: #075b9f;
  background: #e8f4ff;
  border-radius: 11px;
  text-align: center;
}
.crowd-rank-count .icon { width: 14px; height: 14px; }
.crowd-rank-count b { font-size: 18px; line-height: 1; }
.crowd-rank-count small { grid-column: 1 / -1; margin-top: 2px; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.community-game-card {
  width: 100%;
  min-width: 0;
  padding: 12px;
  color: var(--text);
  text-align: left;
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(35, 66, 87, .05);
}
.community-game-card > header, .community-game-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.community-game-card > header span { color: #0b6fcf; font-size: 10px; font-weight: 950; text-transform: uppercase; }
.community-game-card > header time { color: var(--muted); font-size: 10px; }
.community-game-main { margin: 10px 0; display: grid; gap: 4px; }
.community-game-main b { font-size: 14px; }
.community-game-main small { color: var(--muted); font-size: 10px; }
.community-game-card > footer { padding-top: 8px; color: var(--muted); border-top: 1px solid #edf1f4; font-size: 9px; }
.community-game-card > footer span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #0b6fcf; font-weight: 900; }
.community-game-card > footer .icon { width: 13px; height: 13px; }
.community-status { width: fit-content; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.community-status.open { color: #126c3c; background: #e9f8ef; }
.community-status.closed { color: #7b4650; background: #f7ecef; }
.community-poll-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.community-poll-head h2 { margin: 2px 0 0; font-size: 22px; }
.community-poll-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.community-official-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.community-official-compare > div { min-width: 0; padding: 10px; background: #f5f8fa; border: 1px solid #dce5ea; border-radius: 13px; }
.community-official-compare small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.community-official-compare b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.community-candidates { margin-top: 4px; }
.community-candidate {
  width: 100%;
  min-width: 0;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-align: left;
  background: #fff;
  border: 1px solid #d8e2e8;
  border-radius: 15px;
}
.community-candidate:not(:disabled):hover { border-color: #9fc8e8; background: #f7fbff; }
.community-candidate.mine { border-color: #7db9e9; background: #eef8ff; box-shadow: inset 0 0 0 1px rgba(21, 112, 183, .08); }
.community-candidate:disabled { cursor: default; opacity: .78; }
.community-candidate .profile-copy { min-width: 0; flex: 1; }
.community-vote-count { min-width: 58px; padding: 6px; display: grid; place-items: center; color: #0b65ad; background: #edf6fd; border-radius: 10px; }
.community-vote-count b { font-size: 17px; line-height: 1; }
.community-vote-count small { margin-top: 2px; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.community-vote-count em { margin-top: 3px; color: #0a6a42; font-size: 7px; font-style: normal; font-weight: 950; text-transform: uppercase; }
.community-admin-actions { margin-top: 3px; }
.community-comments-section { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e3eaee; }
.community-comment-form { margin-bottom: 12px; display: grid; gap: 10px; }
.community-comment-form textarea { resize: vertical; min-height: 82px; }
.community-comment {
  position: relative;
  padding: 10px;
  background: #fff;
  border: 1px solid #d9e2e7;
  border-radius: 14px;
}
.community-comment header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.community-comment header b { font-size: 11px; }
.community-comment header time { color: var(--muted); font-size: 8px; }
.community-comment > span { margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; color: #0b6fcf; font-size: 8px; }
.community-comment > span .icon { width: 11px; height: 11px; }
.community-comment p { margin: 7px 0 0; color: #314859; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.community-comment-delete { margin-top: 7px; min-height: 30px; padding: 4px 7px; font-size: 9px; }
.notice.compact { padding: 9px; }
.section-head.compact { margin-top: 12px; margin-bottom: 8px; }

@media (max-width: 430px) {
  .crowd-rank-hero { padding: 11px; gap: 9px; }
  .crowd-rank-hero > span { width: 40px; height: 40px; border-radius: 12px; }
  .crowd-rank-hero h2 { font-size: 18px; }
  .crowd-rank-hero p { font-size: 9.5px; line-height: 1.3; }
  .crowd-rank-row { padding: 8px 7px; gap: 6px; }
  .crowd-rank-position { width: 24px; flex-basis: 24px; font-size: 13px; }
  .crowd-rank-row .avatar.medium, .community-candidate .avatar.medium { width: 38px; height: 38px; }
  .crowd-rank-row .profile-copy b, .community-candidate .profile-copy b { font-size: 11px; }
  .crowd-rank-row .profile-copy span, .crowd-rank-row .profile-copy small,
  .community-candidate .profile-copy span, .community-candidate .profile-copy small { font-size: 8px; }
  .crowd-rank-count { min-width: 60px; }
  .community-official-compare { gap: 5px; }
  .community-official-compare > div { padding: 8px 7px; }
  .community-official-compare b { font-size: 10px; }
  .community-game-card { padding: 10px; }
  .community-game-card > footer { align-items: flex-start; flex-direction: column; }
  .community-candidate { padding: 8px 7px; gap: 6px; }
  .community-vote-count { min-width: 52px; }
}

@media (max-width: 365px) {
  .crowd-rank-row .profile-copy > span { display: none; }
  .community-poll-head h2 { font-size: 19px; }
  .community-status { font-size: 7px; }
}

/* ===================================================================
   V15 — VOTAÇÃO MAIS CLARA + QUEM VOTOU + REAÇÕES + MOBILE LIMPO
   =================================================================== */
.community-poll-surface {
  margin-top: 10px;
  padding: 11px;
  display: grid;
  gap: 11px;
  background: #f8fafb;
  border: 1px solid #d8e2e8;
  border-radius: 18px;
}
.community-identity {
  padding: 9px;
  display: grid;
  gap: 5px;
  background: #fff;
  border: 1px solid #dde5ea;
  border-radius: 13px;
}
.community-identity label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 900; }
.community-identity label small { color: var(--muted); font-size: 8px; font-weight: 750; }
.community-identity input { width: 100%; min-width: 0; min-height: 42px; padding: 9px 10px; color: var(--text); background: #fff; border: 1px solid #cfdbe3; border-radius: 11px; font: inherit; font-size: 16px; }
.community-identity > small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.community-section-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.community-section-title > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #0b6fcf; background: #eaf4fc; border-radius: 9px; font-size: 15px; }
.community-section-title > span .icon { width: 15px; height: 15px; }
.community-section-title > div { min-width: 0; display: grid; gap: 1px; }
.community-section-title b { font-size: 11px; }
.community-section-title small { color: var(--muted); font-size: 8px; line-height: 1.3; }
.community-candidates { display: grid; gap: 8px; }
.community-candidate-wrap { min-width: 0; overflow: hidden; background: #fff; border: 1px solid #d8e2e8; border-radius: 15px; }
.community-candidate-wrap.mine { border-color: #7db9e9; box-shadow: inset 0 0 0 1px rgba(21, 112, 183, .08); }
.community-candidate-wrap .community-candidate { border: 0; border-radius: 0; box-shadow: none; }
.community-candidate-wrap .community-candidate.mine { background: #eef8ff; }
.community-voters { border-top: 1px solid #edf1f4; background: #fbfcfd; }
.community-voters summary { min-height: 34px; padding: 7px 9px; display: flex; align-items: center; gap: 5px; color: #516a7c; cursor: pointer; font-size: 8px; font-weight: 900; list-style: none; }
.community-voters summary::-webkit-details-marker { display: none; }
.community-voters summary .icon { width: 12px; height: 12px; }
.community-voter-chips { padding: 0 9px 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.community-voter-chips span { max-width: 100%; padding: 4px 7px; overflow: hidden; color: #24506f; background: #eef5f9; border: 1px solid #d8e6ef; border-radius: 999px; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.community-voters-empty { padding: 0 9px 8px; color: var(--muted); font-size: 8px; }
.community-reactions-section, .community-comments-section { padding-top: 10px; border-top: 1px solid #e3eaee; }
.community-reaction-row { margin-top: 8px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.community-reaction { min-width: 0; min-height: 46px; padding: 4px 2px; display: grid; place-items: center; align-content: center; gap: 2px; color: #4d6577; background: #fff; border: 1px solid #d7e1e7; border-radius: 12px; }
.community-reaction > span { font-size: 20px; line-height: 1; }
.community-reaction > b { font-size: 9px; line-height: 1; }
.community-reaction.active { color: #096fd8; background: #edf7ff; border-color: #86bde8; box-shadow: inset 0 0 0 1px rgba(9, 111, 216, .08); }
.community-reaction:disabled { opacity: .65; }
.community-comment-composer { margin-top: 8px; background: #fff; border: 1px solid #d9e2e7; border-radius: 13px; }
.community-comment-composer > summary { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; color: #0b6fcf; cursor: pointer; font-size: 10px; font-weight: 900; list-style: none; }
.community-comment-composer > summary::-webkit-details-marker { display: none; }
.community-comment-composer > summary .icon { width: 14px; height: 14px; }
.community-comment-composer .community-comment-form { margin: 0; padding: 0 10px 10px; }
.community-comment-list { margin-top: 8px; }
.community-admin-actions { margin-top: 9px; }

@media (max-width: 430px) {
  /* Barra inferior: 5 destinos, mas só a aba ativa mostra texto. */
  .bottom-nav { min-height: calc(62px + env(safe-area-inset-bottom)); gap: 3px; padding-top: 6px; padding-right: max(7px, env(safe-area-inset-right)); padding-left: max(7px, env(safe-area-inset-left)); }
  .nav-item { min-height: 48px; padding: 5px 3px; gap: 2px; border-radius: 12px; }
  .nav-item .icon { width: 20px; height: 20px; }
  .nav-item b { display: none; font-size: 8px; }
  .nav-item.active b { display: block; max-width: 64px; }

  /* Rankings viram chips roláveis em uma linha; sem poluir a tela. */
  .result-tabs {
    position: static;
    margin: 0 0 12px;
    padding: 0 0 4px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .result-tabs::-webkit-scrollbar { display: none; }
  .result-tab { flex: 0 0 auto; min-height: 38px; padding: 7px 10px; gap: 4px; background: #edf2f5; border: 1px solid #dae3e8; border-radius: 999px; font-size: 9px; scroll-snap-align: start; }
  .result-tab .icon { width: 14px; height: 14px; }
  .result-tab.active { background: #fff; border-color: #a9cee9; }

  .community-poll-surface { margin-top: 8px; padding: 8px; gap: 9px; border-radius: 15px; }
  .community-official-compare { gap: 4px; }
  .community-official-compare > div { padding: 7px 6px; }
  .community-identity { padding: 8px; }
  .community-section-title > span { width: 28px; height: 28px; flex-basis: 28px; }
  .community-candidates { gap: 6px; }
  .community-candidate { min-height: 56px; padding: 7px 6px; }
  .community-vote-count { min-width: 47px; padding: 5px 3px; }
  .community-vote-count b { font-size: 15px; }
  .community-voters summary { min-height: 32px; padding: 6px 7px; }
  .community-voter-chips { padding: 0 7px 7px; gap: 4px; }
  .community-reaction-row { gap: 4px; }
  .community-reaction { min-height: 44px; border-radius: 10px; }
  .community-reaction > span { font-size: 18px; }
  .community-comment { padding: 8px; }
  .community-comment p { margin-top: 5px; font-size: 10px; }
}

@media (max-width: 350px) {
  .nav-item.active b { max-width: 54px; font-size: 7.5px; }
  .result-tab { min-height: 36px; padding: 6px 8px; font-size: 8px; }
  .community-reaction-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================================================================
   V16 — EXP, RANK COMPETITIVO E SELOS VISUAIS
   =================================================================== */
.rank-badge {
  min-width: 72px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #506577;
  background: #f4f7f9;
  border: 1px solid #d1dde5;
  border-radius: 12px;
}
.rank-emblem {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rank-emblem.large { width: 38px; height: 38px; margin: 0 auto 3px; }
.rank-badge .rank-badge-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.rank-badge .rank-badge-copy b {
  grid-row: auto;
  color: currentColor;
  font-size: 18px;
  line-height: 1;
}
.rank-badge .rank-badge-copy small {
  margin-top: 2px;
  color: #687d8d;
  font-size: 8px;
  font-weight: 900;
}
.rank-badge .placement {
  align-self: flex-start;
  padding: 2px 4px;
  color: #243b4e;
  background: #fff;
  border: 1px solid #dce5ea;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
}
.rank-s { color: #a97408; border-color: #e7c76e; }
.rank-a { color: #6750a4; border-color: #cbbce8; }
.rank-b { color: #1476bf; border-color: #b6d7ef; }
.rank-c { color: #21835d; border-color: #b7ddce; }
.rank-d { color: #a05b16; border-color: #e5c59e; }
.rank-e { color: #687b89; border-color: #cad5dc; }

.player-exp-mini { margin-top: 10px; }
.player-exp-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.player-exp-head > span { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.player-exp-head b { color: #24465f; font-size: 10px; }
.player-exp-head small { color: var(--muted); font-size: 8px; font-weight: 850; }
.player-exp-head em { min-width: 0; overflow: hidden; color: #597181; font-size: 8px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.exp-meter,
.rank-meter { height: 6px; margin-top: 5px; overflow: hidden; background: #e5ecf1; border-radius: 999px; }
.exp-meter i,
.rank-meter i { display: block; height: 100%; border-radius: inherit; transition: width .22s ease; }
.exp-meter i { background: linear-gradient(90deg, #1379e7, #28b8e9); }
.exp-meter.large { height: 9px; margin-top: 7px; }
.rank-meter i.rank-s { background: linear-gradient(90deg, #c69219, #f0c75e); }
.rank-meter i.rank-a { background: linear-gradient(90deg, #6650a5, #9279cb); }
.rank-meter i.rank-b { background: linear-gradient(90deg, #1476bf, #49a8e7); }
.rank-meter i.rank-c { background: linear-gradient(90deg, #21835d, #56b28d); }
.rank-meter i.rank-d { background: linear-gradient(90deg, #a05b16, #d5914e); }
.rank-meter i.rank-e { background: linear-gradient(90deg, #687b89, #98a9b4); }

.profile-rank-main .rank-emblem { color: currentColor; }
.progression-panel { padding: 12px; background: #f8fbfd; border: 1px solid #d8e4eb; border-radius: 16px; }
.progression-title { display: flex; align-items: center; gap: 8px; }
.progression-title > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #0f74d8; background: #eaf4ff; border-radius: 10px; }
.progression-title .icon { width: 18px; height: 18px; }
.progression-title > div { min-width: 0; display: flex; flex-direction: column; }
.progression-title b { font-size: 13px; }
.progression-title small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.progression-metric { margin-top: 11px; padding: 10px; background: #fff; border: 1px solid #dce6ec; border-radius: 13px; }
.progression-metric > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.progression-metric > div:first-child span { min-width: 0; display: inline-flex; align-items: center; gap: 5px; color: #28485f; font-size: 10px; font-weight: 900; }
.progression-metric > div:first-child strong { color: #123d5b; font-size: 12px; }
.progression-metric > small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.progression-metric .rank-emblem { width: 18px; height: 18px; }
.progression-history { margin-top: 10px; background: #fff; border: 1px solid #dce5eb; border-radius: 13px; overflow: hidden; }
.progression-history > summary { min-height: 42px; padding: 9px 10px; display: flex; align-items: center; gap: 6px; color: #175f9c; cursor: pointer; font-size: 10px; font-weight: 900; list-style: none; }
.progression-history > summary::-webkit-details-marker { display: none; }
.progression-history > summary .icon { width: 14px; height: 14px; }
.progression-history > div { border-top: 1px solid #edf1f4; }
.progression-history-row { padding: 9px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; border-bottom: 1px solid #edf1f4; }
.progression-history-row:last-child { border-bottom: 0; }
.progression-history-row > div { min-width: 0; display: flex; flex-direction: column; }
.progression-history-row > div b { font-size: 10px; }
.progression-history-row > div small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.progression-history-row > span { display: flex; align-items: center; gap: 5px; }
.progression-history-row > span strong,
.match-progression-row > span strong { padding: 3px 5px; border-radius: 999px; font-size: 8px; font-weight: 900; white-space: nowrap; }
.progression-history-row > small { grid-column: 1 / -1; color: #6c7f8c; font-size: 8px; }
.gain { color: #166a42; background: #ecf8f1; }
.loss { color: #a43d49; background: #fff0f2; }
.progression-empty { margin-top: 10px; padding: 10px; color: var(--muted); text-align: center; font-size: 9px; background: #fff; border: 1px dashed #d9e3e9; border-radius: 12px; }

.match-progression { margin-top: 10px; background: #f8fbfd; border: 1px solid #dce6ec; border-radius: 14px; overflow: hidden; }
.match-progression > summary { min-height: 44px; padding: 9px 11px; display: flex; align-items: center; gap: 6px; color: #1d5f91; cursor: pointer; font-size: 10px; font-weight: 900; list-style: none; }
.match-progression > summary::-webkit-details-marker { display: none; }
.match-progression > summary .icon { width: 15px; height: 15px; }
.match-progression > summary span { margin-left: auto; color: var(--muted); font-size: 8px; }
.match-progression-list { border-top: 1px solid #e4ebef; }
.match-progression-row { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border-bottom: 1px solid #edf1f4; }
.match-progression-row > div { min-width: 0; display: flex; flex-direction: column; }
.match-progression-row > div b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.match-progression-row > div small { margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 8px; }
.match-progression-row > div small .icon { width: 10px; height: 10px; }
.match-progression-row > span { flex: 0 0 auto; display: flex; gap: 4px; }
.match-progression > p { margin: 0; padding: 8px 10px; color: var(--muted); font-size: 8px; line-height: 1.4; }

@media (max-width: 430px) {
  .rank-badge { min-width: 63px; padding: 5px 6px; gap: 4px; }
  .rank-emblem { width: 21px; height: 21px; }
  .rank-badge .rank-badge-copy b { font-size: 16px; }
  .rank-badge .rank-badge-copy small { font-size: 7px; }
  .rank-badge .placement { display: none; }
  .player-exp-head em { max-width: 47%; }
  .profile-level-card { gap: 6px; }
  .profile-level-card > div { padding: 10px 7px; }
  .profile-level-card strong { font-size: 25px; }
  .rank-emblem.large { width: 32px; height: 32px; }
  .progression-panel { padding: 9px; }
  .progression-history-row { grid-template-columns: 1fr; }
  .progression-history-row > span { justify-content: flex-start; }
  .match-progression-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 350px) {
  .profile-level-card { grid-template-columns: 1fr; }
  .player-exp-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .player-exp-head em { max-width: 100%; }
}

/* ===================================================================
   V17 — REGRAS CLARAS, HISTÓRICO COMPLETO E CARDS MAIS LIMPOS
   =================================================================== */
.progression-guide {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.progression-guide > div {
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #dce6ec;
  border-radius: 11px;
}
.progression-guide b {
  display: block;
  color: #24465f;
  font-size: 9px;
}
.progression-guide span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 7.5px;
  line-height: 1.4;
}
.progression-history > summary span {
  margin-left: auto;
  color: var(--muted);
  font-size: 8px;
}
.progression-load-all {
  width: 100%;
  min-height: 40px;
  border-radius: 0;
  border-width: 1px 0 0;
}
.rank-shift {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4b5f6e;
  background: #f4f7f9;
  border: 1px solid #dbe4e9;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}
.rank-shift .rank-emblem {
  width: 14px;
  height: 14px;
}
.rank-shift i {
  font-style: normal;
  color: #81929e;
}
.rank-shift.up {
  color: #166a42;
  background: #edf8f2;
  border-color: #cbe8d8;
}
.rank-shift.down {
  color: #a43d49;
  background: #fff2f3;
  border-color: #f1d1d5;
}
.match-progression-row > div .match-progression-before-after {
  margin-top: 4px;
  display: block;
  color: #5f7483;
  font-size: 7.5px;
  line-height: 1.35;
}
.match-progression-row > div .rank-shift {
  margin-top: 5px;
}
.progression-lock-note {
  margin: 0;
  padding: 9px;
}

@media (max-width: 430px) {
  .progression-guide {
    grid-template-columns: 1fr;
  }
  .progression-guide > div {
    padding: 7px 8px;
  }
  .progression-guide span {
    font-size: 8px;
  }
  .rank-shift {
    font-size: 7.5px;
  }
}

/* ===================================================================
   V18 — MICROINTERAÇÕES PREMIUM (curtas, sob demanda e mobile-first)
   =================================================================== */
.avatar-button,
.rank-badge,
.player-card,
.ranking-row,
.history-row,
.action-card,
.community-candidate,
.community-reaction {
  -webkit-tap-highlight-color: transparent;
}

.avatar-button {
  position: relative;
  isolation: isolate;
}
.avatar-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  pointer-events: none;
  border: 2px solid rgba(31, 126, 218, .28);
  border-radius: 22px;
  opacity: 0;
  transform: scale(.88);
}
.avatar-button:active .avatar {
  transform: scale(.955);
}
.avatar-button.avatar-tap::after {
  animation: er-avatar-ring .32s ease-out both;
}
.avatar-button.avatar-tap .avatar {
  animation: er-avatar-tap .28s ease-out both;
}

.rank-badge {
  transform-origin: center;
  transition: transform .16s ease, box-shadow .16s ease;
}
.rank-badge:active {
  transform: scale(.96);
}
.rank-badge.rank-tap {
  animation: er-rank-tap .34s ease-out both;
}

.modal:not(.hidden) .modal-backdrop {
  animation: er-modal-backdrop .18s ease-out both;
}
.modal:not(.hidden) .modal-card {
  animation: er-modal-rise .24s cubic-bezier(.2, .8, .2, 1) both;
}

.player-profile-modal.profile-motion-enter .avatar.profile-large {
  animation: er-profile-photo .52s cubic-bezier(.2, .85, .25, 1) both;
}
.player-profile-modal.profile-motion-enter .player-profile-title {
  animation: er-profile-copy .38s .06s ease-out both;
}
.player-profile-modal.profile-motion-enter .profile-rank-main {
  animation: er-profile-rank .48s .10s cubic-bezier(.2, .9, .25, 1) both;
}
.player-profile-modal.profile-motion-enter .profile-rank-main .rank-emblem.large {
  animation: er-rank-emblem .62s .16s cubic-bezier(.18, .9, .25, 1) both;
}
.player-profile-modal.profile-motion-enter .exp-meter i,
.player-profile-modal.profile-motion-enter .rank-meter i {
  transform-origin: left center;
  animation: er-progress-fill .62s .18s cubic-bezier(.2, .75, .25, 1) both;
}
.player-profile-modal.profile-motion-enter .profile-detail-grid {
  animation: er-profile-copy .38s .18s ease-out both;
}

.history-motion-refresh .progression-history-row {
  animation: er-row-in .34s ease-out both;
}
.history-motion-refresh .progression-history-row:nth-child(2) { animation-delay: .025s; }
.history-motion-refresh .progression-history-row:nth-child(3) { animation-delay: .05s; }
.history-motion-refresh .progression-history-row:nth-child(4) { animation-delay: .075s; }
.history-motion-refresh .progression-history-row:nth-child(5) { animation-delay: .10s; }

.match-progression.progression-reveal .match-progression-row {
  animation: er-row-in .34s ease-out both;
}
.match-progression.progression-reveal .match-progression-row:nth-child(2) { animation-delay: .025s; }
.match-progression.progression-reveal .match-progression-row:nth-child(3) { animation-delay: .05s; }
.match-progression.progression-reveal .match-progression-row:nth-child(4) { animation-delay: .075s; }
.match-progression.progression-reveal .match-progression-row:nth-child(5) { animation-delay: .10s; }
.match-progression.progression-reveal .match-progression-row > span strong {
  animation: er-score-chip .42s .10s ease-out both;
}
.match-progression.progression-reveal .rank-shift {
  animation: er-rank-shift .46s .14s ease-out both;
}

.community-candidate.vote-pop {
  animation: er-vote-pop .36s ease-out both;
}
.community-reaction.reaction-pop {
  animation: er-reaction-pop .42s cubic-bezier(.2, .9, .3, 1) both;
}
.community-reaction.reaction-pop > span {
  animation: er-reaction-icon .42s ease-out both;
}
.community-comment-composer[open] {
  animation: er-soft-open .24s ease-out both;
}

.reveal-player.captain .reveal-captain {
  animation: er-captain-badge .58s .08s cubic-bezier(.2, .9, .25, 1) both;
}
.reveal-player.captain .avatar.reveal {
  animation: er-captain-avatar .62s ease-out both;
}
.presentation-summary .team-player.captain,
.presentation-final .team-player.captain {
  animation: er-captain-card .72s ease-out both;
}
.presentation-summary .captain-badge,
.presentation-final .captain-badge {
  animation: er-captain-badge .56s .12s cubic-bezier(.2, .9, .25, 1) both;
}

@media (hover: none) and (pointer: coarse) {
  .player-card:active,
  .ranking-row:active,
  .history-row:active,
  .action-card:active {
    transform: scale(.987);
  }
  .community-candidate:active {
    transform: scale(.99);
  }
}

@keyframes er-avatar-ring {
  0% { opacity: 0; transform: scale(.86); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes er-avatar-tap {
  0% { transform: scale(1); }
  45% { transform: scale(.94); }
  100% { transform: scale(1.025); }
}
@keyframes er-rank-tap {
  0% { transform: scale(1); }
  45% { transform: scale(.94) rotate(-1deg); }
  100% { transform: scale(1.035); }
}
@keyframes er-modal-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes er-modal-rise {
  from { opacity: .65; transform: translateY(18px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes er-profile-photo {
  0% { opacity: .35; transform: scale(.91); filter: saturate(.8); }
  65% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); filter: saturate(1); }
}
@keyframes er-profile-copy {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes er-profile-rank {
  0% { opacity: .45; transform: scale(.93); }
  68% { opacity: 1; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes er-rank-emblem {
  0% { opacity: .25; transform: scale(.72) rotate(-7deg); }
  65% { opacity: 1; transform: scale(1.10) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes er-progress-fill {
  from { transform: scaleX(0); opacity: .55; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes er-row-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes er-score-chip {
  0% { opacity: .45; transform: scale(.88); }
  65% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes er-rank-shift {
  0% { opacity: 0; transform: translateX(-6px) scale(.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes er-vote-pop {
  0% { transform: scale(1); }
  50% { transform: scale(.975); }
  100% { transform: scale(1.01); }
}
@keyframes er-reaction-pop {
  0% { transform: scale(1); }
  40% { transform: scale(.91); }
  72% { transform: scale(1.10); }
  100% { transform: scale(1); }
}
@keyframes er-reaction-icon {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes er-soft-open {
  from { opacity: .45; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes er-captain-badge {
  0% { opacity: 0; transform: scale(.72) translateY(3px); }
  62% { opacity: 1; transform: scale(1.10) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes er-captain-avatar {
  0% { box-shadow: 0 0 0 rgba(255, 210, 92, 0); }
  45% { box-shadow: 0 0 0 5px rgba(255, 210, 92, .18), 0 10px 28px rgba(255, 190, 43, .18); }
  100% { box-shadow: 0 0 0 rgba(255, 210, 92, 0); }
}
@keyframes er-captain-card {
  0% { box-shadow: inset 0 0 0 rgba(255, 202, 77, 0); }
  45% { box-shadow: inset 0 0 0 1px rgba(255, 202, 77, .35), 0 0 18px rgba(255, 202, 77, .12); }
  100% { box-shadow: inset 0 0 0 rgba(255, 202, 77, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-button::after { display: none !important; }
  .modal:not(.hidden) .modal-backdrop,
  .modal:not(.hidden) .modal-card,
  .player-profile-modal.profile-motion-enter *,
  .history-motion-refresh .progression-history-row,
  .match-progression.progression-reveal .match-progression-row,
  .match-progression.progression-reveal .match-progression-row > span strong,
  .match-progression.progression-reveal .rank-shift,
  .community-candidate.vote-pop,
  .community-reaction.reaction-pop,
  .community-reaction.reaction-pop > span,
  .community-comment-composer[open],
  .reveal-player.captain .reveal-captain,
  .reveal-player.captain .avatar.reveal,
  .presentation-summary .team-player.captain,
  .presentation-final .team-player.captain,
  .presentation-summary .captain-badge,
  .presentation-final .captain-badge {
    animation: none !important;
  }
  .avatar-button:active .avatar,
  .rank-badge:active,
  .player-card:active,
  .ranking-row:active,
  .history-row:active,
  .action-card:active,
  .community-candidate:active {
    transform: none !important;
  }
}


/* ===================================================================
   V19 — ACABAMENTO VISUAL PREMIUM
   Profundidade de perfil, aura por rank, contadores, reveal de times,
   placar vivo, skeleton refinado e transições curtas sob demanda.
   =================================================================== */

/* Perfil: foto com profundidade e aura estática por rank. */
.player-profile-photo.rank-aura {
  position: relative;
  isolation: isolate;
  min-height: 190px;
}
.player-profile-photo.rank-aura::before,
.player-profile-photo.rank-aura::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.player-profile-photo.rank-aura::before {
  width: min(66vw, 230px);
  height: min(66vw, 230px);
  opacity: .30;
  filter: blur(18px);
}
.player-profile-photo.rank-aura::after {
  width: min(58vw, 205px);
  height: min(58vw, 205px);
  border: 1px solid currentColor;
  opacity: .16;
}
.player-profile-photo.rank-s { color: #b88613; }
.player-profile-photo.rank-s::before { background: radial-gradient(circle, rgba(245, 196, 74, .55), rgba(245, 196, 74, 0) 68%); }
.player-profile-photo.rank-a { color: #7055ad; }
.player-profile-photo.rank-a::before { background: radial-gradient(circle, rgba(126, 100, 196, .46), rgba(126, 100, 196, 0) 68%); }
.player-profile-photo.rank-b { color: #177cc3; }
.player-profile-photo.rank-b::before { background: radial-gradient(circle, rgba(65, 160, 223, .42), rgba(65, 160, 223, 0) 68%); }
.player-profile-photo.rank-c { color: #248762; }
.player-profile-photo.rank-c::before { background: radial-gradient(circle, rgba(63, 164, 119, .38), rgba(63, 164, 119, 0) 68%); }
.player-profile-photo.rank-d { color: #a9611c; }
.player-profile-photo.rank-d::before { background: radial-gradient(circle, rgba(210, 139, 68, .36), rgba(210, 139, 68, 0) 68%); }
.player-profile-photo.rank-e { color: #6c7d89; }
.player-profile-photo.rank-e::before { background: radial-gradient(circle, rgba(137, 156, 168, .34), rgba(137, 156, 168, 0) 68%); }
.player-profile-photo.rank-aura .avatar.profile-large {
  box-shadow: 0 18px 42px rgba(24, 57, 82, .16), 0 0 0 4px rgba(255, 255, 255, .84);
}

/* Números do perfil contam até o valor real ao abrir. */
.motion-number {
  display: inline-block;
  min-width: .7ch;
  font-variant-numeric: tabular-nums;
}
.captain-record-motion { white-space: nowrap; }

/* Sequência visual do perfil. */
.player-profile-modal.profile-motion-enter .progression-panel {
  animation: er-profile-copy .38s .16s ease-out both;
}
.player-profile-modal.profile-motion-enter .profile-detail-grid > div {
  animation: er-profile-stat-in .38s ease-out both;
}
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(1) { animation-delay: .18s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(2) { animation-delay: .20s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(3) { animation-delay: .22s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(4) { animation-delay: .24s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(5) { animation-delay: .26s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(6) { animation-delay: .28s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(7) { animation-delay: .30s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(8) { animation-delay: .32s; }
.player-profile-modal.profile-motion-enter .profile-detail-grid > div:nth-child(n+9) { animation-delay: .34s; }

/* Mudança de faixa fica claramente identificada no histórico. */
.rank-shift em {
  margin-left: 5px;
  padding: 2px 5px;
  color: currentColor;
  background: currentColor;
  border-radius: 999px;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-background-clip: text;
  background-clip: text;
}
.progression-history-row:first-child .rank-shift.up {
  position: relative;
  box-shadow: 0 0 0 1px rgba(36, 142, 92, .14), 0 6px 16px rgba(36, 142, 92, .08);
}
.progression-history-row:first-child .rank-shift.up::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  border: 1px solid rgba(36, 142, 92, .20);
  border-radius: 999px;
  opacity: 0;
}
.player-profile-modal.profile-motion-enter .progression-history-row:first-child .rank-shift.up::after {
  animation: er-rank-up-ring .72s .48s ease-out both;
}

/* Times entram em sequência na primeira abertura do resultado daquele sorteio. */
.team-grid.teams-motion .team-reveal {
  animation: er-team-reveal .48s cubic-bezier(.2, .82, .24, 1) both;
  animation-delay: calc(var(--team-order, 0) * 90ms);
}
.team-grid.teams-motion .team-reveal .team-player {
  animation: er-member-reveal .36s ease-out both;
}
.team-grid.teams-motion .team-reveal .team-player:nth-child(2) { animation-delay: calc((var(--team-order, 0) * 90ms) + 70ms); }
.team-grid.teams-motion .team-reveal .team-player:nth-child(3) { animation-delay: calc((var(--team-order, 0) * 90ms) + 95ms); }
.team-grid.teams-motion .team-reveal .team-player:nth-child(4) { animation-delay: calc((var(--team-order, 0) * 90ms) + 120ms); }
.team-grid.teams-motion .team-reveal .team-player:nth-child(n+5) { animation-delay: calc((var(--team-order, 0) * 90ms) + 145ms); }

/* Placar: count-up em JS e comemoração curta só no vencedor. */
.score-team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.score-team.win {
  background-image: linear-gradient(150deg, rgba(236, 249, 242, .96), rgba(255, 255, 255, .98));
}
.score-team [data-score-target] {
  font-variant-numeric: tabular-nums;
}
.score-celebration {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.score-celebration i {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #efc14a;
  border-radius: 2px;
  opacity: 0;
}
.score-team.score-celebrate .score-celebration i {
  animation: er-score-confetti .78s ease-out both;
}
.score-celebration i:nth-child(1) { --x: -44px; --y: -27px; animation-delay: .06s; }
.score-celebration i:nth-child(2) { --x: -26px; --y: -42px; animation-delay: .11s; background: #48a7df; }
.score-celebration i:nth-child(3) { --x: -8px; --y: -35px; animation-delay: .02s; background: #55ad79; }
.score-celebration i:nth-child(4) { --x: 15px; --y: -42px; animation-delay: .09s; background: #8d70c8; }
.score-celebration i:nth-child(5) { --x: 34px; --y: -28px; animation-delay: .14s; background: #e6845a; }
.score-celebration i:nth-child(6) { --x: 48px; --y: -12px; animation-delay: .04s; background: #59abc9; }

/* Pressão + reflexo curto em botões. */
.btn,
.nav-item,
.result-tab {
  position: relative;
  overflow: hidden;
}
.btn::after,
.nav-item::after,
.result-tab::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -45%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.66), transparent);
  opacity: 0;
  transform: skewX(-18deg) translateX(-180%);
}
.button-tap-glint::after {
  animation: er-button-glint .42s ease-out both;
}
.btn:active,
.result-tab:active { transform: translateY(1px) scale(.99); }
.nav-item:active { transform: scale(.97); }

/* Transições de página e das abas de Resultado. */
.content.page-motion-enter > * {
  animation: er-page-in .34s ease-out both;
}
.content.page-motion-enter > *:nth-child(2) { animation-delay: .025s; }
.content.page-motion-enter > *:nth-child(3) { animation-delay: .05s; }
.content.page-motion-enter > *:nth-child(n+4) { animation-delay: .075s; }
.result-view.tab-motion-enter {
  animation: er-tab-in .28s ease-out both;
}

/* Skeleton visual mais parecido com a tela real. */
.premium-skeleton { gap: 10px; }
.skeleton-chip-row {
  display: flex;
  gap: 7px;
}
.skeleton-chip-row i {
  width: 86px;
  height: 32px;
  display: block;
  overflow: hidden;
  background: #e6edf2;
  border-radius: 999px;
}
.skeleton-card-row {
  min-height: 76px;
  padding: 10px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dce5ea;
  border-radius: 16px;
}
.skeleton-card-row .avatar-skeleton {
  width: 52px;
  height: 52px;
  border-radius: 15px;
}
.skeleton-card-row > div:nth-child(2) { display: grid; gap: 7px; }
.skeleton-card-row > div:nth-child(2) span,
.skeleton-card-row > div:nth-child(2) small,
.skeleton-card-row > b {
  display: block;
  overflow: hidden;
  background: #e6edf2;
  border-radius: 999px;
}
.skeleton-card-row > div:nth-child(2) span { width: 58%; height: 11px; }
.skeleton-card-row > div:nth-child(2) small { width: 82%; height: 8px; }
.skeleton-card-row > b { width: 54px; height: 32px; }
.skeleton-chip-row i::after,
.skeleton-card-row > div:nth-child(2) span::after,
.skeleton-card-row > div:nth-child(2) small::after,
.skeleton-card-row > b::after {
  width: 70%;
  height: 100%;
  display: block;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  animation: shimmer 1.3s infinite;
}

@keyframes er-profile-stat-in {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes er-rank-up-ring {
  0% { opacity: 0; transform: scale(.86); }
  40% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes er-team-reveal {
  0% { opacity: 0; transform: translateY(12px) scale(.985); }
  68% { opacity: 1; transform: translateY(-1px) scale(1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes er-member-reveal {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes er-score-confetti {
  0% { opacity: 0; transform: translate(0, 7px) rotate(0deg) scale(.7); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(140deg) scale(1.08); }
}
@keyframes er-button-glint {
  0% { opacity: 0; transform: skewX(-18deg) translateX(-180%); }
  28% { opacity: .8; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(650%); }
}
@keyframes er-page-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes er-tab-in {
  from { opacity: .35; transform: translateX(5px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 430px) {
  .player-profile-photo.rank-aura { min-height: 176px; }
  .score-celebration i { width: 4px; height: 4px; }
  .skeleton-card-row { grid-template-columns: 46px minmax(0, 1fr) 48px; min-height: 68px; padding: 8px; gap: 8px; }
  .skeleton-card-row .avatar-skeleton { width: 46px; height: 46px; border-radius: 13px; }
  .skeleton-card-row > b { width: 45px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-profile-photo.rank-aura::before { filter: none; opacity: .10; }
  .player-profile-modal.profile-motion-enter .progression-panel,
  .player-profile-modal.profile-motion-enter .profile-detail-grid > div,
  .player-profile-modal.profile-motion-enter .progression-history-row:first-child .rank-shift.up::after,
  .team-grid.teams-motion .team-reveal,
  .team-grid.teams-motion .team-reveal .team-player,
  .score-celebration i,
  .button-tap-glint::after,
  .content.page-motion-enter > *,
  .result-view.tab-motion-enter,
  .skeleton-chip-row i::after,
  .skeleton-card-row > div:nth-child(2) span::after,
  .skeleton-card-row > div:nth-child(2) small::after,
  .skeleton-card-row > b::after {
    animation: none !important;
  }
  .score-celebration { display: none !important; }
  .btn:active,
  .result-tab:active,
  .nav-item:active { transform: none !important; }
}

/* ==========================================================
   V20 — PRESENÇA / CONFIRMAÇÃO DA RODADA
   ========================================================== */

.presence-heading { align-items: flex-start; }
.presence-round-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(35, 66, 87, .07);
}
.presence-round-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: #22a968;
}
.presence-round-card.closed::before { background: #8b98a3; }
.presence-round-date {
  min-width: 86px;
  padding: 9px 10px;
  text-align: center;
  background: #eff7ff;
  border: 1px solid #d4e8fa;
  border-radius: 15px;
}
.presence-round-date span,
.presence-round-date strong { display: block; }
.presence-round-date span { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.presence-round-date strong { margin-top: 2px; color: #0b66c5; font-size: 22px; letter-spacing: -.04em; }
.presence-round-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.presence-round-copy b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.presence-round-copy span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.presence-round-state {
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #147448;
  font-size: 11px;
  font-weight: 850;
  background: #eaf8f0;
  border: 1px solid #ccebd9;
  border-radius: 999px;
  white-space: nowrap;
}
.presence-round-state.closed { color: #687782; background: #f1f4f6; border-color: #dde4e8; }
.presence-round-state .icon { width: 14px; height: 14px; }

.presence-counts {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.presence-counts button {
  min-width: 0;
  padding: 10px 5px;
  color: var(--text);
  background: #fff;
  border: 1px solid #dce4e9;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(35, 66, 87, .04);
}
.presence-counts b,
.presence-counts span { display: block; }
.presence-counts b { font-size: 20px; line-height: 1; }
.presence-counts span { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.presence-counts .yes b { color: #178b54; }
.presence-counts .maybe b { color: #aa7818; }
.presence-counts .no b { color: #cf4c5c; }
.presence-counts .unanswered b { color: #71808c; }

.presence-identity,
.presence-answer-card,
.presence-notification,
.presence-admin-tools,
.presence-draw-helper {
  margin-bottom: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d7e0e6;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(35, 66, 87, .055);
}
.presence-identity-title,
.presence-answer-title,
.presence-notification,
.presence-draw-helper > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.presence-identity-title > .icon,
.presence-answer-title > span,
.presence-notification > .icon,
.presence-draw-helper > div > .icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  flex: 0 0 auto;
  color: #1478da;
  background: #eef7ff;
  border-radius: 13px;
}
.presence-identity-title div,
.presence-answer-title div,
.presence-notification div,
.presence-draw-helper div span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.presence-identity-title b,
.presence-notification b,
.presence-draw-helper b { font-size: 14px; }
.presence-identity-title span,
.presence-notification span,
.presence-notification small,
.presence-draw-helper small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.presence-bind-form { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.presence-bind-form .field { margin: 0; }
.presence-identity.bound { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.presence-identity.bound > div { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.presence-identity.bound > div > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.presence-identity.bound small { color: var(--muted); font-size: 10px; }
.presence-identity.bound b { font-size: 16px; }
.presence-identity.bound em { margin-top: 2px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 1.35; }

.presence-answer-title { margin-bottom: 11px; }
.presence-answer-title > span { display: grid; place-items: center; color: #188657; background: #ebf9f2; }
.presence-answer-title small,
.presence-answer-title b { display: block; }
.presence-answer-title small { color: var(--muted); font-size: 10px; }
.presence-answer-title b { margin-top: 2px; font-size: 16px; }
.presence-answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.presence-answer {
  min-height: 86px;
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text);
  background: #f8fafb;
  border: 1px solid #dbe4e9;
  border-radius: 15px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.presence-answer .icon { width: 24px; height: 24px; }
.presence-answer b { font-size: 12px; text-align: center; }
.presence-answer small { color: var(--muted); font-size: 9px; text-align: center; }
.presence-answer.yes .icon { color: #168c54; }
.presence-answer.maybe .icon { color: #ad7c1a; }
.presence-answer.no .icon { color: #d14e60; }
.presence-answer.selected { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(35, 66, 87, .10); }
.presence-answer.yes.selected { background: #eaf8f0; border-color: #8bd1ad; }
.presence-answer.maybe.selected { background: #fff7e5; border-color: #e7c77a; }
.presence-answer.no.selected { background: #fff0f2; border-color: #efafb7; }
.presence-answer:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.presence-answer-help,
.presence-closed-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.presence-closed-note { color: #8a5960; }
.presence-answer-grid.compact .presence-answer { min-height: 72px; }

.presence-notification { display: flex; align-items: center; gap: 10px; }
.presence-notification > div { flex: 1; }
.presence-notification.enabled { border-color: #bfe5ce; background: #f7fcf9; }
.presence-notification.enabled > .icon { color: #17884f; background: #e7f7ee; }
.presence-notification.muted > .icon { color: #778791; background: #f0f3f5; }
.presence-notification .btn { flex: 0 0 auto; }

.presence-admin-tools { display: grid; gap: 10px; background: linear-gradient(145deg, #f8fbfd, #fff); }
.presence-admin-tools h2 { margin: 3px 0 2px; font-size: 17px; }
.presence-admin-tools p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.presence-lists { display: grid; gap: 8px; }
.presence-group {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e2e7;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(35, 66, 87, .045);
  scroll-margin-top: 86px;
}
.presence-group summary { padding: 11px 12px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.presence-group summary::-webkit-details-marker { display: none; }
.presence-group summary > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; }
.presence-group.yes summary > span { color: #168a52; background: #e9f8f0; }
.presence-group.maybe summary > span { color: #a87518; background: #fff6e1; }
.presence-group.no summary > span { color: #cc4b5a; background: #ffeff1; }
.presence-group.unanswered summary > span { color: #75838d; background: #f0f3f5; }
.presence-group summary > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.presence-group summary b { font-size: 13px; }
.presence-group summary small { color: var(--muted); font-size: 10px; }
.presence-group summary > strong { font-size: 16px; }
.presence-group-list { padding: 0 8px 8px; display: grid; gap: 6px; }
.presence-player-row { min-width: 0; padding: 8px; display: flex; align-items: center; gap: 8px; background: #f8fafb; border: 1px solid #e2e8ec; border-radius: 13px; }
.presence-player-row .avatar { flex: 0 0 auto; }
.presence-status { padding: 5px 7px; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 9px; font-weight: 850; border-radius: 999px; white-space: nowrap; }
.presence-status .icon { width: 12px; height: 12px; }
.presence-status.yes { color: #14784a; background: #e8f7ef; }
.presence-status.maybe { color: #966813; background: #fff3d7; }
.presence-status.no { color: #b94251; background: #ffeaed; }
.presence-status.unanswered { color: #687783; background: #edf1f4; }
.presence-group-empty { margin: 4px 7px 8px; color: var(--muted); font-size: 11px; text-align: center; }

.presence-draw-helper { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-color: #bfe5d0; background: #f6fcf8; }
.presence-draw-helper > div > .icon { color: #178b55; background: #e5f7ed; }

@keyframes er-presence-select {
  0% { transform: scale(.97); }
  55% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.presence-answer.selected { animation: er-presence-select .28s ease-out both; }

@media (max-width: 520px) {
  .presence-round-card { grid-template-columns: auto minmax(0, 1fr); }
  .presence-round-state { grid-column: 1 / -1; justify-self: start; }
  .presence-bind-form { grid-template-columns: 1fr; }
  .presence-identity.bound { align-items: stretch; flex-direction: column; }
  .presence-identity.bound > .btn { align-self: flex-start; }
  .presence-notification { align-items: flex-start; flex-wrap: wrap; }
  .presence-notification > .btn { margin-left: 50px; }
  .presence-draw-helper { align-items: stretch; flex-direction: column; }
  .presence-draw-helper .btn { width: 100%; }
}

@media (max-width: 380px) {
  .presence-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presence-answer-grid { grid-template-columns: 1fr; }
  .presence-answer { min-height: 62px; flex-direction: row; justify-content: flex-start; padding: 9px 12px; }
  .presence-answer b { text-align: left; }
  .presence-answer small { margin-left: auto; text-align: right; }
  .presence-player-row { flex-wrap: wrap; }
  .presence-player-row .presence-status { margin-left: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .presence-answer.selected { animation: none !important; }
  .presence-answer { transition: none !important; }
}


/* V21 — LEMBRETES AUTOMÁTICOS DE PRESENÇA */
.presence-notification.automatic{align-items:flex-start}
.presence-notification-copy{min-width:0;flex:1}
.presence-notification-prefs{display:grid;gap:8px;margin-top:12px}
.presence-notification-prefs .toggle-row.compact{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72)}
.presence-notification-prefs .toggle-row.compact small{display:block;margin-top:2px;line-height:1.35}
.presence-auto-note{display:block;margin-top:6px;color:var(--muted);line-height:1.35}
@media (max-width:640px){
  .presence-notification.automatic{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
  .presence-notification.automatic>[data-presence-disable-push]{grid-column:2;justify-self:start}
}
/* =========================================================
   V22 — RESULTADO POLIDO
   ========================================================= */

.team-grid {
  gap: 14px;
}

.team-card,
.team-card:nth-child(even) {
  color: #193348;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,254,.98));
  border: 1px solid #d2e2ed;
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(20, 55, 80, .08);
}

.team-card header {
  min-height: 88px;
  padding: 15px 17px 13px;
  align-items: center;
  border-bottom: 1px solid #e4edf3;
  background:
    linear-gradient(135deg, rgba(240,248,255,.95), rgba(255,255,255,.96));
}

.team-card-copy {
  min-width: 0;
}

.team-card-copy > span {
  color: #718797;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}

.team-card-copy h3 {
  max-width: 210px;
  margin-top: 4px;
  color: #18364d;
  font-size: 21px;
  line-height: 1.05;
}

.team-card-copy > small {
  display: block;
  margin-top: 5px;
  color: #7590a2;
  font-size: 9px;
  font-weight: 800;
}

.team-total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.team-total strong {
  color: #147cd7;
  font-size: 35px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.04em;
}

.team-total small {
  color: #3c7caf;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.team-members {
  padding: 5px 14px 10px;
}

.team-player {
  min-height: 64px;
  padding: 9px 2px;
  gap: 10px;
  border-bottom-color: #e5edf2;
}

.team-player.goalkeeper {
  margin: 3px -5px;
  padding: 9px 7px;
  background: linear-gradient(90deg, #edf7ff, rgba(247,252,255,.55));
  border: 1px solid #d7eafb;
  border-radius: 14px;
}

.team-player.captain {
  margin: 3px -5px;
  padding: 9px 7px;
  background:
    linear-gradient(90deg, rgba(255,248,221,.92), rgba(255,253,244,.6));
  border: 1px solid #f0dfaa;
  border-radius: 14px;
}

.team-player.goalkeeper.captain {
  background:
    linear-gradient(90deg, #fff7d9, #eef8ff);
  border-color: #e7d997;
}

.team-player-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.team-player-copy > b {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: #17364c;
  font-size: 13px;
  line-height: 1.22;
  white-space: normal;
}

.team-player-copy > small {
  margin-top: 2px;
  color: #7b8e9b;
  font-size: 9px;
}

.team-shirt {
  color: #2877ad !important;
  font-size: 10px !important;
  font-style: normal;
}

.team-player-meta {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.team-position {
  padding: 3px 6px;
  color: #637c8d;
  font-size: 8px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  background: #eef3f6;
  border: 1px solid #dde7ed;
  border-radius: 999px;
}

.team-position.keeper {
  color: #126eaf;
  background: #e5f4ff;
  border-color: #c7e5f8;
}

.team-rank-token {
  width: 37px;
  min-width: 37px;
  height: 43px;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  text-align: center;
  background: #eef6fb;
  border: 1px solid #dbe8ef;
  border-radius: 12px;
}

.team-rank-token b {
  color: #2277a9;
  font-size: 17px;
  line-height: 1;
}

.team-rank-token small {
  margin-top: 3px;
  color: #718695;
  font-size: 8px;
  font-weight: 900;
}

.team-rank-token.rank-s {
  background: #fff8e5;
  border-color: #efdca3;
}

.team-rank-token.rank-s b {
  color: #a87708;
}

.team-rank-token.rank-a {
  background: #f3efff;
  border-color: #ded3f5;
}

.team-rank-token.rank-a b {
  color: #6e55a5;
}

.captain-badge {
  margin-left: 0;
  padding: 4px 7px;
  color: #8b6913;
  font-size: 8px;
  background: #ffe999;
  border-radius: 999px;
}

.captain-badge .icon {
  width: 11px;
  height: 11px;
}

.draw-summary-strip {
  margin: 14px 0 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.draw-summary-strip > span {
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  color: #1b4c70;
  background: #f6fbff;
  border: 1px solid #d7e8f3;
  border-radius: 16px;
}

.draw-summary-strip .icon {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: #2587cb;
}

.draw-summary-strip small {
  color: #7a909e;
  font-size: 8px;
  font-weight: 850;
}

.draw-summary-strip b {
  color: #153e5c;
  font-size: 14px;
}

.share-sheet {
  display: grid;
  gap: 9px;
}

.share-sheet-intro {
  margin-bottom: 5px;
  padding: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #22465e;
  background: #f1f8fd;
  border: 1px solid #d8e8f2;
  border-radius: 15px;
}

.share-sheet-intro > .icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #197fd0;
}

.share-sheet-intro div {
  min-width: 0;
}

.share-sheet-intro b,
.share-sheet-intro small {
  display: block;
}

.share-sheet-intro small {
  margin-top: 4px;
  color: #758a98;
  font-size: 10px;
  line-height: 1.45;
}

.share-option {
  width: 100%;
  min-height: 68px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #1b3c52;
  text-align: left;
  background: #fff;
  border: 1px solid #d9e5ed;
  border-radius: 16px;
}

.share-option.primary {
  color: #fff;
  background: linear-gradient(135deg, #147ee0, #086ac4);
  border-color: #197dd1;
}

.share-option > .icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
}

.share-option > span {
  min-width: 0;
}

.share-option b,
.share-option small {
  display: block;
}

.share-option b {
  font-size: 13px;
}

.share-option small {
  margin-top: 3px;
  color: #7b8e9b;
  font-size: 9px;
  line-height: 1.35;
}

.share-option.primary small {
  color: rgba(255,255,255,.78);
}

.draw-experience .presentation-final {
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  .team-grid,
  .team-grid.many {
    grid-template-columns: 1fr;
  }

  .team-grid.compact-result {
    gap: 10px;
  }

  .team-card-copy h3 {
    max-width: min(58vw, 250px);
  }
}

@media (max-width: 430px) {
  .team-card {
    border-radius: 21px;
  }

  .team-card header {
    min-height: 80px;
    padding: 13px 14px 11px;
  }

  .team-total strong {
    font-size: 31px;
  }

  .team-members {
    padding: 4px 10px 8px;
  }

  .team-player {
    min-height: 59px;
    gap: 8px;
  }

  .team-player-copy > b {
    font-size: 12px;
  }

  .team-rank-token {
    width: 35px;
    min-width: 35px;
    height: 40px;
  }

  .draw-summary-strip {
    grid-template-columns: 1fr 1fr;
  }

  .draw-experience .presentation-final h1 {
    font-size: clamp(28px, 10vw, 42px);
    line-height: .98;
  }
}

@media (max-width: 350px) {
  .draw-summary-strip {
    grid-template-columns: 1fr;
  }

  .captain-badge {
    padding: 3px 5px;
  }
}

/* V22.1 — o seletor de compartilhamento precisa ficar acima da apresentação cinematográfica. */
.presentation-open .modal {
  z-index: 420;
}

/* =========================================================
   V23 — HOME, HISTÓRICO E RANKINGS PREMIUM
   ========================================================= */

.home-dashboard { margin-top: 14px; display: grid; gap: 10px; }
.home-spotlight {
  position: relative;
  width: 100%;
  min-height: 92px;
  overflow: hidden;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-align: left;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(27, 75, 115, .16);
}
.home-spotlight::after { position: absolute; inset: -55% -10% auto auto; width: 190px; height: 190px; content: ""; background: radial-gradient(circle, rgba(255,255,255,.24), transparent 68%); pointer-events: none; }
.home-spotlight.presence { background: linear-gradient(135deg, #0d8b5d, #16ad77 52%, #0c7860); }
.home-spotlight.result { background: linear-gradient(135deg, #0d6fc9, #168ce4 52%, #115ba8); }
.home-spotlight.draw { background: linear-gradient(135deg, #6545b5, #7b5cc9 52%, #48348f); }
.home-spotlight-icon { width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); border-radius: 15px; }
.home-spotlight-icon .icon { width: 25px; height: 25px; }
.home-spotlight-copy { min-width: 0; display: grid; gap: 3px; }
.home-spotlight-copy small { font-size: 8px; font-weight: 950; letter-spacing: .12em; opacity: .78; }
.home-spotlight-copy b { overflow: hidden; font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.home-spotlight-copy em { overflow: hidden; font-size: 10px; font-style: normal; opacity: .82; text-overflow: ellipsis; white-space: nowrap; }
.home-spotlight-stat { min-width: 66px; display: grid; place-items: center; text-align: center; }
.home-spotlight-stat strong { font-size: 27px; line-height: 1; }
.home-spotlight-stat small { margin-top: 4px; font-size: 8px; font-weight: 850; opacity: .82; }
.home-spotlight-stat .icon { width: 27px; height: 27px; }

.home-quick-grid { gap: 9px; }
.action-card.premium-action {
  min-height: 104px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #d9e5ed;
  box-shadow: 0 10px 26px rgba(35, 66, 87, .07);
}
.action-card.premium-action::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: var(--action-accent, #1478e5); }
.action-card.premium-action::after { right: -18px; bottom: -28px; width: 82px; height: 82px; background: radial-gradient(circle, color-mix(in srgb, var(--action-accent, #1478e5) 16%, transparent), transparent 68%); }
.premium-action.accent-blue { --action-accent: #147ee4; }
.premium-action.accent-green { --action-accent: #17a56c; }
.premium-action.accent-orange { --action-accent: #ef8b28; }
.premium-action.accent-purple { --action-accent: #7757c7; }
.action-icon { width: 39px; height: 39px; display: grid; place-items: center; color: var(--action-accent); background: color-mix(in srgb, var(--action-accent) 10%, #fff); border-radius: 12px; }
.action-icon .icon { width: 21px !important; height: 21px !important; color: inherit !important; }
.action-copy { min-width: 0; }
.action-copy b { color: #1c3a4f; font-size: 13px; }
.action-copy small { max-width: 100%; overflow: hidden; color: #7b8e9b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.action-metric { max-width: 76px; overflow: hidden; color: var(--action-accent); font-size: 22px; font-weight: 950; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }

.home-section-head { margin-top: 25px; }
.home-podium-list { gap: 7px; }
.ranking-row.featured { position: relative; overflow: hidden; border-left: 4px solid #8ba3b4; animation: v23-card-in .42s ease both; animation-delay: calc(var(--rank-order, 0) * 70ms); }
.ranking-row.featured.podium-1 { border-color: #d5a72d; background: linear-gradient(100deg, #fff9e6, #fff 52%); }
.ranking-row.featured.podium-2 { border-color: #99a9b5; background: linear-gradient(100deg, #f4f7f9, #fff 52%); }
.ranking-row.featured.podium-3 { border-color: #c88750; background: linear-gradient(100deg, #fff4ec, #fff 52%); }
.ranking-row.featured .ranking-number { min-width: 34px; font-size: 15px; }
.ranking-row.featured.podium-1 .ranking-number { color: #a87808; }
.ranking-row.featured.podium-2 .ranking-number { color: #697c89; }
.ranking-row.featured.podium-3 .ranking-number { color: #9a5c2f; }

.result-page-heading, .history-page-heading { align-items: center; padding: 14px 15px; background: linear-gradient(135deg, #f8fbfd, #fff); border: 1px solid #dce7ed; border-radius: 20px; box-shadow: 0 10px 28px rgba(41, 71, 91, .06); }
.result-heading-icon, .history-heading-icon { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; color: #1479d8; background: #eaf4ff; border-radius: 15px; }
.result-heading-icon .icon, .history-heading-icon .icon { width: 27px; height: 27px; }
.result-page-heading.tone-badball .result-heading-icon { color: #c85d23; background: #fff0e7; }
.result-page-heading.tone-crowd .result-heading-icon { color: #7150bd; background: #f1edff; }
.result-page-heading.tone-captains .result-heading-icon { color: #9a730c; background: #fff6d9; }

.premium-result-tabs { padding: 5px; gap: 5px; background: #edf3f7; border: 1px solid #dde7ed; box-shadow: inset 0 1px rgba(255,255,255,.8); }
.premium-result-tabs .result-tab { min-height: 48px; border-radius: 12px; transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.result-tab-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; }
.result-tab-icon .icon { width: 15px !important; height: 15px !important; }
.premium-result-tabs .tab-latest.active { color: #0b73d5; }
.premium-result-tabs .tab-latest.active .result-tab-icon { background: #e8f4ff; }
.premium-result-tabs .tab-badball.active { color: #c25c25; }
.premium-result-tabs .tab-badball.active .result-tab-icon { background: #fff0e8; }
.premium-result-tabs .tab-crowd.active { color: #6d4db4; }
.premium-result-tabs .tab-crowd.active .result-tab-icon { background: #f0ebff; }
.premium-result-tabs .tab-captains.active { color: #8c6909; }
.premium-result-tabs .tab-captains.active .result-tab-icon { background: #fff5d2; }
.result-view { animation: v23-view-in .34s ease both; }

.premium-placard-list { gap: 11px; }
.placard-card.premium-placard { position: relative; overflow: hidden; padding: 13px; background: linear-gradient(145deg, #fff, #f8fbfd); border: 1px solid #d8e5ed; box-shadow: 0 10px 28px rgba(30, 65, 90, .07); animation: v23-card-in .42s ease both; animation-delay: calc(var(--card-order, 0) * 55ms); }
.premium-placard.has-winner { border-color: #c9e1f4; }
.premium-placard::after { position: absolute; top: -70px; right: -55px; width: 140px; height: 140px; content: ""; background: radial-gradient(circle, rgba(28, 134, 224, .09), transparent 68%); pointer-events: none; }
.premium-placard > header span { display: inline-flex; align-items: center; gap: 5px; }
.premium-placard > header .icon { width: 14px; height: 14px; }
.premium-placard .placard-score { margin: 12px 0; align-items: stretch; }
.premium-placard .placard-team { position: relative; min-height: 83px; padding: 11px 8px; display: grid; place-items: center; align-content: center; gap: 2px; background: #f4f8fb; border: 1px solid #e0e9ef; border-radius: 15px; }
.premium-placard .placard-team.win { background: linear-gradient(145deg, #ecf9f2, #f8fffb); border-color: #c8e9d7; box-shadow: 0 8px 20px rgba(27, 138, 86, .08); }
.premium-placard .placard-team.loss { background: #fff7f7; border-color: #f0dddd; }
.premium-placard .placard-team small { max-width: 100%; overflow: hidden; color: #627b8d; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.premium-placard .placard-team b { color: #17384e; font-size: 32px; line-height: 1; }
.premium-placard .placard-team.win b { color: #11834f; }
.premium-placard .placard-team > em:not(.placard-winner-mark) { color: #7a8d9a; font-size: 7px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.placard-winner-mark { position: absolute; top: 6px; right: 7px; color: #159258; }
.placard-winner-mark .icon { width: 13px; height: 13px; }
.score-versus { align-self: center; color: #9aacb8; font-size: 12px; font-style: normal; font-weight: 950; }
.placard-meta { display: inline-flex; align-items: center; gap: 4px; }
.placard-meta .icon { width: 12px; height: 12px; }
.placard-bad.premium { max-width: 58%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 5px; padding: 5px 8px; color: #a64c22; background: #fff0e8; border-radius: 999px; }
.placard-bad.premium .icon { grid-row: 1 / 3; width: 13px; height: 13px; }
.placard-bad.premium b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.placard-bad.premium small { color: #b36c48; font-size: 6px; font-weight: 950; text-transform: uppercase; }
.placard-bad.empty.premium { display: inline-flex; color: #899ba7; background: #f1f4f6; }

.premium-ranking-hero { position: relative; overflow: hidden; min-height: 98px; box-shadow: 0 12px 28px rgba(42, 67, 87, .07); }
.premium-ranking-hero::after { position: absolute; right: -32px; top: -45px; width: 120px; height: 120px; content: ""; border: 20px solid rgba(255,255,255,.22); border-radius: 50%; pointer-events: none; }
.bad-rank-hero.premium-ranking-hero { background: linear-gradient(135deg, #fff2e9, #fffaf6); border-color: #f0d9ca; }
.bad-rank-hero.premium-ranking-hero > span { color: #b95725; background: #ffe1cf; }
.crowd-rank-hero.premium-ranking-hero { background: linear-gradient(135deg, #f2efff, #fbfaff); border-color: #ddd5f4; }
.crowd-rank-hero.premium-ranking-hero > span { color: #6c4ab7; background: #e7e0fb; }
.captain-rank-hero.premium-ranking-hero { background: linear-gradient(135deg, #fff8df, #fffdf5); border-color: #eadca8; }

.ranking-podium-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ranking-podium-card { position: relative; min-width: 0; min-height: 178px; overflow: hidden; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; text-align: center; background: #fff; border: 1px solid #dbe5eb; border-radius: 18px; box-shadow: 0 10px 24px rgba(35, 66, 87, .07); animation: v23-podium-in .48s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--podium-order, 0) * 80ms); }
.ranking-podium-card::after { position: absolute; inset: -70% -20% auto auto; width: 120px; height: 120px; content: ""; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 67%); pointer-events: none; }
.ranking-podium-card.podium-1 { border-color: #e9d28c; background: linear-gradient(155deg, #fff6d4, #fffdf5 58%); transform-origin: center bottom; }
.ranking-podium-card.podium-2 { border-color: #d6e0e6; background: linear-gradient(155deg, #eef3f6, #fff 58%); }
.ranking-podium-card.podium-3 { border-color: #e7c3a8; background: linear-gradient(155deg, #fff0e5, #fffaf7 58%); }
.ranking-podium-card.crowd.podium-1 { border-color: #cdbdf0; background: linear-gradient(155deg, #ede5ff, #fbf9ff 58%); }
.ranking-podium-card.bad.podium-1 { border-color: #efc6ad; background: linear-gradient(155deg, #ffe6d6, #fff9f5 58%); }
.podium-position { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; color: #6d7f8b; font-size: 9px; }
.podium-position .icon { width: 12px; height: 12px; }
.podium-1 .podium-position { color: #a57b0b; }
.ranking-podium-card.bad .podium-position { color: #b45b2e; }
.ranking-podium-card.crowd .podium-position { color: #6d4cb6; }
.ranking-podium-card .avatar.medium { width: 58px; height: 58px; margin-top: 10px; border-radius: 18px; }
.podium-copy { min-width: 0; width: 100%; display: grid; gap: 2px; }
.podium-copy small { color: #80919d; font-size: 6px; font-weight: 950; letter-spacing: .07em; }
.podium-copy b { overflow: hidden; color: #17384d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.podium-copy span { overflow: hidden; color: #7c8d98; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.podium-value { margin-top: auto; display: grid; place-items: center; }
.podium-value strong { color: #1d719f; font-size: 23px; line-height: 1; }
.ranking-podium-card.bad .podium-value strong { color: #b55828; }
.ranking-podium-card.crowd .podium-value strong { color: #6b4bb5; }
.podium-value small { margin-top: 3px; color: #7d8f9b; font-size: 6px; }
.podium-record { width: 100%; margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.podium-record span { padding: 5px 2px; display: grid; place-items: center; color: #3f5665; background: rgba(255,255,255,.72); border-radius: 8px; }
.podium-record b { font-size: 12px; line-height: 1; }
.podium-record small { margin-top: 2px; font-size: 6px; font-weight: 950; }
.podium-record span:first-child { color: #126d40; }
.podium-record span:last-child { color: #a44242; }
.rank-list-heading { margin-top: 17px; }
.premium-rank-row { animation: v23-card-in .38s ease both; animation-delay: calc(var(--row-order, 0) * 50ms); }

.history-summary { margin-bottom: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.history-summary > span { min-height: 67px; padding: 9px; display: grid; place-items: center; align-content: center; gap: 2px; color: #175a89; background: #eef7fd; border: 1px solid #d9eaf5; border-radius: 15px; text-align: center; }
.history-summary > span.finished { color: #197047; background: #eef9f3; border-color: #d5eadf; }
.history-summary > span.pending { color: #966b12; background: #fff8e8; border-color: #eee0bd; }
.history-summary b { font-size: 22px; line-height: 1; }
.history-summary small { font-size: 7px; font-weight: 900; text-transform: uppercase; }
.premium-history-list { gap: 8px; }
.history-row.premium-history-row { min-height: 76px; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #fff; border: 1px solid #dbe5eb; box-shadow: 0 8px 22px rgba(31, 64, 86, .06); animation: v23-card-in .4s ease both; animation-delay: calc(var(--history-order, 0) * 50ms); }
.premium-history-row.finished { border-left: 4px solid #2aa66d; }
.premium-history-row.pending { border-left: 4px solid #d8a43a; }
.premium-history-row .history-icon { width: 42px !important; height: 42px !important; display: grid !important; place-items: center; color: #147bd8 !important; background: #edf6ff !important; border-radius: 13px !important; }
.premium-history-row.finished .history-icon { color: #168554 !important; background: #eaf8f1 !important; }
.premium-history-row .history-icon .icon { width: 20px; height: 20px; }
.history-main { min-width: 0; display: grid; gap: 2px; }
.history-main > small { color: #7e909c; font-size: 7px; font-weight: 950; letter-spacing: .08em; }
.history-main > b { overflow: hidden; color: #19394e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-main > em { overflow: hidden; color: #82939e; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.history-side { display: grid; justify-items: end; gap: 5px; }
.history-status { padding: 4px 6px; color: #956a0e !important; background: #fff5db; border-radius: 999px; font-size: 6px !important; font-weight: 950; text-transform: uppercase; }
.finished .history-status { color: #167147 !important; background: #eaf8f1; }
.history-side strong { color: #1675c7 !important; font-size: 10px !important; }
.premium-history-row.compact { min-height: 68px; }

.premium-community-list .community-game-card { position: relative; overflow: hidden; border-left: 4px solid #7959c4; box-shadow: 0 9px 24px rgba(78, 55, 132, .07); }
.premium-community-list .community-game-card::after { position: absolute; right: -35px; bottom: -45px; width: 100px; height: 100px; content: ""; background: radial-gradient(circle, rgba(117, 82, 198, .09), transparent 68%); pointer-events: none; }

@keyframes v23-card-in { from { opacity: 0; transform: translateY(8px) scale(.988); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes v23-podium-in { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes v23-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (hover: hover) and (pointer: fine) {
  .home-spotlight:hover, .premium-action:hover, .premium-placard:hover, .premium-history-row:hover, .ranking-podium-card:hover { transform: translateY(-2px); }
}

@media (max-width: 430px) {
  .home-spotlight { min-height: 86px; padding: 12px; gap: 9px; border-radius: 19px; }
  .home-spotlight-icon { width: 42px; height: 42px; border-radius: 13px; }
  .home-spotlight-copy b { font-size: 14px; }
  .home-spotlight-copy em { font-size: 8px; }
  .home-spotlight-stat { min-width: 55px; }
  .home-spotlight-stat strong { font-size: 23px; }
  .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-card.premium-action { min-height: 92px; padding: 10px; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 8px; }
  .action-icon { width: 34px; height: 34px; }
  .action-copy b { font-size: 11px; }
  .action-copy small { font-size: 7.5px; }
  .action-metric { grid-column: 1 / -1; max-width: 100%; padding-left: 2px; font-size: 18px; }
  .result-page-heading, .history-page-heading { padding: 11px 12px; }
  .result-heading-icon, .history-heading-icon { width: 42px; height: 42px; }
  .premium-result-tabs .result-tab { min-height: 43px; padding: 4px 3px; gap: 2px; }
  .result-tab-icon { width: 22px; height: 22px; }
  .premium-result-tabs .result-tab > span:last-child { font-size: 12px; }
  .ranking-podium-grid { gap: 5px; }
  .ranking-podium-card { min-height: 164px; padding: 9px 6px; border-radius: 15px; }
  .ranking-podium-card .avatar.medium { width: 48px; height: 48px; border-radius: 15px; }
  .podium-copy b { font-size: 9px; }
  .podium-copy span { font-size: 6.5px; }
  .podium-value strong { font-size: 20px; }
  .podium-record b { font-size: 10px; }
  .premium-placard .placard-team { min-height: 76px; padding: 9px 5px; }
  .premium-placard .placard-team b { font-size: 28px; }
  .history-row.premium-history-row { min-height: 70px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; }
  .premium-history-row .history-icon { width: 36px !important; height: 36px !important; }
  .history-main > b { font-size: 10px; }
  .history-main > em { font-size: 7px; }
  .history-side strong { font-size: 8px !important; }
}

@media (max-width: 350px) {
  .home-quick-grid { grid-template-columns: 1fr; }
  .action-card.premium-action { min-height: 74px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; }
  .action-metric { grid-column: auto; font-size: 17px; }
  .ranking-podium-grid { grid-template-columns: 1fr; }
  .ranking-podium-card { min-height: 96px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; text-align: left; align-items: center; }
  .ranking-podium-card .avatar.medium { margin-top: 0; width: 43px; height: 43px; }
  .podium-position { position: static; }
  .podium-value { margin-top: 0; }
  .podium-record { width: 88px; margin-top: 0; }
  .history-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-row.featured,
  .placard-card.premium-placard,
  .ranking-podium-card,
  .premium-rank-row,
  .history-row.premium-history-row,
  .result-view { animation: none !important; transition: none !important; }
}


/* =========================================================
   V24 — FORMA RECENTE
   ========================================================= */

.recent-form {
  min-width: 0;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.recent-form-token {
  --form-color: #7a8d99;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--form-color);
  background: #f3f6f8;
  border: 1px solid #dce5ea;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(35, 63, 80, .06);
  animation: v24-form-in .28s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--form-order, 0) * 38ms);
}

.recent-form-token.win {
  --form-color: #148052;
  background: #eaf8f1;
  border-color: #cbe9db;
}

.recent-form-token.draw {
  --form-color: #a87512;
  background: #fff7df;
  border-color: #efdfae;
}

.recent-form-token.loss {
  --form-color: #b14949;
  background: #fff0f0;
  border-color: #efcece;
}

.recent-form-token.latest {
  position: relative;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--form-color) 55%, #9db4c3), 0 4px 10px rgba(35, 63, 80, .09);
  transform: scale(1.04);
}

.form-icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-draw-symbol {
  margin-top: -2px;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.recent-form.compact {
  margin-top: 5px;
  gap: 3px;
}

.recent-form.compact .recent-form-token {
  width: 18px;
  height: 18px;
  box-shadow: none;
}

.recent-form.compact .recent-form-token.latest {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px color-mix(in srgb, var(--form-color) 52%, #a2b6c4);
}

.recent-form.compact .form-icon {
  width: 10px;
  height: 10px;
}

.recent-form.compact .form-draw-symbol {
  font-size: 13px;
}

.recent-form-badge {
  min-height: 19px;
  margin-left: 2px;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #17704a;
  background: #ebf8f2;
  border: 1px solid #cee9dc;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.recent-form-badge.hot {
  color: #9c6410;
  background: #fff6de;
  border-color: #ead9a6;
}

.recent-form-badge .icon {
  width: 10px;
  height: 10px;
}

.participant-row .recent-form {
  width: max-content;
  max-width: 100%;
}

.team-player .recent-form {
  margin-top: 6px;
}

.team-player .recent-form-badge {
  display: none;
}

.recent-form-card {
  margin-top: 11px;
  padding: 12px;
  background: linear-gradient(145deg, #f8fbfd, #fff);
  border: 1px solid #dbe7ed;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(35, 66, 87, .055);
}

.recent-form-card.empty {
  box-shadow: none;
}

.recent-form-card.empty > p {
  margin: 8px 0 0;
  color: #7d8f9b;
  font-size: 9px;
  line-height: 1.4;
}

.recent-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recent-form-head > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.recent-form-head b {
  color: #173c55;
  font-size: 11px;
}

.recent-form-head small {
  color: #7d8f9b;
  font-size: 8px;
}

.profile-form {
  margin-top: 10px;
  gap: 7px;
}

.profile-form .recent-form-token {
  width: 32px;
  height: 32px;
}

.profile-form .form-icon {
  width: 16px;
  height: 16px;
}

.profile-form .form-draw-symbol {
  font-size: 21px;
}

.recent-form-summary {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.recent-form-summary > span {
  min-width: 0;
  padding: 7px 5px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: #567080;
  background: #f3f7f9;
  border-radius: 10px;
}

.recent-form-summary > span.win { color: #13754b; background: #edf9f3; }
.recent-form-summary > span.draw { color: #9a6b12; background: #fff8e7; }
.recent-form-summary > span.loss { color: #a94141; background: #fff1f1; }
.recent-form-summary b { font-size: 14px; line-height: 1; }
.recent-form-summary small { font-size: 7px; font-weight: 850; }

@keyframes v24-form-in {
  from { opacity: 0; transform: translateY(3px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 430px) {
  .participant-row .recent-form.compact .recent-form-token {
    width: 17px;
    height: 17px;
  }

  .team-player .recent-form.compact .recent-form-token {
    width: 16px;
    height: 16px;
  }

  .profile-form .recent-form-token {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 350px) {
  .recent-form.compact { gap: 2px; }
  .participant-row .recent-form-badge { display: none; }
  .profile-form { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .recent-form-token { animation: none !important; transition: none !important; }
}


/* =========================================================
   V25 — MODO SORTEIO AO VIVO
   ========================================================= */
.live-sync-pill {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 260;
  min-height: 31px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0b6842;
  background: rgba(239, 255, 248, .96);
  border: 1px solid rgba(43, 164, 112, .30);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(17, 72, 53, .14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.live-sync-pill.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.96);
}

.live-sync-pill > i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: #21b66f;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(33, 182, 111, .30);
  animation: livePulse 1.8s ease-out infinite;
}

.live-sync-pill.received,
.live-sync-pill.syncing {
  color: #075e9b;
  background: rgba(237, 248, 255, .98);
  border-color: rgba(31, 134, 205, .34);
}

.live-sync-pill.received > i,
.live-sync-pill.syncing > i {
  background: #1f8bd2;
  animation-duration: .8s;
}

.live-sync-pill.connecting,
.live-sync-pill.reconnecting {
  color: #8a6509;
  background: rgba(255, 249, 229, .98);
  border-color: rgba(204, 158, 35, .32);
}

.live-sync-pill.connecting > i,
.live-sync-pill.reconnecting > i {
  background: #d69b14;
}

.live-sync-pill.offline {
  color: #9d3535;
  background: rgba(255, 241, 241, .98);
  border-color: rgba(205, 78, 78, .28);
}

.live-sync-pill.offline > i {
  background: #d34d4d;
  animation: none;
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(33, 182, 111, .34); }
  70% { box-shadow: 0 0 0 7px rgba(33, 182, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(33, 182, 111, 0); }
}

.presentation-open .live-sync-pill {
  z-index: 430;
  bottom: calc(14px + env(safe-area-inset-bottom));
}

@media (max-width: 430px) {
  .live-sync-pill {
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    padding: 6px 9px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-sync-pill,
  .live-sync-pill > i {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   V26 — LAPIDAÇÃO MOBILE FINAL
   Hierarquia, densidade, legibilidade e UX das telas reais.
   ========================================================= */

/* ---- base: legibilidade e alvos de toque ---- */
.mini-btn { width: 44px; height: 44px; }
.mini-btn .icon { width: 18px; height: 18px; }

.admin-bar.compact {
  min-height: 38px;
  margin: -2px 0 10px;
  padding: 7px 11px;
  justify-content: flex-start;
  gap: 7px;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(0, 90, 230, .12);
}
.admin-bar.compact .icon { width: 15px; height: 15px; }
.admin-bar.compact b { font-size: 10px; letter-spacing: .03em; }

/* ---- modo ao vivo: integrado ao cabeçalho, nunca sobre o conteúdo ---- */
.live-sync-slot {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.live-sync-pill {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  min-height: 28px;
  padding: 6px 9px;
  flex: 0 0 auto;
  font-size: 9px;
  box-shadow: 0 4px 12px rgba(17, 72, 53, .09);
  transform: none;
}
.live-sync-pill.is-hidden { display: none; }
.presentation-open .live-sync-pill { display: none !important; }
.heading-status-stack {
  min-width: 74px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 6px;
}

/* ---- Home: menos altura e melhor leitura acima da dobra ---- */
.home-hero-premium {
  min-height: 245px;
  padding: 18px 19px 18px;
}
.home-hero-premium .hero-brand-logo {
  width: 62px;
  height: 62px;
}
.home-hero-premium h1 {
  margin-top: 18px;
  font-size: clamp(36px, 10vw, 52px);
}
.home-hero-premium p {
  max-width: 360px;
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.4;
}
.hero-intro-row {
  max-width: 452px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.home-hero-premium .hero-intro-text {
  max-width: 420px;
  margin: 11px 0 0;
  color: #324f63;
  font-size: 18px;
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.hero-intro-edit {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  margin-top: 5px;
  display: grid;
  place-items: center;
  color: #0a6ed1;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(34, 106, 161, .20);
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(28, 65, 91, .09);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.hero-intro-edit .icon { width: 18px; height: 18px; }
.hero-intro-edit:hover { background: rgba(255, 255, 255, .92); }
.hero-intro-form-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 9px; }
.hero-intro-form-actions .btn { min-height: 48px; }
.home-hero-premium .hero-photo-action {
  min-height: 36px;
  padding: 0 9px;
  font-size: 9px;
}
.home-hero-premium .hero-signature { bottom: 12px; }
.home-dashboard { margin-top: 11px; }
.home-spotlight { min-height: 82px; }
.home-spotlight-copy small,
.home-spotlight-stat small { font-size: 9px; }
.home-spotlight-copy em { font-size: 10px; }

.action-card.premium-action {
  min-height: 84px;
  padding: 11px;
}
.action-copy b { font-size: 12px; }
.action-copy small {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.25;
}
.action-metric {
  font-size: 17px;
  line-height: 1.05;
  white-space: nowrap;
}

.home-section-head { margin-top: 23px; }
.home-podium-list .ranking-row.featured .profile-copy small { font-size: 10px; }

.home-last-draw {
  width: 100%;
  padding: 12px;
  display: grid;
  gap: 9px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(145deg, #fff, #f7fbfd);
  border: 1px solid #d8e5ed;
  border-radius: 18px;
  box-shadow: 0 9px 24px rgba(31, 64, 86, .06);
}
.home-last-draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.home-last-draw-head b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #174e74;
  font-size: 11px;
}
.home-last-draw-head b .icon { width: 15px; height: 15px; }
.home-last-draw-head small { color: #758995; font-size: 9px; }
.home-last-teams { display: grid; gap: 6px; }
.home-last-team {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
  background: #f2f7fa;
  border-radius: 12px;
}
.home-last-team b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-last-team small { overflow: hidden; color: #758995; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-last-team strong { grid-column: 2; grid-row: 1 / 3; color: #1673bd; font-size: 13px; }
.home-empty-state .empty-state {
  min-height: 92px;
  padding: 14px 16px;
}
.home-empty-state .empty-state > .icon { width: 23px; height: 23px; margin-bottom: 6px; }
.home-empty-state .empty-state h2 { font-size: 14px; }
.home-empty-state .empty-state p { margin-top: 4px; font-size: 10px; }

/* ---- Jogadores: informação essencial na lista; detalhes no perfil ---- */
.player-list { gap: 7px; }
.player-card { padding: 11px; }
.player-main { gap: 9px; }
.player-card .profile-copy > span { font-size: 10px; }
.player-card .profile-stats { margin-top: 4px; gap: 5px 8px; }
.player-card .profile-stats span { font-size: 10px; }
.player-card .recent-form { margin-top: 5px; }
.player-footer {
  min-height: 34px;
  margin-top: 5px;
  align-items: center;
}
.player-footer .tier-copy { font-size: 10px; }
.profile-admin-actions { margin-top: 12px; display: grid; gap: 7px; }
.danger-text { color: #b4424d !important; }

/* ---- Presença: foco em quando/onde/vou/quem vai ---- */
.presence-identity.bound.compact {
  min-height: 68px;
  padding: 10px 12px;
  flex-direction: row;
  align-items: center;
}
.presence-identity.bound.compact > div { gap: 9px; }
.presence-identity.bound.compact b { font-size: 14px; }
.presence-identity.bound.compact > .btn {
  min-height: 40px;
  padding: 0 9px;
  align-self: center;
}
.presence-counts button span { font-size: 9px; }

.presence-notification {
  padding: 11px 12px;
}
details.presence-notification {
  display: block;
}
details.presence-notification > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
details.presence-notification > summary::-webkit-details-marker { display: none; }
details.presence-notification > summary > .icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  color: #17884f;
  background: #e7f7ee;
  border-radius: 12px;
}
details.presence-notification > summary > span { min-width: 0; display: grid; gap: 2px; }
details.presence-notification > summary b { font-size: 12px; }
details.presence-notification > summary small { color: var(--muted); font-size: 9px; }
details.presence-notification > summary strong {
  padding: 4px 7px;
  color: #17744a;
  background: #e8f7ef;
  border-radius: 999px;
  font-size: 9px;
  text-transform: uppercase;
}
.presence-notification-copy { margin: 11px 0 0 47px; }
.presence-notification-prefs { margin-top: 0; }
.presence-platform-note { display: block; margin: 8px 1px; color: var(--muted); font-size: 9px; }

.presence-admin-tools {
  padding: 0;
  display: block;
  overflow: hidden;
}
.presence-admin-tools > summary {
  min-height: 58px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.presence-admin-tools > summary::-webkit-details-marker { display: none; }
.presence-admin-tools > summary > .icon {
  width: 36px;
  height: 36px;
  padding: 9px;
  color: #976f0c;
  background: #fff5d4;
  border-radius: 11px;
}
.presence-admin-tools > summary span { display: grid; gap: 2px; }
.presence-admin-tools > summary b { font-size: 12px; }
.presence-admin-tools > summary small { color: var(--muted); font-size: 9px; }
.presence-admin-body { padding: 0 12px 12px; }
.presence-admin-body p { margin-top: 0; }

/* ---- Sorteio: explicação recolhível + lista compacta + dock fixo ---- */
.draw-page-heading { align-items: center; }
.draw-balance-help {
  overflow: hidden;
  background: #eef7ff;
  border: 1px solid #d2e5f4;
  border-radius: 13px;
}
.draw-balance-help summary {
  min-height: 54px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #235b82;
}
.draw-balance-help summary::-webkit-details-marker { display: none; }
.draw-balance-help summary > .icon { width: 18px; height: 18px; }
.draw-balance-help summary span { min-width: 0; display: grid; gap: 2px; }
.draw-balance-help summary b { font-size: 11px; }
.draw-balance-help summary small { color: #63819a; font-size: 9px; line-height: 1.3; }
.draw-balance-help summary strong { color: #1674bd; font-size: 9px; white-space: nowrap; }
.draw-balance-help p { margin: 0; padding: 0 12px 11px 37px; color: #5e788e; font-size: 10px; line-height: 1.45; }
.draw-separation { margin-top: 12px; display: grid; gap: 12px; }
.draw-separation-head { display: flex; align-items: flex-start; gap: 10px; }
.draw-separation-head > .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.draw-separation-head span { min-width: 0; display: grid; gap: 3px; }
.draw-separation-head b { color: #1e4055; font-size: 13px; }
.draw-separation-head small, .draw-separation-empty, .draw-separation-list > small { color: #657c89; font-size: 10px; line-height: 1.4; }
.draw-separation-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.draw-separation-picker label { min-width: 0; display: grid; gap: 5px; }
.draw-separation-picker label > span { color: #587284; font-size: 10px; font-weight: 800; }
.draw-separation-picker select { width: 100%; min-height: 46px; padding: 0 10px; color: #24485d; background: #f7fafc; border: 1px solid #cbd9e2; border-radius: 12px; }
.draw-separation-picker select:focus { border-color: #2684d8; outline: 3px solid rgba(38, 132, 216, .13); }
.draw-separation-picker .btn { min-height: 46px; }
.draw-separation-list { display: flex; flex-wrap: wrap; gap: 7px; }
.draw-separation-list > span { min-height: 44px; padding: 6px 6px 6px 10px; display: inline-flex; align-items: center; gap: 5px; color: #31556a; font-size: 10px; background: #f2f7fa; border: 1px solid #cadbe5; border-radius: 999px; }
.draw-separation-list > span b { color: #9a3f4b; font-size: 9px; }
.draw-separation-list button { width: 34px; height: 34px; display: grid; place-items: center; color: #9a3f4b; background: #fff; border: 1px solid #e3cbd0; border-radius: 50%; }
.draw-separation-list button .icon { width: 15px; height: 15px; }

@media (max-width: 520px) {
  .draw-separation-picker { grid-template-columns: 1fr 1fr; }
  .draw-separation-picker .btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 350px) {
  .draw-separation-picker { grid-template-columns: 1fr; }
  .draw-separation-picker .btn { grid-column: auto; }
}
.guest-empty {
  margin-bottom: 12px;
  padding: 9px 11px;
  font-size: 10px;
}
.selection-list { gap: 6px; }
.participant-row {
  min-height: 59px;
  padding: 7px 9px;
  gap: 8px;
}
.participant-row .avatar.small { width: 40px; height: 40px; }
.participant-row .profile-copy > b { font-size: 11px; }
.participant-row .profile-copy > span { font-size: 9px; }
.participant-row .profile-copy > small { font-size: 9px; }
.participant-row .recent-form.compact .recent-form-token { width: 18px; height: 18px; }
.level-token b { font-size: 17px; }
.level-token small { font-size: 9px; }

.content[data-route="draw"] { padding-bottom: calc(154px + env(safe-area-inset-bottom)); }
.sticky-action {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: calc(68px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 736px);
  margin: 0;
  padding: 9px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: rgba(250, 252, 253, .97);
  border: 1px solid #d8e4eb;
  border-radius: 17px;
  box-shadow: 0 14px 36px rgba(24, 55, 76, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sticky-action-count {
  min-width: 62px;
  display: grid;
  justify-items: center;
  color: #496373;
}
.sticky-action-count b { color: #116fb9; font-size: 17px; line-height: 1; }
.sticky-action-count small { margin-top: 2px; font-size: 9px; text-transform: uppercase; }
.sticky-action .btn { min-height: 48px; }
.sticky-action > .btn.block:only-child { grid-column: 1 / -1; }

/* ---- Times sorteados: mais densidade sem perder leitura ---- */
.team-members { padding: 3px 9px 7px; }
.team-player {
  min-height: 52px;
  padding: 7px 0;
  gap: 7px;
}
.team-player .avatar.tiny { width: 35px; height: 35px; }
.team-player-copy > b { font-size: 11px; }
.team-player-copy > small { margin-top: 1px; font-size: 9px; }
.team-player-meta { margin-top: 2px; }
.team-position { font-size: 9px; }
.team-rank-token { min-width: 42px; padding: 5px; }
.team-rank-token b { font-size: 17px; }
.team-rank-token small { font-size: 9px; }
.team-player .recent-form { margin-top: 4px; }
.team-player .recent-form.compact .recent-form-token { width: 18px; height: 18px; }

/* ---- Resultados: cabeçalho enxuto e abas legíveis/deslizáveis ---- */
.result-page-heading,
.history-page-heading {
  margin-bottom: 12px;
  padding: 11px 12px;
}
.result-page-heading h1,
.history-page-heading h1 { font-size: clamp(24px, 7vw, 31px); }
.result-page-heading p,
.history-page-heading p { margin-top: 4px; font-size: 11px; }
.result-heading-icon,
.history-heading-icon { width: 40px; height: 40px; }

.premium-result-tabs {
  margin: 0 -2px 12px;
  padding: 5px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 5px;
}
.premium-result-tabs::-webkit-scrollbar { display: none; }
.premium-result-tabs .result-tab {
  min-width: 108px;
  min-height: 46px;
  padding: 6px 9px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  flex-direction: row;
  gap: 6px;
}
.premium-result-tabs .result-tab > span:last-child {
  font-size: 10px;
  white-space: nowrap;
}
.result-tab-icon { width: 24px; height: 24px; }

.premium-ranking-hero.compact {
  min-height: 72px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.premium-ranking-hero.compact > span { width: 40px; height: 40px; }
.premium-ranking-hero.compact > div { display: grid; gap: 3px; }
.premium-ranking-hero.compact small { font-size: 9px; }
.premium-ranking-hero.compact p { margin: 0; font-size: 10px; line-height: 1.35; }

.ranking-podium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ranking-podium-grid.podium-count-1 {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}
.ranking-podium-grid.podium-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ranking-podium-card { min-height: 166px; }
.podium-copy small { font-size: 9px; }
.podium-copy b { font-size: 12px; }
.podium-copy span { font-size: 10px; }
.podium-value small,
.podium-record small { font-size: 9px; }
.podium-position { font-size: 10px; }

/* ---- Histórico: legível e sem empilhar resumo em telas estreitas ---- */
.history-summary { gap: 6px; }
.history-summary > span { min-height: 60px; padding: 8px 6px; }
.history-summary b { font-size: 20px; }
.history-summary small { font-size: 9px; }
.history-row.premium-history-row { min-height: 68px; padding: 9px; }
.history-main > small { font-size: 9px; }
.history-main > b { font-size: 11px; }
.history-main > em { font-size: 9px; }
.history-status { font-size: 9px !important; }
.history-side strong { font-size: 10px !important; }

/* ---- Modal / bottom sheet: cabeçalho sempre acessível ---- */
.modal-card {
  padding-top: 9px;
  scrollbar-gutter: stable;
}
.modal-card::before {
  width: 42px;
  height: 4px;
  margin: 0 auto 7px;
  display: block;
  content: "";
  background: #c6d2da;
  border-radius: 999px;
}
.modal-header {
  position: sticky;
  z-index: 6;
  top: -9px;
  margin: 0 -2px 12px;
  padding: 7px 2px 9px;
  background: rgba(248, 250, 251, .97);
  border-bottom: 1px solid rgba(210, 222, 230, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.modal-header .icon-button { width: 44px; height: 44px; }

/* ---- Navegação inferior: rótulos sempre visíveis ---- */
.bottom-nav { min-height: calc(64px + env(safe-area-inset-bottom)); }
.nav-item { min-height: 52px; gap: 3px; }
.nav-item b,
.nav-item.active b {
  display: block;
  max-width: 72px;
  font-size: 10px;
  line-height: 1;
}
.nav-item .icon { width: 20px; height: 20px; }

/* ---- refresh silencioso não deve repetir animações decorativas ---- */
.content.route-refresh .ranking-row.featured,
.content.route-refresh .placard-card.premium-placard,
.content.route-refresh .ranking-podium-card,
.content.route-refresh .premium-rank-row,
.content.route-refresh .history-row.premium-history-row,
.content.route-refresh .result-view,
.content.route-refresh .recent-form-token {
  animation: none !important;
}

.app-intro .intro-ball { animation-duration: .62s; }

/* microtextos que antes caíam para 6–8px agora permanecem legíveis */
.premium-placard .placard-team small { font-size: 10px; }
.premium-placard .placard-team > em:not(.placard-winner-mark) { font-size: 9px; }
.placard-bad.premium b { font-size: 10px; }
.placard-bad.premium small { font-size: 9px; }
.recent-form-badge { font-size: 9px; }
.recent-form-summary small { font-size: 9px; }
.level-token small { font-size: 9px; }
.team-card header span { font-size: 9px; }
.team-card header > strong small { font-size: 9px; }

/* ---- mobile real observado nas capturas 1080x2316 ---- */
@media (max-width: 430px) {
  .content { padding-top: 14px; padding-right: 12px; padding-left: 12px; }
  .admin-bar:not(.compact) { margin-bottom: 9px; padding: 9px 11px; }

  .home-hero-premium {
    min-height: 225px;
    padding: 15px 15px 15px;
    border-radius: 22px;
  }
  .home-hero-premium .hero-brand-logo { width: 54px; height: 54px; }
  .home-hero-premium .eyebrow { padding: 6px 8px; font-size: 9px; }
  .home-hero-premium h1 { margin-top: 14px; font-size: clamp(34px, 10vw, 45px); }
  .home-hero-premium p { margin-top: 9px; font-size: 11px; }
  .home-hero-premium .hero-intro-text {
    max-width: 100%;
    margin-top: 9px;
    font-size: clamp(15.5px, 4.1vw, 16px);
    line-height: 1.45;
  }
  .hero-intro-row { max-width: 100%; gap: 4px; }
  .hero-intro-edit { width: 42px; min-width: 42px; min-height: 42px; margin-top: 3px; }
  .home-hero-premium .hero-photo-action span { display: none; }
  .home-hero-premium .hero-photo-action { width: 36px; padding: 0; justify-content: center; }
  .home-hero-premium .hero-signature { display: none; }

  .home-spotlight { min-height: 79px; padding: 10px; gap: 8px; }
  .home-spotlight-icon { width: 38px; height: 38px; }
  .home-spotlight-copy b { font-size: 13px; }
  .home-spotlight-copy em { font-size: 10px; }
  .home-spotlight-stat { min-width: 50px; }
  .home-spotlight-stat strong { font-size: 22px; }

  .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .action-card.premium-action {
    min-height: 78px;
    padding: 9px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 7px;
  }
  .action-icon { width: 31px; height: 31px; }
  .action-copy b { font-size: 11px; }
  .action-copy small { font-size: 10px; }
  .action-metric { grid-column: 1 / -1; padding-left: 1px; font-size: 16px; }

  .section-head { margin-top: 22px; }
  .section-head h2 { font-size: 17px; }
  .section-head p { font-size: 11px; }

  .player-card { padding: 9px; }
  .player-card .avatar { width: 48px; height: 48px; }
  .player-card .rank-badge { min-width: 46px; }
  .player-footer .tier-copy { font-size: 10px; }

  .presence-round-card { padding: 11px; }
  .presence-identity.bound.compact { align-items: center; flex-direction: row; }
  .presence-identity.bound.compact > .btn { margin-left: auto; }
  .presence-notification-copy { margin-left: 0; }
  details.presence-notification > summary strong { font-size: 9px; }

  .participant-row { min-height: 57px; padding: 6px 8px; }
  .participant-row > input { width: 20px; height: 20px; }
  .participant-row .avatar.small { width: 38px; height: 38px; }
  .participant-row .recent-form.compact .recent-form-token,
  .team-player .recent-form.compact .recent-form-token { width: 18px; height: 18px; }

  .sticky-action {
    bottom: calc(63px + env(safe-area-inset-bottom));
    width: min(calc(100% - 16px), 744px);
    padding: 8px;
    border-radius: 15px;
  }
  .sticky-action .btn { min-height: 46px; font-size: 12px; }

  .result-page-heading,
  .history-page-heading { padding: 9px 10px; }
  .result-page-heading .section-kicker,
  .history-page-heading .section-kicker { font-size: 9px; }
  .result-page-heading h1,
  .history-page-heading h1 { font-size: 24px; }
  .result-heading-icon,
  .history-heading-icon { width: 36px; height: 36px; }

  .premium-result-tabs { margin-right: -12px; padding-right: 12px; }
  .premium-result-tabs .result-tab { min-width: 103px; min-height: 44px; padding: 5px 8px; }
  .premium-result-tabs .result-tab > span:last-child { font-size: 10px; }

  .premium-ranking-hero.compact { min-height: 66px; }
  .ranking-podium-grid { gap: 7px; }
  .ranking-podium-grid.podium-count-1 { grid-template-columns: minmax(0, 1fr); }
  .ranking-podium-grid.podium-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-podium-grid.podium-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-podium-grid.podium-count-3 .ranking-podium-card.podium-1 {
    grid-column: 1 / -1;
    min-height: 118px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 9px;
    text-align: left;
  }
  .ranking-podium-grid.podium-count-3 .podium-1 .podium-position { position: static; }
  .ranking-podium-grid.podium-count-3 .podium-1 .avatar.medium { margin-top: 0; }
  .ranking-podium-grid.podium-count-3 .podium-1 .podium-value,
  .ranking-podium-grid.podium-count-3 .podium-1 .podium-record { margin-top: 0; }
  .ranking-podium-card { min-height: 150px; padding: 9px 7px; }
  .ranking-podium-card .avatar.medium { width: 50px; height: 50px; }
  .podium-copy small { font-size: 9px; }
  .podium-copy b { font-size: 11px; }
  .podium-copy span { font-size: 9px; }
  .podium-value small,
  .podium-record small { font-size: 9px; }

  .history-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .history-summary > span { min-height: 54px; padding: 6px 3px; }
  .history-summary b { font-size: 18px; }
  .history-summary small { font-size: 9px; }
  .history-row.premium-history-row { min-height: 66px; gap: 7px; }
  .history-main > small { font-size: 9px; }
  .history-main > b { font-size: 10px; }
  .history-main > em { font-size: 9px; }
  .history-status { font-size: 9px !important; }
  .history-side strong { font-size: 11px !important; }

  .team-card header { padding: 11px; }
  .team-members { padding: 2px 8px 6px; }
  .team-player { min-height: 49px; padding: 6px 0; }

  .bottom-nav { padding-top: 5px; }
  .nav-item { min-height: 50px; gap: 3px; }
  .nav-item b,
  .nav-item.active b { display: block; max-width: 66px; font-size: 10px; }
}

@media (max-width: 350px) {
  .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-card.premium-action { min-height: 76px; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; }
  .action-metric { grid-column: 1 / -1; }
  .ranking-podium-grid,
  .ranking-podium-grid.podium-count-1,
  .ranking-podium-grid.podium-count-2,
  .ranking-podium-grid.podium-count-3 { grid-template-columns: 1fr; }
  .ranking-podium-grid.podium-count-3 .ranking-podium-card.podium-1 { grid-column: auto; }
  .ranking-podium-card,
  .ranking-podium-grid.podium-count-3 .ranking-podium-card.podium-1 {
    min-height: 100px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    text-align: left;
    align-items: center;
  }
  .ranking-podium-card .avatar.medium { margin-top: 0; width: 44px; height: 44px; }
  .podium-position { position: static; }
  .podium-value { margin-top: 0; }
  .podium-record { width: 88px; margin-top: 0; }
  .history-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-summary small { font-size: 9px; }
  .sticky-action-count { min-width: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-intro .intro-ball,
  .home-last-draw,
  .sticky-action { animation: none !important; transition: none !important; }
}


/* ============================================================
   V28 — PERFIL DO JOGADOR NO TOPO MOBILE
   ============================================================ */
.topbar {
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  min-height: calc(76px + env(safe-area-inset-top));
}

#menuBtn { justify-self: start; }

.top-profile-slot {
  position: relative;
  width: 64px;
  height: 64px;
  justify-self: end;
  display: grid;
  place-items: center;
}

.top-profile-slot > .icon-button { justify-self: center; }

.top-player-profile {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 2px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115, 146, 169, .32);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 18px rgba(31, 64, 88, .12);
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.top-player-profile .avatar.header {
  width: 54px;
  height: 54px;
  border: 2px solid #fff;
  border-radius: 17px;
  box-shadow: 0 2px 8px rgba(22, 55, 79, .13);
  transition: transform .16s ease;
}

.top-player-profile .avatar.header img {
  object-fit: cover;
  object-position: center center;
}

.top-player-profile:active .avatar.header { transform: scale(.96); }

.top-player-profile:focus-visible {
  outline: 3px solid rgba(15, 111, 223, .28);
  outline-offset: 3px;
}

.top-admin-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 4;
  width: 25px;
  height: 25px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 9px rgba(22, 55, 79, .2);
}

.top-admin-badge .icon { width: 13px; height: 13px; }
.top-admin-badge.is-admin { color: #fff; background: linear-gradient(145deg, #1677ed, #0757c9); }
.top-admin-badge.is-login { color: #24506f; background: #fff; border-color: #d4e0e8; }

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    min-height: calc(74px + env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .top-profile-slot { width: 62px; height: 62px; }
  .top-player-profile { width: 58px; height: 58px; border-radius: 19px; }
  .top-player-profile .avatar.header { width: 52px; height: 52px; border-radius: 16px; }
  .top-admin-badge { width: 24px; height: 24px; }
}

@media (max-width: 350px) {
  .topbar { grid-template-columns: 56px minmax(0, 1fr) 56px; min-height: calc(68px + env(safe-area-inset-top)); }
  .top-profile-slot { width: 56px; height: 56px; }
  .top-player-profile { width: 52px; height: 52px; border-radius: 17px; }
  .top-player-profile .avatar.header { width: 46px; height: 46px; border-radius: 15px; }
  .top-admin-badge { width: 22px; height: 22px; }
  .top-admin-badge .icon { width: 12px; height: 12px; }
  .app-version-badge { padding-inline: 4px; font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .top-player-profile .avatar.header { transition: none !important; }
}

/* ============================================================
   V29 — EXPERIÊNCIA DO JOGADOR
   Meu Painel + Dia de Jogo + Pós-jogo automático
   ============================================================ */
.my-player-panel { display: grid; gap: 14px; }
.my-panel-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d9e5ed;
  border-radius: 20px;
  background: linear-gradient(145deg, #f7fbff, #fff);
}
.my-panel-avatar .avatar.profile-large { width: 78px; height: 78px; }
.my-panel-hero h2 { margin: 2px 0 3px; font-size: 24px; line-height: 1.05; color: #123a55; }
.my-panel-hero p { margin: 0; font-size: 12px; color: #6d8290; }
.my-panel-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.my-panel-metrics > span {
  min-height: 76px;
  padding: 10px 8px;
  border: 1px solid #dce7ee;
  border-radius: 16px;
  background: #fff;
  display: grid;
  align-content: center;
  text-align: center;
}
.my-panel-metrics small { font-size: 10px; font-weight: 800; color: #78909f; text-transform: uppercase; letter-spacing: .04em; }
.my-panel-metrics b { margin-top: 2px; font-size: 21px; color: #153f5b; }
.my-panel-metrics em { margin-top: 2px; font-size: 9px; font-style: normal; color: #7b8e9b; }
.my-panel-exp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, #edf6ff, #f7fbff);
  border: 1px solid #d4e5f3;
}
.my-panel-exp span { display: grid; gap: 2px; }
.my-panel-exp b { color: #1467b8; }
.my-panel-exp small { font-size: 10px; color: #718795; }
.my-panel-exp > strong { font-size: 22px; color: #0b5fad; }
.my-panel-round {
  width: 100%;
  min-height: 78px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid #ccebdc;
  border-radius: 18px;
  background: linear-gradient(135deg, #f1fcf7, #fff);
  color: #174b38;
}
.my-panel-round > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #129c68; background: #e3f8ee; }
.my-panel-round > span .icon { width: 21px; height: 21px; }
.my-panel-round > div { display: grid; gap: 2px; min-width: 0; }
.my-panel-round small { font-size: 9px; font-weight: 900; letter-spacing: .06em; color: #4a8f72; }
.my-panel-round b { font-size: 13px; color: #164b38; }
.my-panel-round em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-style: normal; color: #6b8b7d; }
.my-panel-round.empty { grid-template-columns: auto minmax(0, 1fr); }
.my-panel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.my-panel-actions .btn:first-child:last-child { grid-column: 1 / -1; }

.game-day-heading { align-items: flex-start; }
.game-day-hero {
  position: relative;
  overflow: hidden;
  min-height: 188px;
  padding: 18px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(145deg, #0d6fcf, #0b4f96);
  box-shadow: 0 12px 28px rgba(14, 71, 116, .18);
}
.game-day-hero::after { content: ''; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 190px; border: 34px solid rgba(255,255,255,.08); border-radius: 999px; }
.game-day-hero.soon { background: linear-gradient(145deg, #1269d1, #724bd3); }
.game-day-hero.live { background: linear-gradient(145deg, #0a9f68, #047351); }
.game-day-hero.done { background: linear-gradient(145deg, #174c6c, #243846); }
.game-day-hero.teams { background: linear-gradient(145deg, #7350d5, #3e50af); }
.game-day-status { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.13); font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.game-day-status i { width: 7px; height: 7px; border-radius: 50%; background: #8dffbd; box-shadow: 0 0 0 4px rgba(141,255,189,.13); }
.game-day-date { position: relative; z-index: 1; display: grid; margin-top: 18px; }
.game-day-date small { font-size: 12px; font-weight: 800; opacity: .86; text-transform: capitalize; }
.game-day-date strong { margin-top: 2px; font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.game-day-date span { margin-top: 7px; font-size: 13px; font-weight: 700; opacity: .92; }
.game-day-countdown { position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: 7px 10px; border-radius: 12px; background: rgba(0,0,0,.2); backdrop-filter: blur(7px); font-size: 11px; font-weight: 800; }
.game-day-presence,
.game-day-stage { margin-top: 14px; padding: 14px; border: 1px solid #dbe6ed; border-radius: 22px; background: #fff; box-shadow: 0 5px 16px rgba(32,68,91,.06); }
.game-day-section-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; }
.game-day-section-head > span:not(.avatar) { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #edf6ff; color: #1675ce; }
.game-day-section-head > span .icon { width: 21px; height: 21px; }
.game-day-section-head > div { display: grid; gap: 2px; }
.game-day-section-head small { font-size: 9px; font-weight: 900; letter-spacing: .06em; color: #7b909e; }
.game-day-section-head b { font-size: 14px; color: #183f59; }
.game-day-presence-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.game-day-presence-btn { min-height: 46px; display: flex; justify-content: center; align-items: center; gap: 5px; border: 1px solid #dce6ec; border-radius: 14px; background: #f8fbfd; color: #456273; font-weight: 800; font-size: 10px; }
.game-day-presence-btn .icon { width: 16px; height: 16px; }
.game-day-presence-btn.yes.selected { color: #07784d; background: #e9f9f1; border-color: #8fd8b8; }
.game-day-presence-btn.maybe.selected { color: #9a6b00; background: #fff8df; border-color: #ecd071; }
.game-day-presence-btn.no.selected { color: #a43d3d; background: #fff0f0; border-color: #efb1b1; }
.game-day-counts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.game-day-counts span { padding: 8px 4px; display: grid; text-align: center; border-radius: 12px; background: #f5f8fa; }
.game-day-counts b { font-size: 17px; color: #21475f; }
.game-day-counts small { font-size: 9px; color: #7e909c; }
.game-day-note { margin: 11px 0 0; font-size: 11px; color: #6f8492; }
.game-day-stage .team-grid,
.game-day-stage .final-score { margin-top: 12px; }
.game-day-stage > p { margin: 10px 0 12px; font-size: 12px; line-height: 1.5; color: #6d8290; }
.game-day-stage .btn.block { margin-top: 12px; }

.postgame-experience { display: grid; gap: 13px; text-align: center; }
.postgame-kicker { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: #a16a06; background: #fff4d7; font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.postgame-kicker .icon { width: 15px; height: 15px; }
.postgame-score { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 16px 10px; border-radius: 20px; background: linear-gradient(145deg, #102f43, #193f58); color: #fff; font-size: 12px; font-weight: 800; }
.postgame-score b { margin-left: 4px; font-size: 29px; }
.postgame-score i { font-style: normal; opacity: .5; font-size: 17px; }
.postgame-date { color: #7b8e9a; }
.postgame-personal { padding: 13px; border: 1px solid #dce7ee; border-radius: 20px; background: #f9fbfc; text-align: left; }
.postgame-personal.win { border-color: #b8e4ce; background: #f1fbf6; }
.postgame-personal.draw { border-color: #ecd99c; background: #fffbec; }
.postgame-personal.loss { border-color: #e9c5c5; background: #fff7f7; }
.postgame-outcome { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
.postgame-outcome .icon { grid-row: 1 / 3; width: 30px; height: 30px; }
.postgame-outcome b { font-size: 18px; color: #173f59; }
.postgame-outcome small { color: #78909d; }
.postgame-gains { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.postgame-gains span { min-height: 58px; padding: 7px 4px; display: grid; place-content: center; text-align: center; border-radius: 13px; background: rgba(255,255,255,.8); }
.postgame-gains small { font-size: 9px; color: #7a8d98; }
.postgame-gains b { font-size: 14px; color: #17415a; }
.postgame-badball { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 15px; background: #fff4e7; color: #a15e12; text-align: left; }
.postgame-badball > .icon { width: 24px; height: 24px; }
.postgame-badball span { display: grid; }
.postgame-badball small { font-size: 9px; font-weight: 800; }
.postgame-badball b { font-size: 13px; }

@media (max-width: 430px) {
  .my-panel-hero h2 { font-size: 22px; }
  .my-panel-avatar .avatar.profile-large { width: 72px; height: 72px; }
  .my-panel-actions { grid-template-columns: 1fr; }
  .game-day-hero { min-height: 174px; padding: 16px; }
  .game-day-date strong { font-size: 38px; }
  .game-day-countdown { right: 14px; bottom: 14px; }
  .game-day-stage .team-grid.compact-result { grid-template-columns: 1fr; }
  .postgame-gains { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 350px) {
  .my-panel-metrics { grid-template-columns: 1fr 1fr; }
  .my-panel-metrics > span:last-child { grid-column: 1 / -1; }
  .game-day-date strong { font-size: 34px; }
  .game-day-countdown { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 12px; }
  .game-day-presence-actions { gap: 5px; }
  .game-day-presence-btn { font-size: 9px; }
  .postgame-score { gap: 6px; font-size: 10px; }
  .postgame-score b { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-day-hero,
  .postgame-experience,
  .my-player-panel { scroll-behavior: auto !important; }
}


/* V30 — ENTRADA SEGURA / ANTI-LOOP / RECONEXÃO */
.boot-starter,
.boot-recovery {
  width: min(100%, 520px);
  min-height: 180px;
  margin: 18px auto;
  padding: 28px 22px;
  border: 1px solid rgba(17, 50, 73, .10);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(18, 51, 72, .08);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--ink, #153047);
}
.boot-starter-ball { font-size: 30px; animation: bootPulse 1.1s ease-in-out infinite alternate; }
.boot-starter strong, .boot-recovery strong { font-size: 1.05rem; }
.boot-starter small, .boot-recovery span, .boot-recovery small { color: var(--muted, #6f808d); line-height: 1.45; }
.boot-recovery button {
  min-height: 46px;
  margin-top: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--blue, #0f7be8);
  color: #fff;
  font: inherit;
  font-weight: 800;
}
.version-warning { border-style: dashed; }
@keyframes bootPulse { from { transform: translateY(0) scale(.96); opacity: .72; } to { transform: translateY(-3px) scale(1.04); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-starter-ball { animation: none; } }


/* ===================================================================
   V31 — LAPIDAÇÃO VISUAL MASTER
   Auditoria mobile com dados reais: legibilidade, menu, perfil, abas,
   alvos de toque e hierarquia sem alterar regras ou dados do rachão.
   =================================================================== */

button,
[role="button"],
input,
select,
textarea { touch-action: manipulation; }

:where(button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(20, 119, 225, .30);
  outline-offset: 3px;
}

.player-card[data-player-profile-card] { cursor: pointer; }
.player-card[data-player-profile-card]:focus-visible {
  border-color: rgba(20, 119, 225, .48);
  box-shadow: 0 0 0 4px rgba(20, 119, 225, .10), 0 10px 28px rgba(31, 64, 86, .08);
}

/* O botão superior agora abre um menu real, com destinos claros. */
.main-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.main-menu-route {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: #21445d;
  text-align: left;
  background: #fff;
  border: 1px solid #d7e3ea;
  border-radius: 17px;
  box-shadow: 0 7px 18px rgba(31, 64, 86, .05);
}
.main-menu-route > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #0e72d4;
  background: #eaf4ff;
  border-radius: 12px;
}
.main-menu-route > span:first-child .icon { width: 20px; height: 20px; }
.main-menu-route > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.main-menu-route b { font-size: 13px; }
.main-menu-route small { color: #6d8290; font-size: 10px; line-height: 1.3; }
.main-menu-route em {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 3px 6px;
  color: #0b6d45;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  background: #e8f8ef;
  border-radius: 999px;
}
.main-menu-route.is-current { border-color: #a9d2f5; background: linear-gradient(145deg, #f3f9ff, #fff); }

/* Textos funcionais deixam de cair na faixa de 7–9px. */
.profile-copy small,
.profile-stats span,
.player-footer .tier-copy,
.readonly-label,
.presence-group summary small,
.presence-player-row .profile-copy small,
.participant-row .profile-copy > span,
.participant-row .profile-copy > small,
.team-player-copy > small,
.team-position,
.settings-line small,
.danger-zone > p,
.danger-action small { font-size: 10.5px; line-height: 1.4; }

.progression-title small,
.progression-guide b,
.progression-guide span,
.progression-metric > small,
.progression-history-row > div small,
.progression-history-row > small,
.progression-empty { font-size: 10px; line-height: 1.45; }

.profile-level-card span,
.profile-level-card small,
.profile-detail-grid small { font-size: 10px; line-height: 1.35; }
.profile-detail-grid b { font-size: 14px; }
.profile-detail-grid > div { min-height: 62px; display: grid; align-content: center; }

.premium-ranking-hero.compact small { font-size: 10px; }
.premium-ranking-hero.compact p { font-size: 11px; line-height: 1.45; }
.podium-copy small,
.podium-value small,
.podium-record small { font-size: 10px; }
.podium-copy span { font-size: 10.5px; }

.empty-state {
  min-height: 124px;
  padding: 22px 18px;
}
.empty-state h2 { font-size: 17px; }
.empty-state p { font-size: 12px; line-height: 1.55; }

/* Folga consistente antes da navegação fixa e no dock do sorteio. */
.content { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.content[data-route="draw"] { padding-bottom: calc(164px + env(safe-area-inset-bottom)); }
.presence-group,
.section-head,
.player-card { scroll-margin-top: calc(88px + env(safe-area-inset-top)); }

@media (hover: hover) {
  .main-menu-route:hover,
  .player-card[data-player-profile-card]:hover { transform: translateY(-1px); border-color: #bfd9eb; }
}

@media (max-width: 430px) {
  input,
  select,
  textarea { font-size: 16px; }

  .content { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .page-heading { margin-bottom: 17px; }
  .page-heading p { font-size: 12px; line-height: 1.45; }
  .section-head p { font-size: 11.5px; line-height: 1.45; }

  .home-hero-premium .eyebrow { font-size: 10px; }
  .home-hero-premium p { font-size: 12px; line-height: 1.45; }
  .home-hero-premium .hero-intro-text { font-size: clamp(15.5px, 4.1vw, 16px); font-weight: 550; line-height: 1.45; }
  .home-spotlight-copy small,
  .home-spotlight-stat small { font-size: 9.5px; }
  .home-spotlight-copy em,
  .action-copy small { font-size: 10.5px; line-height: 1.35; }
  .action-copy b { font-size: 11.5px; }

  .player-card { padding: 11px; }
  .player-card .profile-copy > span { font-size: 11px; }
  .player-card .profile-stats span { font-size: 10.5px; }
  .player-footer { min-height: 38px; }

  /* Perfil menos dominado pela foto e com explicações realmente legíveis. */
  .player-profile-modal { gap: 12px; }
  .player-profile-photo.rank-aura { min-height: 156px; }
  .avatar.profile-large,
  .player-profile-photo.rank-aura .avatar.profile-large {
    width: min(42vw, 168px);
    height: min(42vw, 168px);
    border-radius: 23px;
  }
  .player-profile-photo.rank-aura::before { width: min(48vw, 190px); height: min(48vw, 190px); }
  .player-profile-photo.rank-aura::after { width: min(44vw, 176px); height: min(44vw, 176px); }
  .player-profile-title h2 { font-size: clamp(26px, 8vw, 31px); }
  .profile-level-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .profile-level-card > div { min-height: 104px; padding: 11px 8px; display: grid; align-content: center; }
  .profile-level-card strong { font-size: 27px; }
  .progression-panel { padding: 11px; }
  .progression-guide { gap: 7px; }
  .progression-guide > div { padding: 9px 10px; }
  .profile-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .profile-detail-grid > div { padding: 10px; }

  /* Quatro destinos sempre visíveis: nenhum rótulo cortado na lateral. */
  .premium-result-tabs {
    margin: 0 0 13px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
  }
  .premium-result-tabs .result-tab {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding: 5px 8px;
    justify-content: center;
  }
  .premium-result-tabs .result-tab > span:last-child { font-size: 12px; }
  .result-tab-icon { width: 26px; height: 26px; }

  .premium-ranking-hero.compact { min-height: 76px; padding: 11px 12px; }
  .ranking-podium-card { padding: 11px 9px; }

  .bottom-nav { min-height: calc(66px + env(safe-area-inset-bottom)); }
  .nav-item { min-height: 54px; }
  .nav-item b,
  .nav-item.active b { font-size: 11px; }
}

@media (max-width: 365px) {
  .main-menu-grid { gap: 7px; }
  .main-menu-route { min-height: 78px; padding: 9px; gap: 7px; }
  .main-menu-route > span:first-child { width: 38px; height: 38px; }
  .main-menu-route b { font-size: 12px; }
  .main-menu-route small { font-size: 9.5px; }

  .home-hero-premium { min-height: 218px; }
  .home-quick-grid { gap: 6px; }
  .action-card.premium-action { padding: 9px 8px; }
  .action-copy b { font-size: 11px; }
  .action-copy small { font-size: 10px; }

  .profile-level-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-level-card > div { min-height: 100px; padding: 9px 6px; }
  .profile-level-card span,
  .profile-level-card small { font-size: 9.5px; }
  .profile-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .premium-result-tabs .result-tab { padding: 5px 6px; }
  .premium-result-tabs .result-tab > span:last-child { font-size: 10px; }
  .nav-item b,
  .nav-item.active b { font-size: 9px; }
}

@media (min-width: 760px) {
  .modal-card { max-width: 680px; }
  .player-profile-modal { width: min(100%, 590px); margin-inline: auto; }
  .main-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .main-menu-route,
  .player-card[data-player-profile-card] { transition: none !important; }
}

/* V33 · cancelamento de rodada e controle da quadra */
.home-hero-premium .hero-intro-text {
  width: min(100%, 36rem);
  max-width: 36rem;
  margin: 12px 0 0;
  color: #173b52;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 630;
  line-height: 1.45;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.home-hero-premium.has-photo .hero-intro-row {
  width: min(100%, 38rem);
  padding: 8px 9px 9px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(151,177,195,.48);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(25,58,82,.09);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-hero-premium.has-photo .hero-intro-text { margin-top: 0; }
.home-hero-premium.has-photo .hero-intro-edit { margin-top: 0; background: rgba(255,255,255,.62); }

.home-spotlight.cancelled {
  color: #fff;
  background: linear-gradient(135deg, #a64049, #cb5962 58%, #8d333b);
}

.round-cancelled-card {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  color: #842f38;
  background: #fff4f5;
  border: 1px solid #efc3c8;
  border-radius: 18px;
}
.round-cancelled-card > .icon { width: 44px; height: 44px; padding: 11px; color: #fff; background: #bf4854; border-radius: 14px; }
.round-cancelled-card > div { min-width: 0; display: grid; gap: 3px; }
.round-cancelled-card small { font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.round-cancelled-card b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.round-cancelled-card span { color: #80555a; font-size: 11px; line-height: 1.45; }
.presence-round-card.cancelled { border-color: #efc3c8; background: #fff8f8; }
.presence-round-state.cancelled { color: #9f3640; background: #ffe5e8; }
.game-day-hero.cancelled { background: linear-gradient(145deg, #a43b47, #722c35); }
.game-day-cancel { margin: 10px 0; min-height: 44px; }
.history-row.cancelled { border-left-color: #bf4854; background: #fff8f8; }

.content[data-route="court"] { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.court-heading { align-items: flex-start; }
.court-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.court-summary-grid > div {
  min-width: 0;
  padding: 15px;
  display: grid;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(35,66,87,.06);
}
.court-summary-grid small { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.court-summary-grid b { color: #173e57; font-size: clamp(19px, 5vw, 26px); line-height: 1.15; overflow-wrap: anywhere; }
.court-summary-grid span { color: var(--muted); font-size: 10px; }
.court-summary-grid .paid { border-top: 4px solid #2aa66f; }
.court-summary-grid .pending { border-top: 4px solid #e0a52a; }
.court-admin-actions { margin: 10px 0; display: flex; justify-content: flex-end; }
.court-charge-list, .court-own-list { display: grid; gap: 11px; }
.court-charge-card, .court-own-charge, .court-pix-card, .court-player-hero {
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 19px;
  box-shadow: 0 8px 24px rgba(35,66,87,.055);
}
.court-charge-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.court-charge-card > header > div { min-width: 0; display: grid; gap: 3px; }
.court-charge-card h2, .court-own-charge h3 { margin: 0; color: #173e57; line-height: 1.2; overflow-wrap: anywhere; }
.court-charge-card header small, .court-own-charge header small { color: #6b7f8b; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.court-charge-card header span { color: var(--muted); font-size: 10px; }
.court-charge-card header > .court-progress { min-width: 52px; padding: 7px 9px; color: #526f82; text-align: center; background: #eef4f7; border: 1px solid #dbe6ec; border-radius: 12px; }
.court-charge-card.closed { opacity: 1; background: linear-gradient(145deg, #fbfcfd, #f6f9fb); }
.court-payment-list { margin-top: 12px; display: grid; gap: 7px; }
.court-payment-row { min-width: 0; min-height: 56px; padding: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; background: #f7fafb; border: 1px solid #e3eaee; border-radius: 14px; }
.court-payment-row > span:first-child { min-width: 0; display: grid; gap: 2px; }
.court-payment-row > span:first-child b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.court-payment-row > span:first-child small { color: var(--muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.court-payment-row .mini-btn { min-width: 44px; min-height: 44px; }
.court-status { min-height: 30px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 900; border-radius: 999px; white-space: nowrap; }
.court-status .icon { width: 12px; height: 12px; }
.court-status.paid { color: #117247; background: #e5f7ed; }
.court-status.pending { color: #9a690e; background: #fff3d9; }
.court-charge-card footer { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 10px; }
.court-player-hero { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 12px; background: linear-gradient(145deg,#f2f9ff,#fff); }
.court-player-hero > span { width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: #217ad5; border-radius: 16px; }
.court-player-hero > span .icon { width: 26px; height: 26px; }
.court-player-hero div { min-width: 0; }
.court-player-hero small { color: #50758d; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.court-player-hero h2 { margin: 2px 0; color: #133d58; overflow-wrap: anywhere; }
.court-player-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.court-pix-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.court-pix-card > div { min-width: 0; display: grid; gap: 3px; }
.court-pix-card small { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.court-pix-card b { color: #173e57; font-size: 14px; overflow-wrap: anywhere; }
.court-pix-card span { color: var(--muted); font-size: 10px; }
.court-own-charge > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.court-own-charge > strong { margin-top: 11px; display: block; color: #173e57; font-size: 24px; }
.court-own-charge p, .court-own-charge > span { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.court-own-charge.pending { border-left: 4px solid #dfa327; }
.court-own-charge.paid { border-left: 4px solid #2aa66f; }
.court-source-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.court-source-actions .btn { min-height: 44px; padding-inline: 8px; font-size: 10px; }
.court-player-picker { max-height: 300px; min-width: 0; overflow-y: auto; padding: 10px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 16px; }
.court-player-picker legend { padding: 0 6px; color: #42647a; font-size: 11px; font-weight: 850; }
.court-player-picker label { min-width: 0; min-height: 46px; padding: 8px; display: flex; align-items: center; gap: 9px; background: #f7fafb; border-radius: 12px; }
.court-player-picker input { width: 20px; height: 20px; flex: 0 0 auto; }
.court-player-picker span { min-width: 0; display: grid; gap: 1px; }
.court-player-picker b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.court-player-picker small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-section { margin-top: 10px; }
.settings-section h2 { margin: 5px 0 10px; color: #173e57; }

/* V35 · Quadra: exclusão segura, ações móveis e estados do compartilhamento */
.court-payment-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.court-charge-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.court-charge-actions .btn.text {
  min-height: 40px;
  padding: 8px 9px;
  border-radius: 11px;
}
.btn.text.danger-text { color: #a23c47; }
.btn.text.danger-text:hover,
.btn.text.danger-text:focus-visible {
  color: #842f38;
  background: #fff0f1;
}
.round-share-form .share-option:disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: saturate(.72);
}
.round-share-form select option:disabled { color: #8b98a1; }

/* V34 · compartilhamento da rodada e aparência da capa */
.court-admin-actions { flex-wrap: wrap; gap: 8px; }
.round-share-trigger { margin-top: 10px; }
.round-share-form { min-width: 0; }
.round-share-options { display: grid; gap: 8px; }
.round-share-options .toggle-row.compact { margin: 0; min-height: 58px; background: #fff; border-color: #d2dde5; }
.round-share-options .toggle-row.compact input:disabled { opacity: .5; }
.round-share-warning {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #6b5530;
  background: #fff8e8;
  border: 1px solid #ead8ad;
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.4;
}
.round-share-warning .icon { width: 18px; height: 18px; flex: 0 0 auto; color: #a47720; }
.hero-visibility-control {
  margin-top: 12px;
  padding: 13px;
  display: grid;
  gap: 9px;
  background: #f7fafb;
  border: 1px solid #d8e2e8;
  border-radius: 17px;
}
.hero-visibility-control.is-disabled { opacity: .82; }
.hero-visibility-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-visibility-heading > span { min-width: 0; display: grid; gap: 3px; }
.hero-visibility-heading b { color: #173b52; font-size: 12px; }
.hero-visibility-heading small { color: #667d8b; font-size: 10px; line-height: 1.4; }
.hero-visibility-heading output { min-width: 48px; padding: 6px 8px; color: #126743; text-align: center; font-size: 12px; font-weight: 900; background: #e6f6ed; border-radius: 10px; }
.hero-visibility-labels { display: flex; justify-content: space-between; color: #667d8b; font-size: 10px; font-weight: 800; }
.hero-visibility-control input[type="range"] { width: 100%; min-height: 44px; margin: -7px 0; accent-color: #1678df; }
.hero-visibility-control input[type="range"]:disabled { cursor: not-allowed; opacity: .45; }
.hero-visibility-control .hero-photo-preview { min-height: 150px; aspect-ratio: 16 / 7; }
.hero-photo-preview .hero-photo { z-index: 0; opacity: var(--hero-photo-visibility, .70); }
.hero-visibility-control .button-row { margin-top: 2px; }

@media (max-width: 430px) {
  .home-hero-premium .hero-intro-text { width: min(100%, 30rem); margin-top: 11px; font-size: clamp(15.5px, 4.1vw, 17px); line-height: 1.48; }
  .home-hero-premium.has-photo .hero-intro-text { margin-top: 0; }
  .court-heading { gap: 10px; }
  .court-heading .btn { min-height: 44px; padding-inline: 11px; }
  .court-payment-row { grid-template-columns: minmax(0,1fr) auto; row-gap: 8px; }
  .court-payment-row > .court-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .court-payment-actions { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .court-charge-actions { margin-left: auto; }
  .court-source-actions { grid-template-columns: 1fr; }
  .court-source-actions .btn { width: 100%; }
  .round-share-form .share-option { min-height: 54px; }
  .hero-visibility-control .button-row { flex-direction: column; }
  .hero-visibility-control .button-row .btn { width: 100%; min-height: 44px; }
}

@media (max-width: 350px) {
  .court-summary-grid { grid-template-columns: 1fr; }
  .court-pix-card { align-items: stretch; flex-direction: column; }
  .court-pix-card .btn { width: 100%; min-height: 44px; }
  .court-charge-card footer { display: grid; grid-template-columns: 1fr; }
  .court-charge-actions { width: 100%; margin-left: 0; }
  .court-charge-actions .btn { flex: 1 1 0; min-width: 0; }
  .round-cancelled-card { grid-template-columns: 40px minmax(0,1fr); padding: 11px; }
  .round-cancelled-card > .icon { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .court-charge-card, .court-own-charge, .round-cancelled-card { animation: none !important; transition: none !important; }
}

/* V36 · equilíbrio ímpar + micro-lapidação Home/Quadra */
.action-copy small {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.court-charge-card .court-progress.partial { color: #8a6414; background: #fff6de; border-color: #f0ddb0; }
.court-charge-card .court-progress.complete { color: #126743; background: #e7f7ee; border-color: #c9ead8; }

.court-history-lock {
  min-height: 38px;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6a7480;
  background: #f3f6f8;
  border: 1px solid #dce4e9;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.court-history-lock .icon { width: 14px; height: 14px; }

.protected-notice {
  color: #5a4b27;
  background: #fff8e8;
  border-color: #ead7a8;
}
.protected-notice .icon { color: #9b7420; }

@media (max-width: 430px) {
  .home-hero-premium {
    min-height: 210px;
    padding: 13px 14px 14px;
  }
  .home-hero-premium h1 { margin-top: 11px; }
  .home-hero-premium .hero-intro-row { margin-top: 7px; }

  .home-quick-grid > .action-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
  }
  .home-quick-grid > .action-card:last-child:nth-child(odd) .action-metric {
    grid-column: auto;
    padding-left: 0;
    text-align: right;
  }

  .court-charge-card,
  .court-own-charge { padding: 12px; }
  .court-payment-list { margin-top: 10px; gap: 6px; }
  .court-payment-row { min-height: 54px; padding: 8px 9px; }
  .court-payment-row > span:first-child b { font-size: 12.5px; }
  .court-payment-row > span:first-child small { font-size: 10.5px; }
  .court-status { min-height: 29px; padding: 5px 8px; }
  .court-charge-card footer { margin-top: 9px; }
}

@media (min-width: 360px) and (max-width: 430px) {
  .court-payment-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    column-gap: 7px;
  }
  .court-payment-row > .court-status {
    grid-column: 2;
    grid-row: 1;
  }
  .court-payment-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 359px) {
  .court-payment-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 7px;
  }
  .court-payment-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
  }
}


/* V38 · Quadra premium + estados claros + card Home detalhado */
.court-home-action .action-copy {
  display: grid;
  gap: 2px;
}
.court-home-action .action-copy small {
  margin-top: 0;
  color: #607a8c;
  font-weight: 800;
  white-space: normal;
}
.court-home-action .action-copy em {
  color: #8293a0;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 720;
  line-height: 1.25;
}
.court-home-metric {
  max-width: 150px;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
  white-space: normal;
}
.court-home-metric strong {
  color: var(--action-accent);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}
.court-home-metric small {
  margin: 0;
  color: #6f8492;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.court-charge-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 12px !important;
}
.court-charge-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.court-charge-kickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.court-type-chip,
.court-state-chip {
  min-height: 24px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #dce6ec;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .065em;
  line-height: 1;
  text-transform: uppercase;
}
.court-type-chip {
  color: #426a83;
  background: #f3f8fb;
}
.court-state-chip.open {
  color: #126743;
  background: #e8f7ef;
  border-color: #cce9d9;
}
.court-state-chip.closed {
  color: #677987;
  background: #f1f4f6;
  border-color: #dae2e7;
}
.court-charge-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.court-charge-meta > span {
  min-width: 0;
  padding: 7px 8px;
  display: grid;
  gap: 2px;
  background: #f7fafc;
  border: 1px solid #e1e9ee;
  border-radius: 11px;
}
.court-charge-meta small {
  color: #7c8f9d;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .025em;
  line-height: 1.15;
}
.court-charge-meta b {
  overflow: hidden;
  color: #244b64;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.court-charge-note {
  margin: 0;
  color: #728693;
  font-size: 9.5px;
  line-height: 1.35;
}
.court-progress {
  min-width: 62px !important;
  padding: 8px 9px !important;
  display: grid;
  justify-items: center;
  gap: 1px;
}
.court-progress b {
  font-size: 17px;
  line-height: 1;
}
.court-progress small {
  color: currentColor;
  font-size: 8px;
  font-weight: 850;
  opacity: .82;
}
.court-charge-card .court-progress.empty {
  color: #5f7585;
  background: #eef3f6;
  border-color: #d8e3e9;
}
.court-charge-actions [data-court-toggle-status] {
  color: #375d75;
}
.court-charge-actions [data-court-toggle-status]:hover,
.court-charge-actions [data-court-toggle-status]:focus-visible {
  background: #eef6fb;
}
.court-charge-card.closed .court-charge-note {
  color: #657782;
}
.court-charge-card.open {
  border-color: #cfe2ee;
  box-shadow: 0 10px 28px rgba(38, 88, 119, .07);
}

@media (max-width: 430px) {
  .court-home-action {
    min-height: 92px !important;
  }
  .court-home-action .action-copy small {
    font-size: 10px;
    -webkit-line-clamp: 1;
  }
  .court-home-action .action-copy em {
    font-size: 9px;
  }
  .court-home-metric strong {
    font-size: 17px;
  }
  .court-home-metric small {
    font-size: 8.5px;
  }

  .court-charge-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px !important;
  }
  .court-charge-meta {
    gap: 5px;
  }
  .court-charge-meta > span {
    padding: 6px;
  }
  .court-charge-meta small {
    font-size: 7.5px;
  }
  .court-charge-meta b {
    font-size: 9px;
  }
  .court-charge-actions {
    gap: 3px;
  }
  .court-charge-actions .btn.text {
    min-height: 39px;
    padding: 7px 8px;
    font-size: 10px;
  }
}

@media (max-width: 359px) {
  .court-home-action {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }
  .court-home-metric {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: baseline;
    justify-items: stretch;
    text-align: left;
  }
  .court-charge-head {
    grid-template-columns: 1fr;
  }
  .court-progress {
    width: fit-content;
    min-width: 74px !important;
    grid-template-columns: auto auto;
    gap: 5px;
  }
  .court-charge-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .court-charge-meta > span:last-child {
    grid-column: 1 / -1;
  }
}

/* V39 · cobrança cancelável + disciplina */
.premium-action.accent-red { --action-accent: #b84b55; }
.court-reference-line { margin: 2px 0 1px; display: flex; align-items: center; gap: 5px; color: #547184; font-size: 10px; }
.court-reference-line .icon { width: 13px; height: 13px; color: #1977c9; }
.court-state-chip.cancelled { color: #9c3e48; background: #ffebed; border-color: #efc9ce; }
.court-charge-card.cancelled { border-color: #ebd9dc; background: linear-gradient(145deg,#fffafa,#f9f6f7); }
.court-charge-card.cancelled .court-charge-note { color: #875c62; }
.court-own-charge.cancelled { border-left: 4px solid #a66a73; background: #fbf8f9; }
.court-reference-month.hidden,.court-reference-date.hidden { display: none !important; }

.discipline-home-action { --action-accent: #a94754; }
.discipline-home-metric strong { color: #963e49; }
.discipline-heading { align-items: flex-start; }
.discipline-own-penalty {
  margin: 0 0 12px; padding: 14px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 11px; align-items: center;
  color: #703841; background: linear-gradient(135deg,#fff1f2,#fffafa); border: 1px solid #efc7cc; border-radius: 18px; box-shadow: 0 10px 26px rgba(126,47,59,.06);
}
.discipline-own-penalty > .icon { width: 48px; height: 48px; padding: 12px; color: #fff; background: #aa4c58; border-radius: 15px; }
.discipline-own-penalty div { min-width: 0; display: grid; gap: 2px; }
.discipline-own-penalty small { font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.discipline-own-penalty b { font-size: 14px; }
.discipline-own-penalty span { color: #7b6165; font-size: 10px; line-height: 1.4; }
.discipline-summary-grid { margin: 0 0 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.discipline-summary-grid > div { min-width: 0; padding: 12px; display: grid; gap: 3px; background: #fff; border: 1px solid #dfe7ec; border-radius: 16px; box-shadow: 0 8px 22px rgba(38,72,94,.04); }
.discipline-summary-grid small { color: #647d8d; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.discipline-summary-grid b { color: #173e57; font-size: 24px; }
.discipline-summary-grid span { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.discipline-list { display: grid; gap: 11px; }
.discipline-case-card { min-width: 0; padding: 14px; background: #fff; border: 1px solid #dfe8ed; border-radius: 18px; box-shadow: 0 9px 26px rgba(37,78,104,.05); }
.discipline-case-card.open { border-color: #d9caee; box-shadow: 0 10px 28px rgba(105,72,155,.07); }
.discipline-case-card.cancelled { background: #fbf9fa; border-color: #eadbdd; }
.discipline-case-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.discipline-case-card > header > div { min-width: 0; }
.discipline-case-card header small { display: block; color: #6a7d89; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.discipline-case-card h2 { margin: 3px 0 0; color: #173e57; font-size: 18px; overflow-wrap: anywhere; }
.discipline-case-card > p { margin: 10px 0; color: #506b7b; font-size: 11px; line-height: 1.5; }
.discipline-chip { min-height: 28px; padding: 5px 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.discipline-chip.open { color: #7251a6; background: #f2eafa; border-color: #e0d1f0; }
.discipline-chip.runoff { color: #8b6716; background: #fff5da; border-color: #efdfb4; }
.discipline-chip.closed { color: #5a7180; background: #edf3f6; border-color: #dbe5ea; }
.discipline-chip.cancelled { color: #9b404b; background: #ffebed; border-color: #efcbd0; }
.discipline-poll-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.discipline-poll-meta span { min-height: 28px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 4px; color: #577181; background: #f5f8fa; border: 1px solid #e1e8ec; border-radius: 999px; font-size: 9px; font-weight: 800; }
.discipline-poll-meta .icon { width: 12px; height: 12px; }
.discipline-vote-note { margin: 7px 0; padding: 8px 10px; color: #6b7780; background: #f7f9fa; border-radius: 12px; font-size: 9.5px; line-height: 1.4; }
.discipline-options { display: grid; gap: 7px; }
.discipline-option { width: 100%; min-height: 48px; padding: 9px 10px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; text-align: left; color: #264c64; background: #f8fafb; border: 1px solid #e0e8ed; border-radius: 14px; }
button.discipline-option { cursor: pointer; }
button.discipline-option:not(:disabled):hover,button.discipline-option:not(:disabled):focus-visible { border-color: #a98bcd; background: #faf7fd; }
.discipline-option.selected { border-color: #8e6eba; background: #f4eefb; box-shadow: inset 0 0 0 1px rgba(126,91,174,.15); }
.discipline-option > span { width: 30px; height: 30px; display: grid; place-items: center; color: #7756a8; background: #eee7f7; border-radius: 10px; }
.discipline-option .icon { width: 15px; height: 15px; }
.discipline-option b { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
.discipline-option small { color: #72838d; font-size: 9px; text-align: right; }
.discipline-option:disabled { opacity: .72; cursor: default; }
.discipline-result { margin-top: 10px; padding: 11px; display: grid; gap: 2px; color: #226346; background: #edf8f2; border: 1px solid #cee8da; border-radius: 14px; }
.discipline-result.no-quorum { color: #7d641c; background: #fff9e8; border-color: #ecdfb8; }
.discipline-result small { font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.discipline-result b { font-size: 13px; }
.discipline-result span { font-size: 10px; }
.discipline-admin-actions { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.discipline-admin-actions .btn { min-height: 44px; }
.discipline-option-picker { min-width: 0; max-height: 330px; overflow-y: auto; padding: 9px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 16px; }
.discipline-option-picker legend { padding: 0 6px; color: #42647a; font-size: 10px; font-weight: 850; }
.discipline-option-picker label { min-height: 46px; padding: 8px; display: flex; align-items: center; gap: 9px; background: #f7fafb; border-radius: 12px; }
.discipline-option-picker input { width: 20px; height: 20px; flex: 0 0 auto; }
.discipline-option-picker span { display: grid; gap: 1px; }
.discipline-option-picker b { font-size: 11px; }
.discipline-option-picker small { color: var(--muted); font-size: 9px; }
.participant-row.suspended { background: #fbf7f8; border-color: #ead7da; }
.participant-row.suspended input { visibility: hidden; }
.discipline-inline-lock { margin-left: 5px; padding: 3px 6px; display: inline-flex; align-items: center; gap: 3px; color: #9c4350; background: #ffeaed; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 900; vertical-align: middle; }
.discipline-inline-lock .icon { width: 10px; height: 10px; }
.presence-answer-card.suspended { border-color: #ebcfd3; background: #fffafa; }

@media (max-width: 430px) {
  .discipline-home-action { min-height: 90px !important; }
  .discipline-summary-grid { gap: 7px; }
  .discipline-summary-grid > div { padding: 10px; }
  .discipline-case-card { padding: 12px; }
  .discipline-option { grid-template-columns: 28px minmax(0,1fr); grid-template-rows: auto auto; }
  .discipline-option small { grid-column: 2; text-align: left; }
  .discipline-admin-actions { display: grid; grid-template-columns: 1fr; }
  .discipline-admin-actions .btn { width: 100%; }
}

@media (max-width: 359px) {
  .discipline-summary-grid { grid-template-columns: 1fr; }
  .discipline-case-card > header { display: grid; grid-template-columns: 1fr; }
  .discipline-chip { width: fit-content; }
}

/* V39 · integração disciplinar com presença + refinamento mobile */
.presence-status.suspended { color: #9a3f4b; background: #ffeaed; border-color: #efcbd0; }
.presence-player-row.suspended { background: #fffafa; border-color: #ebd2d6; }
.presence-group.suspended { border-color: #ead1d5; }
.presence-group.suspended > summary { background: linear-gradient(135deg,#fff2f3,#fffafa); }
.presence-group.suspended > summary > span { color: #a34753; background: #ffe6e9; }

@media (max-width: 430px) {
  .home-quick-grid > .court-home-action,
  .home-quick-grid > .discipline-home-action {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
  }
  .court-charge-actions .btn.text { min-height: 44px; }
  .discipline-case-card header small,
  .discipline-option small,
  .discipline-poll-meta span,
  .discipline-vote-note { font-size: 10px; }
}

@media (max-width: 359px) {
  .home-quick-grid > .discipline-home-action {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }
  .discipline-home-metric {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
  }
}

/* V40 — PÓS-JOGO COERENTE */
.live-sync-pill.finalized { color: #28556f; background: rgba(238,246,250,.94); border-color: #c5d8e3; box-shadow: 0 8px 20px rgba(32,68,91,.08); }
.live-sync-pill.finalized > i { background: #3b8fb8; box-shadow: 0 0 0 4px rgba(59,143,184,.12); }
.home-spotlight.result.finished { background: linear-gradient(135deg, #17678d, #24536d 58%, #203f50); }
.home-spotlight.result.finished .home-spotlight-copy em { opacity: .9; }
.game-day-hero.done .game-day-status i { background: #8fd4ee; box-shadow: 0 0 0 4px rgba(143,212,238,.14); }
.game-day-countdown.done { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); }
.my-panel-round.finished { border-color: #c8dce7; background: linear-gradient(145deg, #f4f9fc, #eef5f8); }
.my-panel-round.finished > span { color: #23789f; background: #e4f2f8; }
@media (max-width: 430px) {
  .home-spotlight.result.finished .home-spotlight-copy b { font-size: 16px; }
  .home-spotlight.result.finished .home-spotlight-copy em { white-space: normal; line-height: 1.25; }
}
.my-panel-round.cancelled { border-color: #efc8cd; background: linear-gradient(145deg, #fff8f8, #fff1f2); }
.my-panel-round.cancelled > span { color: #a23f4d; background: #fde8eb; }


/* V41 — HOME LAPIDADA · HIERARQUIA, RESPIRO E DENSIDADE */
.content[data-route="home"] .home-dashboard { margin-top: 10px; }

.home-spotlight.result.finished {
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 19px;
}
.home-spotlight.result.finished .home-spotlight-copy { gap: 2px; }
.home-spotlight.result.finished .home-spotlight-copy small { letter-spacing: .105em; }
.home-spotlight.result.finished .home-spotlight-copy b { font-size: 16px; }
.home-spotlight.result.finished .home-spotlight-copy em {
  max-width: 460px;
  font-size: 9.8px;
  line-height: 1.3;
}
.home-spotlight.result.finished .home-spotlight-stat {
  min-width: 54px;
  padding-left: 4px;
}
.home-spotlight.result.finished .home-spotlight-stat strong {
  color: #fff;
  font-size: 20px;
  letter-spacing: -.04em;
}
.home-spotlight.result.finished .home-spotlight-stat small {
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.home-section-head {
  margin: 19px 2px 9px;
  align-items: flex-end;
  gap: 10px;
}
.home-section-head > div { min-width: 0; }
.home-section-head .section-kicker {
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: .045em;
}
.home-section-head .section-kicker .icon { width: 15px; height: 15px; }
.home-section-head h2 {
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.home-section-head p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}
.home-section-head .btn.text {
  min-height: 44px;
  padding: 0 6px;
  align-self: flex-end;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.home-podium-list { gap: 6px; }
.home-podium-list .ranking-row.featured {
  min-height: 76px;
  padding: 9px 11px;
  gap: 9px;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(31, 64, 86, .055);
}
.home-podium-list .ranking-row.featured .ranking-number {
  min-width: 30px;
  font-size: 14px;
}
.home-podium-list .ranking-row.featured .avatar.medium {
  width: 50px;
  height: 50px;
  border-radius: 14px;
}
.home-podium-list .ranking-row.featured .profile-copy { gap: 1px; }
.home-podium-list .ranking-row.featured .profile-copy > b {
  font-size: 14px;
  line-height: 1.15;
}
.home-podium-list .ranking-row.featured .profile-copy > span {
  font-size: 11px;
  line-height: 1.2;
}
.home-podium-list .ranking-row.featured .profile-copy > small {
  margin-top: 2px;
  font-size: 9.5px;
  line-height: 1.2;
}
.home-podium-list .ranking-row.featured .rank-badge {
  min-width: 64px;
  padding: 5px 6px;
  border-radius: 13px;
}

.home-last-draw {
  padding: 10px;
  gap: 7px;
  border-radius: 16px;
  box-shadow: 0 7px 20px rgba(31, 64, 86, .055);
}
.home-last-draw-head { gap: 8px; }
.home-last-draw-head b {
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
}
.home-last-draw-head b em {
  color: #7a8e9a;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.home-balance-gap {
  min-width: 64px;
  padding: 5px 7px;
  display: grid;
  justify-items: end;
  gap: 1px;
  color: #5e7888 !important;
  background: #eef6fa;
  border: 1px solid #dcebf2;
  border-radius: 10px;
  line-height: 1.05;
}
.home-balance-gap strong {
  color: #176fa8;
  font-size: 11px;
  letter-spacing: -.02em;
}
.home-balance-gap span {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.home-last-teams { gap: 5px; }
.home-last-team {
  padding: 8px 9px;
  border: 1px solid #e8eff3;
  border-radius: 11px;
}
.home-last-team b { font-size: 12.5px; }
.home-last-team small { font-size: 11px; }
.home-last-team strong { font-size: 14px; }

.home-history-list { gap: 6px; }
.home-history-list .premium-history-row.compact {
  min-height: 61px;
  padding: 8px 9px;
  gap: 8px;
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(31, 64, 86, .05);
}
.home-history-list .premium-history-row.compact .history-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
}
.home-history-list .premium-history-row.compact .history-icon .icon {
  width: 17px;
  height: 17px;
}
.home-history-list .premium-history-row.compact .history-main { gap: 1px; }
.home-history-list .premium-history-row.compact .history-main > small { font-size: 11px; }
.home-history-list .premium-history-row.compact .history-main > b { font-size: 13px; }
.home-history-list .premium-history-row.compact .history-main > em { font-size: 11.5px; }
.home-history-list .premium-history-row.compact .history-side { gap: 3px; }
.home-history-list .premium-history-row.compact .history-status {
  padding: 3px 6px;
  font-size: 10.5px !important;
}
.home-history-list .premium-history-row.compact .history-side strong { font-size: 12px !important; }

@media (max-width: 430px) {
  .home-spotlight.result.finished {
    min-height: 72px;
    padding: 9px 10px;
    gap: 7px;
  }
  .home-spotlight.result.finished .home-spotlight-icon {
    width: 36px;
    height: 36px;
  }
  .home-spotlight.result.finished .home-spotlight-copy b { font-size: 14px; }
  .home-spotlight.result.finished .home-spotlight-copy em {
    font-size: 9.5px;
    line-height: 1.25;
  }
  .home-spotlight.result.finished .home-spotlight-stat { min-width: 46px; }
  .home-spotlight.result.finished .home-spotlight-stat strong { font-size: 18px; }

  .home-section-head {
    margin-top: 17px;
    margin-bottom: 8px;
  }
  .home-section-head .section-kicker { font-size: 11px; }
  .home-section-head h2 { font-size: 16.5px; }
  .home-section-head p { font-size: 11.5px; }
  .home-section-head .btn.text {
    min-height: 44px;
    font-size: 12px;
  }

  .home-podium-list .ranking-row.featured {
    min-height: 72px;
    padding: 8px 9px;
    gap: 8px;
  }
  .home-podium-list .ranking-row.featured .ranking-number {
    min-width: 27px;
    font-size: 13px;
  }
  .home-podium-list .ranking-row.featured .avatar.medium {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .home-podium-list .ranking-row.featured .profile-copy > b { font-size: 13px; }
  .home-podium-list .ranking-row.featured .profile-copy > span { font-size: 10.5px; }
  .home-podium-list .ranking-row.featured .profile-copy > small { font-size: 9px; }
  .home-podium-list .ranking-row.featured .rank-badge {
    min-width: 60px;
    padding: 4px 5px;
  }

  .home-last-draw {
    padding: 9px;
    gap: 6px;
  }
  .home-last-draw-head b { font-size: 11.5px; }
  .home-balance-gap {
    min-width: 60px;
    padding: 4px 6px;
  }
  .home-balance-gap strong { font-size: 12px; }
  .home-last-team { padding: 7px 8px; }
  .home-last-team b { font-size: 12px; }
  .home-last-team small { font-size: 11px; }
  .home-last-team strong { font-size: 13px; }

  .home-history-list .premium-history-row.compact {
    min-height: 58px;
    padding: 7px 8px;
    gap: 7px;
  }
}

@media (max-width: 359px) {
  .home-last-draw-head b em { display: none; }
  .home-balance-gap { min-width: 56px; }
  .home-podium-list .ranking-row.featured .rank-badge { min-width: 56px; }
  .home-section-head p { max-width: 230px; }
}

/* =========================================================
   V42 — ÍCONES PNG PREMIUM + GRÁFICOS NATIVOS
   ========================================================= */

img.icon,
img.rank-emblem,
img.form-icon {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  max-width: 100%;
  vertical-align: middle;
}

img.icon {
  width: 1.35em;
  height: 1.35em;
}

.icon-button > img.icon,
.nav-item > img.icon {
  width: 24px;
  height: 24px;
}

.nav-item > img.icon {
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.nav-item:not(.active) > img.icon {
  filter: saturate(.72);
  opacity: .76;
}

.nav-item.active > img.icon { transform: translateY(-1px) scale(1.06); }

img.rank-emblem {
  width: 24px;
  height: 24px;
}

img.rank-emblem.large {
  width: 42px;
  height: 42px;
}

img.form-icon {
  width: 16px;
  height: 16px;
}

.v42-chart {
  width: 100%;
  min-width: 0;
  margin: 12px 0;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(34, 70, 90, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(244, 248, 250, .96));
  box-shadow: 0 8px 24px rgba(18, 43, 59, .06);
}

.v42-chart > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 11px;
}

.v42-chart > header > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: #1d3948;
}

.v42-chart > header > span .icon {
  width: 21px;
  height: 21px;
}

.v42-chart > header b { font-size: 13px; line-height: 1.2; }
.v42-chart > header > strong {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.2;
  color: #386071;
}

.v42-chart > small,
.v42-chart-empty {
  display: block;
  margin-top: 10px;
  color: #617782;
  font-size: 10px;
  line-height: 1.42;
}

.v42-chart-empty {
  margin: 10px 0 0;
  padding: 12px;
  border: 1px dashed rgba(54, 88, 105, .2);
  border-radius: 13px;
  background: #f7fafb;
}

.v42-bars {
  display: grid;
  gap: 8px;
}

.v42-bar-row {
  display: grid;
  grid-template-columns: minmax(62px, .75fr) minmax(72px, 2fr) minmax(46px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.v42-bar-row > span {
  overflow: hidden;
  color: #2d4958;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v42-bar-row > i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf1;
}

.v42-bar-row > i > b {
  display: block;
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #177a73, #2673d9);
}

.v42-bar-row > strong {
  color: #1c3b4b;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.balance-chart {
  border-color: rgba(95, 73, 190, .16);
  background: linear-gradient(145deg, #fff, #f7f5ff);
}

.presence-distribution { margin-top: 9px; }
.presence-distribution.historical { background: linear-gradient(145deg, #fff, #f5f7f8); }

.presence-segments,
.court-finance-track {
  display: flex;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf0;
}

.presence-segments > i { min-width: 0; height: 100%; }
.presence-segments > .yes { background: #29956b; }
.presence-segments > .maybe { background: #d29a20; }
.presence-segments > .no { background: #d34c51; }
.presence-segments > .unanswered { background: #83939b; }

.presence-chart-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
}

.presence-chart-legend > span {
  display: grid;
  grid-template-columns: 7px auto;
  grid-template-rows: auto auto;
  column-gap: 5px;
  min-width: 0;
}

.presence-chart-legend > span > i {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #83939b;
}

.presence-chart-legend > .yes > i { background: #29956b; }
.presence-chart-legend > .maybe > i { background: #d29a20; }
.presence-chart-legend > .no > i { background: #d34c51; }
.presence-chart-legend > span > b { font-size: 10.5px; line-height: 1; }
.presence-chart-legend > span > small {
  overflow: hidden;
  color: #687b84;
  font-size: 8.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-results-grid {
  display: grid;
  gap: 7px;
}

.recent-results-grid > article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border-radius: 11px;
  background: rgba(236, 242, 245, .72);
}

.recent-results-grid h3 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  color: #284654;
  font-size: 12px;
}

.recent-results-grid h3 small { color: #72838b; font-size: 7.5px; font-weight: 550; }
.recent-results-grid article > div { display: grid; gap: 4px; min-width: 0; }

.recent-result-team {
  display: grid;
  grid-template-columns: minmax(54px, .8fr) minmax(50px, 1.5fr) 18px 18px;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.recent-result-team > em {
  overflow: hidden;
  color: #344f5d;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-result-team > i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6ea;
}

.recent-result-team > i > b { display: block; min-width: 2px; height: 100%; background: #5d7480; }
.recent-result-team.win > i > b { background: #29956b; }
.recent-result-team.draw > i > b { background: #d29a20; }
.recent-result-team.loss > i > b { background: #d34c51; }
.recent-result-team > strong { font-size: 10px; text-align: right; }
.recent-result-team > small {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #e1e8eb;
  color: #526772;
  font-size: 8px;
  font-weight: 850;
}
.recent-result-team.win > small { background: #def2e8; color: #16704c; }
.recent-result-team.draw > small { background: #fff0c7; color: #8e6300; }
.recent-result-team.loss > small { background: #fde2e3; color: #a92c32; }

.rank-evolution-chart { margin-top: 13px; }
.rank-evolution-bars {
  display: flex;
  align-items: end;
  justify-content: stretch;
  gap: 7px;
  min-height: 132px;
  padding: 18px 8px 0;
  border-bottom: 1px solid #d8e2e6;
  background: repeating-linear-gradient(to top, transparent 0, transparent 31px, rgba(67, 93, 106, .07) 32px);
}

.rank-evolution-bars > span {
  display: grid;
  grid-template-rows: auto minmax(1px, var(--rank-height)) auto;
  align-items: end;
  flex: 1 1 0;
  align-self: stretch;
  min-width: 0;
  text-align: center;
}

.rank-evolution-bars > span > b { margin-bottom: 4px; color: #324e5c; font-size: 9px; }
.rank-evolution-bars > span > i {
  display: block;
  width: min(24px, 72%);
  height: var(--rank-height);
  min-height: 2px;
  margin: 0 auto;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(#4079d6, #2862be);
}
.rank-evolution-bars > span > i.rank-s { background: linear-gradient(#f1bd18, #cf8a00); }
.rank-evolution-bars > span > i.rank-a { background: linear-gradient(#8b6de0, #6550bc); }
.rank-evolution-bars > span > i.rank-b { background: linear-gradient(#3d8eef, #2867c4); }
.rank-evolution-bars > span > i.rank-c { background: linear-gradient(#66818e, #49616c); }
.rank-evolution-bars > span > i.rank-d { background: linear-gradient(#49a56e, #278152); }
.rank-evolution-bars > span > i.rank-e { background: linear-gradient(#86a934, #688b18); }
.rank-evolution-bars > span > small { padding: 4px 0 3px; color: #71838c; font-size: 8px; }

.court-finance-track > i { min-width: 0; height: 100%; }
.court-finance-track > .paid { background: #29956b; }
.court-finance-track > .pending { background: #d99b1d; }
.court-finance-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.court-finance-values > span { display: flex; justify-content: space-between; gap: 6px; min-width: 0; }
.court-finance-values small { color: #687b84; font-size: 9px; }
.court-finance-values b { color: #294754; font-size: 10px; white-space: nowrap; }
.court-finance-chart.empty p { margin: 0; color: #617782; font-size: 11px; }

.discipline-vote-chart { margin: 10px 0; box-shadow: none; }
.discipline-vote-chart.secret { background: linear-gradient(145deg, #fff, #f7f5ff); }
.discipline-quorum-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #e4e7ef;
}
.discipline-quorum-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6852bd, #8066d7);
}
.discipline-quorum-track > b {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: #2f4653;
  transform: translateX(-1px);
}

@media (max-width: 430px) {
  .v42-chart { padding: 11px; border-radius: 14px; }
  .v42-chart > header { align-items: flex-start; }
  .v42-chart > header b { font-size: 12px; }
  .v42-chart > header > strong { font-size: 9.5px; }
  .v42-bar-row { grid-template-columns: minmax(54px, .75fr) minmax(58px, 1.65fr) minmax(40px, auto); gap: 6px; }
  .v42-bar-row > span { font-size: 11px; }
  .v42-bar-row > strong { font-size: 11px; }
  .recent-results-grid > article { grid-template-columns: 45px minmax(0, 1fr); gap: 6px; padding: 7px; }
  .recent-result-team { grid-template-columns: minmax(45px, .8fr) minmax(42px, 1.3fr) 16px 17px; gap: 4px; }
  .recent-result-team > em { font-size: 8px; }
  .rank-evolution-bars { gap: 4px; padding-inline: 4px; }
}

@media (max-width: 350px) {
  .presence-chart-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 7px; }
  .court-finance-values { grid-template-columns: 1fr; gap: 4px; }
  .recent-results-grid > article { grid-template-columns: 40px minmax(0, 1fr); }
  .recent-result-team { grid-template-columns: minmax(38px, .8fr) minmax(34px, 1.2fr) 15px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item > img.icon { transition: none; }
}

/* =========================================================
   V43 — LAPIDAÇÃO VISUAL TOTAL + ICONOGRAFIA PREMIUM
   Camada incremental: hierarquia, contraste, toque e respiro.
   ========================================================= */

:root {
  --v43-ink: #17384d;
  --v43-muted: #5f7685;
  --v43-line: #d9e5eb;
  --v43-line-strong: #c5d7e1;
  --v43-surface: #ffffff;
  --v43-surface-soft: #f5f9fb;
  --v43-blue: #176fd0;
  --v43-blue-soft: #e8f3ff;
  --v43-green: #17865b;
  --v43-green-soft: #e9f7f0;
  --v43-amber: #a36f09;
  --v43-red: #b33f4c;
  --v43-shadow: 0 7px 20px rgba(31, 67, 89, .065);
  --v43-shadow-press: 0 3px 10px rgba(31, 67, 89, .09);
  --v43-radius: 18px;
}

html { background: #e8eef2; }
body {
  min-width: 0;
  color: var(--v43-ink);
  background:
    linear-gradient(180deg, #edf3f6 0, #f7f9fa 46%, #edf2f5 100%);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  background: #f8fafb;
  border-color: rgba(75, 107, 126, .12);
}

.topbar {
  min-height: calc(72px + env(safe-area-inset-top));
  background: rgba(252, 253, 253, .97);
  border-bottom-color: rgba(56, 92, 114, .12);
  box-shadow: 0 4px 15px rgba(30, 60, 78, .045);
}

.brand-mini { gap: 8px; }
.brand-mini img {
  width: 38px;
  height: 38px;
  padding: 2px;
  border-color: #c7d7e0;
  border-radius: 12px;
  box-shadow: 0 4px 11px rgba(30, 63, 84, .09);
}
.brand-mini b { color: #17364a; letter-spacing: -.015em; }
.brand-mini em { color: #176fcf; }
.app-version-badge {
  width: fit-content;
  min-height: 17px;
  padding: 2px 6px;
  display: inline-grid;
  place-items: center;
  color: #1266b7;
  background: #eaf4ff;
  border: 1px solid #cfe4f8;
  border-radius: 999px;
  font-size: 8.5px;
  line-height: 1;
}

.icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: linear-gradient(145deg, #fff, #f2f6f8);
  border-color: #d3e0e7;
  border-radius: 14px;
  box-shadow: 0 4px 11px rgba(27, 61, 82, .075), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.icon-button > img.icon {
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9));
}
.icon-button:active { transform: translateY(1px); box-shadow: var(--v43-shadow-press); }

.content {
  padding-top: 18px;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: calc(116px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
}

.page-heading {
  min-width: 0;
  margin-bottom: 18px;
  padding: 13px 14px;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(245, 249, 251, .96));
  border: 1px solid #e0e9ee;
  border-radius: var(--v43-radius);
  box-shadow: 0 5px 16px rgba(31, 67, 89, .045);
}
.page-heading > div { min-width: 0; }
.page-heading h1 {
  margin-top: 5px;
  color: #18394f;
  font-size: clamp(25px, 6.8vw, 31px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.page-heading p {
  margin-top: 5px;
  color: var(--v43-muted);
  font-size: 12px;
  line-height: 1.45;
}
.section-kicker {
  gap: 6px;
  color: #176fcf;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .075em;
}
.section-kicker .icon { width: 17px; height: 17px; }
.section-head { gap: 12px; }
.section-head h2 { color: #1b3d52; line-height: 1.16; letter-spacing: -.02em; }
.section-head p { color: var(--v43-muted); line-height: 1.45; }

.panel,
.player-card,
.participant-row,
.presence-round-card,
.presence-identity,
.presence-answer-card,
.final-score,
.history-row,
.discipline-case-card,
.court-charge-card,
.court-own-charge,
.v42-chart {
  border-color: var(--v43-line);
  box-shadow: var(--v43-shadow);
}

.panel,
.final-score,
.presence-round-card,
.discipline-case-card,
.court-charge-card,
.court-own-charge,
.v42-chart {
  background: linear-gradient(145deg, #fff, #fbfcfd);
}

.btn {
  min-height: 44px;
  padding: 0 14px;
  gap: 7px;
  color: #244a62;
  background: linear-gradient(145deg, #f8fafb, #eef4f7);
  border-color: #cadbe4;
  border-radius: 13px;
  font-size: 11.5px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}
.btn.primary {
  background: linear-gradient(145deg, #2282e7, #1266ce);
  border-color: #1262bf;
  box-shadow: 0 7px 16px rgba(18, 102, 206, .18), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.btn.text { min-height: 44px; padding-inline: 8px; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--v43-shadow-press); }
.mini-btn { min-width: 44px; min-height: 44px; border-radius: 12px; }

.field label { margin-bottom: 6px; color: #35556a; font-size: 11px; }
.field input,
.field select,
.field textarea,
.search-field {
  min-height: 50px;
  color: var(--v43-ink);
  background: #fff;
  border-color: #cfdde5;
  border-radius: 14px;
}
.search-field {
  margin-bottom: 12px;
  padding-inline: 14px;
  box-shadow: 0 4px 13px rgba(31, 67, 89, .04);
}
.search-field > .icon { width: 21px; height: 21px; }
.search-field input { font-size: 16px; }

/* Pedestais discretos para os PNGs principais. */
.action-icon,
.main-menu-route > span:first-child,
.result-heading-icon,
.history-heading-icon,
.history-icon,
.progression-title > span,
.game-day-section-head > span,
.presence-group > summary > span:first-child,
.empty-state > .icon {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fff, #eaf4fb);
  border: 1px solid #d6e6ef;
  box-shadow: 0 4px 10px rgba(36, 77, 102, .08), inset 0 1px 0 #fff;
}
.action-icon::before,
.main-menu-route > span:first-child::before,
.result-heading-icon::before,
.history-heading-icon::before,
.history-icon::before {
  position: absolute;
  inset: 1px 4px auto;
  height: 35%;
  content: "";
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, 0));
}
.action-icon .icon,
.main-menu-route > span:first-child .icon,
.result-heading-icon .icon,
.history-heading-icon .icon,
.history-icon .icon,
.progression-title > span .icon,
.game-day-section-head > span .icon,
.presence-group > summary > span:first-child .icon {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 1px rgba(22, 60, 84, .10));
}

.action-card.premium-action {
  border-color: #dbe6ec;
  box-shadow: 0 6px 17px rgba(31, 67, 89, .055);
}
.action-icon { width: 38px; height: 38px; border-radius: 13px; }
.action-icon .icon { width: 22px; height: 22px; }
.action-copy b { color: #1e4055; font-size: 12px; }
.action-copy small { color: #667d8b; font-size: 10.5px; line-height: 1.35; }
.action-metric { color: #255d82; }

.main-menu-route {
  min-height: 84px;
  border-color: #dbe6ec;
  box-shadow: 0 6px 17px rgba(31, 67, 89, .055);
}
.main-menu-route > span:first-child { width: 40px; height: 40px; border-radius: 13px; }
.main-menu-route > span:first-child .icon { width: 22px; height: 22px; }
.main-menu-route b { color: #1e4055; font-size: 13px; }
.main-menu-route small { color: #5e7584; font-size: 12px; }

/* Jogadores: apelido primeiro, nome real secundário e selos inequívocos. */
.player-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.player-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  background: linear-gradient(145deg, #fff 0%, #fbfdfe 72%, #f1f7fb 100%);
  border-radius: var(--v43-radius);
}
.player-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: linear-gradient(#2e91ec, #58b5e6);
}
.player-card.is-goalkeeper::before { background: linear-gradient(#1b9a72, #63bc98); }
.player-card.inactive {
  opacity: 1;
  background: linear-gradient(145deg, #f7f9fa, #eef2f4);
  border-style: dashed;
}
.player-card.inactive::before { background: #9aabb5; }
.player-main { align-items: flex-start; gap: 11px; }
.player-card .avatar,
.player-card .avatar-button .avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  box-shadow: 0 5px 13px rgba(30, 69, 94, .11);
}
.player-card .profile-copy { min-width: 0; padding-top: 1px; gap: 2px; }
.nickname-line { min-width: 0; gap: 6px; }
.nickname-line > b {
  overflow: hidden;
  color: #173a50;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-card .profile-copy > span { color: #647b89; font-size: 12px; line-height: 1.25; }
.shirt-number { min-height: 21px; padding: 3px 6px; display: inline-grid; place-items: center; }
.profile-stats {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.profile-stats > .player-meta-chip {
  min-height: 29px;
  padding: 4px 7px 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #31576f;
  background: #f2f7fa;
  border: 1px solid #dde8ee;
  border-radius: 10px;
}
.profile-stats > .player-meta-chip.goalkeeper {
  color: #126747;
  background: #ebf8f2;
  border-color: #cae9da;
}
.profile-stats > .player-meta-chip > .icon { width: 15px; height: 15px; }
.profile-stats > .player-meta-chip > span { display: grid; gap: 0; }
.profile-stats > .player-meta-chip small {
  color: #778c99;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.profile-stats > .player-meta-chip b { color: inherit; font-size: 10.5px; line-height: 1.15; }

.rank-badge {
  position: relative;
  min-width: 76px;
  min-height: 54px;
  padding: 7px 7px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  background: linear-gradient(145deg, #fff, #f1f6f8);
  border-color: #d4e1e7;
  border-radius: 14px;
  box-shadow: 0 4px 11px rgba(29, 66, 90, .06), inset 0 1px 0 #fff;
}
.rank-badge > .rank-emblem { width: 27px; height: 27px; }
.rank-badge-copy { min-width: 0; display: grid; gap: 0; }
.rank-badge .rank-badge-copy > small {
  color: #718692;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rank-badge .rank-badge-copy > b { color: currentColor; font-size: 17px; line-height: 1; }
.rank-badge .rank-badge-copy > em {
  color: #4f6876;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.rank-badge .placement {
  position: absolute;
  top: -6px;
  right: -5px;
  min-width: 23px;
  min-height: 20px;
  padding: 3px 5px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #256e9d;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(27, 64, 87, .16);
}
.rank-badge.rank-s { color: #a56b00; background: linear-gradient(145deg, #fffdf6, #fff3ca); border-color: #ead59d; }
.rank-badge.rank-a { color: #674db4; background: linear-gradient(145deg, #fff, #f1edff); border-color: #d9d0f3; }
.rank-badge.rank-b { color: #176bb7; background: linear-gradient(145deg, #fff, #eaf4ff); border-color: #cbdff2; }
.rank-badge.rank-c { color: #526b78; }
.rank-badge.rank-d { color: #267a4f; background: linear-gradient(145deg, #fff, #eef8f2); border-color: #cfe6d8; }
.rank-badge.rank-e { color: #648322; background: linear-gradient(145deg, #fff, #f3f8e8); border-color: #dbe7bf; }

.player-card .recent-form.compact { margin-top: 5px; gap: 4px; }
.player-card .recent-form.compact .recent-form-token { width: 21px; height: 21px; border-radius: 7px; }
.player-card .recent-form.compact .form-icon { width: 13px; height: 13px; }
.player-footer {
  min-height: 42px;
  margin-top: 8px;
  padding-top: 8px;
  align-items: center;
  border-top: 1px solid #edf2f4;
}
.player-footer .tier-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667d8b;
  font-size: 10px;
  line-height: 1.3;
}
.player-footer .tier-copy .icon { width: 14px; height: 14px; }
.player-footer-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.player-state,
.readonly-label {
  min-height: 28px;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}
.player-state .icon,
.readonly-label .icon { width: 12px; height: 12px; }
.player-state.active { color: #126a47; background: #eaf8f1; border-color: #cce9db; }
.player-state.inactive { color: #7a5a61; background: #f5ecee; border-color: #e4d4d8; }
.readonly-label { color: #376480; background: #eff6fa; border-color: #d7e7f0; }

/* Presença e estados não dependem apenas de cor. */
.presence-status {
  min-height: 30px;
  padding: 5px 8px;
  gap: 5px;
  border-width: 1px;
  border-style: solid;
  font-size: 11px;
  line-height: 1.2;
}
.presence-status .icon { width: 14px; height: 14px; }
.presence-player-row { min-height: 62px; padding: 9px; gap: 8px; }
.presence-player-row .profile-copy b { font-size: 13px; }
.presence-player-row .profile-copy span,
.presence-player-row .profile-copy small { font-size: 12px; }
.presence-group > summary { min-height: 58px; padding: 9px 10px; }
.presence-group > summary > span:first-child { width: 36px; height: 36px; border-radius: 12px; }
.presence-group > summary > span:first-child .icon { width: 19px; height: 19px; }
.presence-group summary b { color: #274b62; font-size: 12px; }
.presence-group summary small { color: #586f7d; font-size: 12px; }

/* Sorteio e times: nível e rank ficam juntos, goleiro/capitão são inequívocos. */
.participant-row { min-height: 68px; padding: 9px; gap: 8px; border-radius: 15px; }
.participant-row.goalkeeper { border-color: #c8e4d7; background: linear-gradient(145deg, #fff, #f2faf6); }
.participant-row .profile-copy > b { color: #1e4055; font-size: 13px; }
.participant-row .profile-copy > span,
.participant-row .profile-copy > small { color: #5b7381; font-size: 12px; line-height: 1.35; }
.level-token {
  min-width: 72px;
  min-height: 48px;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: #436273;
  background: #f1f6f8;
  border: 1px solid #d9e5eb;
  border-radius: 12px;
}
.level-token > .rank-emblem { width: 22px; height: 22px; }
.level-token > span { min-width: 0; display: grid; gap: 0; }
.level-token > span small { color: #748893; font-size: 7px; line-height: 1; text-transform: uppercase; }
.level-token > span b { color: #24495f; font-size: 14px; line-height: 1; }
.level-token > span em { color: #667e8b; font-size: 7.5px; font-style: normal; font-weight: 850; white-space: nowrap; }

.team-player { min-height: 59px; gap: 8px; }
.team-player.goalkeeper { background: linear-gradient(90deg, rgba(232, 248, 240, .7), transparent); }
.team-player.captain { background: linear-gradient(90deg, rgba(255, 246, 213, .72), transparent); }
.captain-badge {
  min-height: 21px;
  padding: 3px 5px;
  gap: 3px;
  border: 1px solid #ecd79b;
  border-radius: 999px;
}
.captain-badge .icon { width: 12px; height: 12px; }
.team-position.keeper { border: 1px solid #cbe7d9; }
.team-rank-token {
  width: auto;
  min-width: 72px;
  min-height: 45px;
  padding: 4px 5px;
  display: grid;
  grid-template-columns: 18px auto;
  place-items: center;
  gap: 3px;
  border-radius: 11px;
}
.team-rank-token .rank-emblem { width: 18px; height: 18px; }
.team-rank-token > span { display: grid; gap: 1px; }
.team-rank-token > span b { font-size: 11px; line-height: 1; }
.team-rank-token > span small { overflow: visible; font-size: 9px; line-height: 1.2; }

/* Perfil, rankings e gráficos. */
.player-profile-modal { gap: 13px; }
.player-profile-photo.rank-aura { padding-top: 8px; }
.player-profile-title .section-kicker { justify-content: center; }
.player-profile-title h2 { color: #17384d; letter-spacing: -.035em; }
.player-profile-title p { color: #607785; }
.profile-level-card { gap: 9px; }
.profile-level-card > div {
  min-width: 0;
  border-color: #d9e5eb;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(31, 67, 89, .045);
}
.profile-level-card > .profile-technical-main { background: linear-gradient(145deg, #fff, #edf6ff); }
.profile-technical-main > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.profile-technical-main > span .icon { width: 16px; height: 16px; }
.profile-rank-main .rank-emblem.large { filter: drop-shadow(0 3px 2px rgba(36, 67, 87, .12)); }
.profile-detail-grid > div { border-color: #dfe8ed; background: linear-gradient(145deg, #fff, #f7fafb); }
.profile-status { min-height: 38px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 12px; font-weight: 850; }
.profile-status.active { border-color: #cce9db; }
.profile-status.inactive { border-color: #e5d4d8; }

.ranking-row,
.ranking-podium-card,
.captain-rank-row,
.crowd-rank-row,
.bad-rank-row { border-color: var(--v43-line); box-shadow: 0 6px 17px rgba(31, 67, 89, .05); }
.ranking-row .profile-copy > b,
.captain-rank-row .profile-copy > b,
.crowd-rank-row .profile-copy > b { color: #1b3e54; }

.v42-chart { padding: 13px; border-radius: 17px; }
.v42-chart > header b { color: #213f51; font-size: 13px; }
.v42-chart > header > strong { font-size: 10.5px; }
.v42-chart > small,
.v42-chart-empty { font-size: 10.5px; line-height: 1.45; }
.v42-bar-row > span { font-size: 10px; }
.v42-bar-row > strong { font-size: 9.5px; }
.presence-chart-legend > span > b { font-size: 10.5px; }
.presence-chart-legend > span > small { font-size: 9px; }
.recent-results-grid h3 small { font-size: 9px; }
.recent-result-team > em { font-size: 9px; }

/* Resultado, histórico, Quadra e Disciplina compartilham a mesma gramática. */
.result-heading-icon,
.history-heading-icon { width: 42px; height: 42px; border-radius: 14px; }
.result-heading-icon .icon,
.history-heading-icon .icon { width: 24px; height: 24px; }
.premium-result-tabs {
  padding: 5px;
  gap: 5px;
  background: #eef4f7;
  border-color: #dbe6ec;
  border-radius: 15px;
}
.premium-result-tabs .result-tab {
  min-height: 46px;
  color: #617987;
  border-radius: 11px;
  font-size: 10.5px;
}
.premium-result-tabs .result-tab.active,
.premium-result-tabs .result-tab[aria-selected="true"] {
  color: #1769bd;
  background: #fff;
  box-shadow: 0 4px 11px rgba(31, 67, 89, .07);
}
.history-summary > span { border-color: #dfe8ed; box-shadow: 0 4px 12px rgba(31, 67, 89, .04); }
.history-summary small { font-size: 9.5px; }
.history-row.premium-history-row { min-height: 70px; }
.history-main > small { font-size: 11px; }
.history-main > b { color: #264a61; font-size: 11px; }
.history-main > em { color: #607787; font-size: 11px; }
.history-status,
.history-side strong { font-size: 11px !important; }

.discipline-summary-grid > div { border-color: #dfe8ed; box-shadow: 0 5px 15px rgba(31, 67, 89, .045); }
.discipline-summary-grid small { font-size: 9px; }
.discipline-summary-grid span { font-size: 10px; }
.discipline-case-card > p { font-size: 11px; line-height: 1.5; }
.discipline-chip { min-height: 30px; font-size: 9px; }
.discipline-poll-meta span { min-height: 30px; font-size: 9.5px; }
.discipline-vote-note { font-size: 10px; }

.notice,
.protected-notice,
.connection-bar {
  min-height: 48px;
  border-radius: 14px;
  box-shadow: 0 4px 13px rgba(31, 67, 89, .045);
}
.notice > .icon { width: 22px; height: 22px; }
.notice b { font-size: 11.5px; }
.notice span { font-size: 10.5px; line-height: 1.45; }
.count-chip { min-height: 30px; display: inline-grid; place-items: center; font-size: 9.5px; }

.empty-state {
  min-height: 140px;
  padding: 24px 18px;
  background: linear-gradient(145deg, #fff, #f7fafb);
  border-style: dashed;
  border-radius: var(--v43-radius);
}
.empty-state > .icon { width: 46px; height: 46px; padding: 10px; border-radius: 15px; }
.empty-state h2 { color: #23465d; font-size: 17px; }
.empty-state p { color: #667d8a; font-size: 11.5px; line-height: 1.5; }
.boot-starter,
.boot-recovery { color: #264a61; }
.boot-starter small,
.boot-recovery span { color: #657c89; }
.skeleton { border-radius: 12px; }

.modal-card {
  background: #f9fbfc;
  border-color: #cedde5;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 45px rgba(27, 56, 74, .2);
}
.modal-header {
  min-height: 58px;
  border-bottom-color: #e2e9ed;
}
.modal-header h2 { color: #193a4f; font-size: 18px; letter-spacing: -.02em; }

.toast { min-height: 46px; border-radius: 14px; box-shadow: 0 10px 24px rgba(24, 55, 74, .18); }

.bottom-nav {
  min-height: calc(70px + env(safe-area-inset-bottom));
  padding-top: 6px;
  background: rgba(252, 253, 253, .98);
  border-top-color: rgba(47, 82, 102, .14);
  box-shadow: 0 -7px 22px rgba(25, 53, 72, .075);
}
.nav-item {
  position: relative;
  min-width: 0;
  min-height: 56px;
  gap: 3px;
  color: #657987;
  border: 1px solid transparent;
  border-radius: 13px;
}
.nav-item > img.icon {
  width: 25px;
  height: 25px;
  filter: saturate(.7);
}
.nav-item b { font-size: 10px; font-weight: 780; line-height: 1; }
.nav-item.active {
  color: #1769bd;
  background: linear-gradient(145deg, #edf6ff, #e7f2fc);
  border-color: #d4e7f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.nav-item.active > img.icon {
  filter: saturate(1.06) drop-shadow(0 2px 1px rgba(23, 105, 189, .12));
  transform: translateY(-1px) scale(1.04);
}
.nav-item.active b { font-weight: 900; }

@media (hover: hover) {
  .player-card[data-player-profile-card]:hover,
  .main-menu-route:hover,
  .action-card:hover { transform: translateY(-1px); border-color: #bdd7e6; box-shadow: 0 9px 22px rgba(31, 67, 89, .085); }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    min-height: calc(68px + env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .top-profile-slot { width: 52px; height: 52px; }
  .content {
    padding-top: 14px;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .content[data-route="draw"] { padding-bottom: calc(156px + env(safe-area-inset-bottom)); }
  .page-heading { margin-bottom: 14px; padding: 11px 12px; }
  .page-heading h1 { font-size: clamp(24px, 7.2vw, 29px); }
  .page-heading p { font-size: 13px; }
  .section-kicker { font-size: 11px; }

  .home-section-head .btn.text { min-height: 44px; }
  .action-card.premium-action { min-height: 84px; padding: 10px; }
  .action-icon { width: 36px; height: 36px; }

  .player-card { padding: 10px; }
  .player-card .avatar,
  .player-card .avatar-button .avatar { width: 50px; height: 50px; border-radius: 15px; }
  .player-main { gap: 9px; }
  .nickname-line > b { font-size: 13px; }
  .rank-badge { min-width: 70px; min-height: 52px; padding: 6px; grid-template-columns: 25px minmax(0, 1fr); gap: 5px; }
  .rank-badge > .rank-emblem { width: 25px; height: 25px; }
  .profile-stats > .player-meta-chip { min-height: 27px; padding: 3px 6px; }
  .player-footer { min-height: 40px; }
  .player-state { padding-inline: 6px; }

  .participant-row { min-height: 66px; padding: 8px; }
  .participant-row .avatar.small { width: 40px; height: 40px; }
  .level-token { min-width: 66px; padding-inline: 5px; grid-template-columns: 20px minmax(0, 1fr); }
  .level-token > .rank-emblem { width: 20px; height: 20px; }

  .premium-result-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-result-tabs .result-tab { min-height: 46px; padding: 5px 8px; }
  .premium-result-tabs .result-tab > span:last-child { font-size: 12px; }
  .result-page-heading,
  .history-page-heading { padding: 11px 12px; }
  .history-row.premium-history-row { min-height: 68px; padding: 9px; }
  .history-main > b { font-size: 12px; }
  .history-main > em { font-size: 11px; }

  .v42-chart { padding: 12px; }
  .v42-chart > header { align-items: center; }
  .v42-chart > header b { font-size: 12px; }
  .v42-chart > header > strong { font-size: 10px; }
  .v42-bar-row > span { font-size: 11px; }
  .v42-bar-row > strong { font-size: 11px; }

  .main-menu-grid { gap: 8px; }
  .main-menu-route { min-height: 82px; padding: 10px; gap: 8px; }
  .main-menu-route > span:first-child { width: 38px; height: 38px; }
  .main-menu-route b { font-size: 12.5px; }
  .main-menu-route small { font-size: 12px; }

  .bottom-nav { min-height: calc(68px + env(safe-area-inset-bottom)); padding-right: max(6px, env(safe-area-inset-right)); padding-left: max(6px, env(safe-area-inset-left)); }
  .nav-item { min-height: 54px; }
  .nav-item > img.icon { width: 24px; height: 24px; }
  .nav-item b,
  .nav-item.active b { font-size: 11px; }

  .modal-card { max-height: calc(100dvh - env(safe-area-inset-top)); }
}

@media (max-width: 350px) {
  .content { padding-right: max(9px, env(safe-area-inset-right)); padding-left: max(9px, env(safe-area-inset-left)); }
  .brand-mini { gap: 5px; }
  .brand-mini img { width: 34px; height: 34px; }
  .brand-mini span { max-width: 132px; }
  .page-heading { padding: 10px; }
  .page-heading h1 { font-size: 23px; }
  .player-card { padding: 9px; }
  .player-card .avatar,
  .player-card .avatar-button .avatar { width: 46px; height: 46px; }
  .player-main { gap: 7px; }
  .nickname-line > b { font-size: 12.5px; }
  .player-card .profile-copy > span { font-size: 12px; }
  .profile-stats { gap: 4px; }
  .profile-stats > .player-meta-chip { min-height: 26px; padding-inline: 5px; }
  .profile-stats > .player-meta-chip > .icon { width: 13px; height: 13px; }
  .profile-stats > .player-meta-chip b { font-size: 11px; }
  .rank-badge { min-width: 62px; min-height: 49px; grid-template-columns: 22px minmax(0, 1fr); }
  .rank-badge > .rank-emblem { width: 22px; height: 22px; }
  .rank-badge .rank-badge-copy > b { font-size: 15px; }
  .rank-badge .rank-badge-copy > em { font-size: 10.5px; }
  .player-footer .tier-copy { font-size: 11px; }
  .readonly-label { display: none; }
  .participant-row { gap: 6px; }
  .participant-row .avatar.small { width: 36px; height: 36px; }
  .level-token { min-width: 58px; grid-template-columns: 18px minmax(0, 1fr); }
  .level-token > .rank-emblem { width: 18px; height: 18px; }
  .level-token > span b { font-size: 12px; }
  .team-rank-token { min-width: 66px; grid-template-columns: 16px auto; }
  .team-rank-token .rank-emblem { width: 16px; height: 16px; }
  .main-menu-route { min-height: 78px; padding: 8px; }
  .main-menu-route > span:first-child { width: 38px; height: 38px; }
  .main-menu-route > span:first-child .icon { width: 23px; height: 23px; }
  .nav-item b,
  .nav-item.active b { font-size: 11px; }
}

@media (min-width: 768px) {
  .content { padding-right: 24px; padding-left: 24px; }
  .page-heading { padding: 16px 18px; }
  .player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-card { min-height: 176px; }
  .main-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-spotlight-copy em { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .icon-button,
  .btn,
  .player-card,
  .main-menu-route,
  .action-card,
  .nav-item,
  .nav-item > img.icon { transition: none !important; transform: none !important; }
}

/* ============================================================
   V44 — PRESENÇA SEMANAL + MICROACABAMENTO
   ============================================================ */
.presence-heading { align-items: flex-end; }
.presence-heading-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.presence-heading-actions .btn { white-space: nowrap; }

.presence-round-card {
  min-height: 96px;
  padding: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  background: linear-gradient(145deg, #fff 0%, #f7fafc 100%);
  border-color: #d6e3ea;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(34, 70, 91, .07), inset 0 1px 0 #fff;
}
.presence-round-card::before { width: 4px; border-radius: 18px 0 0 18px; }
.presence-round-date {
  min-width: 108px;
  padding: 10px 12px;
  background: linear-gradient(145deg, #f6fbff, #eaf4ff);
  border: 1px solid #cfe1f0;
  border-radius: 14px;
  text-align: center;
}
.presence-round-date span { font-size: 10px; font-weight: 800; }
.presence-round-date strong { font-size: 23px; }
.presence-round-copy { gap: 5px; }
.presence-round-copy b { color: #1b3f55; font-size: 14px; }
.presence-round-copy span { color: #637b89; font-size: 10.5px; }
.presence-round-state { min-height: 34px; padding: 7px 10px; font-size: 10px; }

.presence-counts { gap: 8px; }
.presence-counts button {
  min-width: 0;
  min-height: 68px;
  padding: 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  text-align: left;
  background: linear-gradient(145deg, #fff, #f7fafb);
  border-color: #d6e2e8;
  border-radius: 15px;
  box-shadow: 0 5px 14px rgba(32, 67, 88, .055), inset 0 1px 0 #fff;
}
.presence-counts button > .icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  object-fit: contain;
  background: #f1f6f9;
  border: 1px solid #dce8ee;
  border-radius: 10px;
}
.presence-counts button > span { min-width: 0; margin: 0; display: grid; gap: 3px; overflow: visible; }
.presence-counts button b { font-size: 18px; line-height: 1; }
.presence-counts button small {
  overflow: hidden;
  color: #647c89;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.presence-counts .yes > .icon { background: #eaf8f1; border-color: #cbe9da; }
.presence-counts .maybe > .icon { background: #fff6df; border-color: #efdfb7; }
.presence-counts .no > .icon { background: #ffeff1; border-color: #f0cfd4; }
.presence-counts .unanswered > .icon { background: #f0f4f6; border-color: #dce4e8; }

.presence-identity,
.presence-answer-card,
.presence-notification,
.presence-admin-tools,
.presence-group {
  border-radius: 17px;
  box-shadow: 0 6px 18px rgba(31, 67, 88, .055), inset 0 1px 0 #fff;
}
.presence-admin-tools { overflow: hidden; border-color: #d4e2ea; }
.presence-admin-tools > summary { min-height: 60px; padding: 10px 12px; }
.presence-admin-tools > summary > .icon { width: 36px; height: 36px; padding: 8px; }
.presence-admin-tools > summary b { color: #274b61; font-size: 12px; }
.presence-admin-tools > summary small { font-size: 10px; }
.presence-admin-body { padding: 0 12px 12px; }
.presence-admin-body .button-row { gap: 8px; }
.presence-admin-body .button-row .btn { flex: 1 1 150px; }

.presence-lists { gap: 10px; }
.presence-group { overflow: hidden; border-color: #dce6eb; }
.presence-group > summary { background: linear-gradient(145deg, #fff, #f8fafb); }
.presence-group[open] > summary { border-bottom: 1px solid #edf2f4; }
.presence-group-list { padding: 8px; }
.presence-player-row { background: #fbfcfd; border-color: #e0e8ec; border-radius: 13px; }
.presence-player-row .mini-btn { min-width: 44px; min-height: 44px; }

/* =========================================================
   V45 — IDENTIDADE ESTRELAS E REFÚGOS
   ========================================================= */

.avatar img.team-affiliation-icon {
  position: absolute;
  z-index: 4;
  inset: auto 1px 1px auto;
  width: 20px;
  height: 20px;
  object-fit: cover;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(18, 45, 63, .28);
}

.avatar.image-failed img.team-affiliation-icon { display: block; }
.avatar.medium img.team-affiliation-icon { width: 19px; height: 19px; }
.avatar.small img.team-affiliation-icon { width: 18px; height: 18px; border-radius: 6px; }
.avatar.tiny img.team-affiliation-icon,
.avatar.header img.team-affiliation-icon { width: 16px; height: 16px; border-width: 1.5px; border-radius: 5px; }
.avatar.reveal img.team-affiliation-icon,
.avatar.profile-large img.team-affiliation-icon { width: 29px; height: 29px; border-radius: 9px; }

.team-card-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-emblem.team-card-emblem {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: cover;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 15px;
  box-shadow: 0 5px 14px rgba(24, 64, 91, .15);
}

.team-card.team-estrelas { border-color: #a9cfff; }
.team-card.team-estrelas header { background: linear-gradient(135deg, #eaf4ff, #fff); }
.team-card.team-refugos { border-color: #e7b5b5; }
.team-card.team-refugos header { background: linear-gradient(135deg, #fff0f0, #fff); }

@media (max-width: 360px) {
  .team-emblem.team-card-emblem { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .team-card-identity { gap: 8px; }
  .team-card-copy h3 { max-width: 125px; font-size: 18px; }
}

.presence-fresh-notice {
  margin: 0;
  color: #1d654b;
  background: linear-gradient(145deg, #eefaf4, #f8fcfa);
  border-color: #cde8da;
}
.presence-fresh-notice > .icon { width: 28px; height: 28px; }

@media (max-width: 430px) {
  .presence-heading { flex-direction: column; align-items: stretch; }
  .presence-heading > div:first-child { width: 100%; }
  .presence-heading-actions { width: 100%; justify-content: stretch; }
  .presence-heading-actions .btn { flex: 1 1 auto; }
  .presence-round-card { padding: 10px; grid-template-columns: auto minmax(0, 1fr); gap: 9px; }
  .presence-round-date { min-width: 92px; padding: 9px; }
  .presence-round-date strong { font-size: 21px; }
  .presence-round-state { grid-column: 1 / -1; justify-self: start; }
  .presence-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presence-counts button { min-height: 62px; }
  .presence-admin-body .button-row { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .presence-heading-actions { flex-direction: column; }
  .presence-heading-actions .btn { width: 100%; }
  .presence-round-card { grid-template-columns: 1fr; }
  .presence-round-date { width: 100%; }
  .presence-round-copy { text-align: center; }
  .presence-round-state { justify-self: center; }
  .presence-counts button { grid-template-columns: 26px minmax(0, 1fr); gap: 6px; }
  .presence-counts button > .icon { width: 26px; height: 26px; padding: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .presence-counts button,
  .presence-group,
  .presence-round-card { transition: none !important; transform: none !important; }
}

/* =========================================================
   V47 — QUADRA PREMIUM + POLIMENTO COMERCIAL GLOBAL
   Contraste, respiro, hierarquia, modais e estados de tela.
   ========================================================= */

:root {
  --v47-canvas: #eaf1f5;
  --v47-app: #f7fafc;
  --v47-card: #ffffff;
  --v47-card-soft: #f4f8fb;
  --v47-ink: #17384d;
  --v47-copy: #38576a;
  --v47-muted: #607786;
  --v47-line: #d4e2e9;
  --v47-line-strong: #bed3de;
  --v47-blue: #146ecb;
  --v47-blue-dark: #0d5aab;
  --v47-green: #13734d;
  --v47-amber: #8a5d08;
  --v47-red: #a93c49;
  --v47-shadow: 0 8px 24px rgba(29, 65, 87, .07);
  --v47-shadow-soft: 0 4px 14px rgba(29, 65, 87, .05);
}

html { background: var(--v47-canvas); }
body {
  color: var(--v47-ink);
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, .9), transparent 32%),
    linear-gradient(180deg, #e9f1f5 0%, #f2f6f8 48%, #e8f0f4 100%);
}
.app-shell { background: var(--v47-app); }
.content { scroll-padding-bottom: calc(118px + env(safe-area-inset-bottom)); }

:where(.page-heading, .section-head, .panel, .action-card, .player-card, .participant-row,
  .presence-round-card, .presence-identity, .presence-answer-card, .presence-group,
  .team-card, .final-score, .history-row, .discipline-case-card, .court-charge-card,
  .court-own-charge, .court-pix-card, .court-player-hero, .v42-chart) {
  min-width: 0;
}
:where(h1, h2, h3, b, strong, p, small, span, em) { overflow-wrap: anywhere; }
.page-heading,
.panel,
.action-card,
.player-card,
.participant-row,
.presence-round-card,
.presence-identity,
.presence-answer-card,
.presence-group,
.team-card,
.final-score,
.history-row,
.discipline-case-card,
.court-charge-card,
.court-own-charge,
.court-pix-card,
.court-player-hero,
.v42-chart {
  border-color: var(--v47-line);
  box-shadow: var(--v47-shadow-soft);
}
.page-heading {
  padding: 15px 16px;
  background: linear-gradient(145deg, #fff 0%, #f5f9fb 100%);
  border-color: #d8e5eb;
  box-shadow: var(--v47-shadow-soft);
}
.page-heading h1 { color: #14364c; line-height: 1.1; }
.page-heading p,
.section-head p,
.field > small,
.help-text,
.modal-summary { color: var(--v47-muted); font-size: 11.5px; line-height: 1.5; }
.section-head { margin-top: 20px; margin-bottom: 10px; }
.section-head h2 { color: #17394f; }
.section-kicker { color: var(--v47-blue); }

.btn,
.mini-btn,
.icon-button,
.share-option,
.result-tab,
.nav-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn {
  min-height: 46px;
  padding-inline: 15px;
  color: #244a61;
  border-color: #c7d9e3;
  font-size: 12px;
  line-height: 1.2;
}
.btn.primary {
  color: #fff;
  background: linear-gradient(145deg, #2385e7, var(--v47-blue));
  border-color: var(--v47-blue-dark);
  box-shadow: 0 8px 18px rgba(20, 110, 203, .2), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn:disabled,
.share-option:disabled { opacity: .58; cursor: not-allowed; filter: grayscale(.12); box-shadow: none; }
.mini-btn { min-width: 44px; min-height: 44px; }

:where(button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(20, 110, 203, .3);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
.field { min-width: 0; }
.field label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #284b60;
  font-size: 12.5px;
  line-height: 1.35;
}
.field input,
.field select,
.field textarea {
  min-width: 0;
  min-height: 50px;
  color: #17384d;
  background: #fff;
  border-color: #c8d9e2;
  font-size: 16px;
  line-height: 1.35;
}
.field textarea { min-height: 110px; padding-block: 12px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #7a8e9a; opacity: 1; }
.form-grid { gap: 14px; }
.form-row { gap: 11px; }
.form-error {
  padding: 11px 12px;
  color: #8f2f3b;
  background: #fff0f2;
  border: 1px solid #edc9ce;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.45;
}

.notice,
.connection-bar,
.protected-notice {
  padding: 11px 12px;
  color: var(--v47-copy);
  background: #f4f8fa;
  border-color: var(--v47-line);
}
.notice b { color: #21455c; font-size: 12px; }
.notice span { color: #587080; font-size: 12px; line-height: 1.5; }
.notice.success { color: var(--v47-green); background: #edf9f3; border-color: #c8e8d8; }
.danger-notice { background: #fff1f2; border-color: #efcbd0; }

.modal-backdrop { background: rgba(22, 43, 56, .56); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-card {
  width: min(calc(100% - 16px), 680px);
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  color: var(--v47-ink);
  background: linear-gradient(180deg, #fcfdfd, #f5f9fb);
  border-color: #c5d8e2;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -22px 70px rgba(23, 50, 67, .28);
}
.modal-header {
  position: sticky;
  z-index: 5;
  top: -20px;
  min-height: 62px;
  margin: -20px -18px 17px;
  padding: 10px 18px;
  background: rgba(250, 252, 253, .96);
  border-bottom: 1px solid #dde7ec;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.modal-header h2 { color: #14364c; font-size: 20px; line-height: 1.2; }

.empty-state,
.boot-recovery {
  min-height: 164px;
  padding: 26px 20px;
  color: #24495f;
  background: linear-gradient(145deg, #fff, #f3f8fa);
  border: 1px dashed #bfd3dd;
  box-shadow: var(--v47-shadow-soft);
}
.empty-state h2,
.boot-recovery strong { color: #173a50; }
.empty-state p,
.boot-recovery span { color: var(--v47-muted); font-size: 13px; line-height: 1.55; }
.skeleton-stack { gap: 12px; }
.skeleton,
.skeleton-card-row { border: 1px solid #e0eaef; box-shadow: none; }
.toast { min-height: 48px; padding: 11px 14px; font-size: 12px; line-height: 1.4; }

/* V48 — GOLEIROS ISENTOS + AUDITORIA DA COBRANÇA */
/* Quadra: hierarquia financeira, isenção explícita e correção segura de cobranças canceladas. */
.court-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.court-summary-grid > div {
  min-height: 104px;
  padding: 13px;
  align-content: start;
  gap: 5px;
  background: linear-gradient(145deg, #fff, #f6f9fb);
  border-color: var(--v47-line);
  border-radius: 17px;
  box-shadow: var(--v47-shadow-soft);
}
.court-summary-grid small { color: #516b7b; font-size: 9.5px; letter-spacing: .065em; }
.court-summary-grid b { color: #173c54; font-size: clamp(20px, 4.6vw, 27px); }
.court-summary-grid span { color: #627987; font-size: 10.5px; line-height: 1.4; }
.court-summary-grid .exempt { border-top: 4px solid #6b62b6; }
.court-summary-grid .active { border-top: 4px solid #4389c7; }
.court-admin-actions { margin: 13px 0; gap: 9px; }
.court-admin-actions .btn { flex: 1 1 220px; }

.court-charge-list { gap: 14px; }
.court-charge-card {
  padding: 16px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--v47-shadow);
}
.court-charge-card.open { border-color: #bfd9ed; }
.court-charge-head { gap: 13px; }
.court-charge-card h2 { color: #143a52; font-size: 17px; line-height: 1.25; }
.court-reference-line { color: #45687e; font-size: 11px; }
.court-charge-meta { gap: 8px; }
.court-charge-meta > span {
  min-height: 66px;
  padding: 9px;
  justify-content: center;
  background: #f5f9fb;
  border-color: #dbe6eb;
  border-radius: 13px;
}
.court-charge-meta small { color: #5d7482; font-size: 11px; line-height: 1.3; }
.court-charge-meta b { color: #24485d; font-size: 12px; line-height: 1.3; }
.court-charge-note { color: #526e7e; font-size: 11px; line-height: 1.5; }
.court-progress { min-width: 64px; padding: 9px 10px; border-radius: 14px; }
.court-progress b { font-size: 16px; }
.court-payment-list { margin-top: 14px; gap: 8px; }
.court-payment-row {
  min-height: 64px;
  padding: 9px 10px;
  background: #f8fafb;
  border-color: #dfe8ed;
  border-radius: 15px;
}
.court-payment-row > span:first-child b { color: #24475c; font-size: 12.5px; }
.court-payment-row > span:first-child small { color: #607887; font-size: 12px; }
.court-status { min-height: 32px; font-size: 11px; }
.court-payment-row.exempt { background: linear-gradient(145deg, #f2f0ff, #faf9ff); border-color: #d8d1f2; }
.court-payment-row.exempt > span:first-child b { color: #51458f; }
.court-status.exempt { color: #554793; background: #ece8ff; border: 1px solid #d2c9f3; }
.court-own-charge.exempt { border-left: 4px solid #6b62b6; background: linear-gradient(145deg, #f8f6ff, #fff); }
.court-player-hero.exempt { background: linear-gradient(145deg, #f4f1ff, #fff); }
.court-player-hero.exempt > span { background: #6659ad; }
.court-charge-card footer { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e6edf1; }
.court-charge-actions { gap: 7px; }
.court-charge-actions .btn.text { min-height: 44px; padding-inline: 10px; }
.court-recreate-action { flex: 1 1 220px; justify-content: center; }
.court-recreate-action em {
  padding: 3px 6px;
  color: #0c5aa9;
  background: #fff;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.court-modal-intro,
.court-recommended-note,
.court-picker-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.court-modal-intro {
  padding: 13px;
  color: #214b67;
  background: linear-gradient(145deg, #edf7ff, #f8fbfd);
  border: 1px solid #cde1ef;
  border-radius: 16px;
}
.court-modal-intro.correction { color: #724f0f; background: linear-gradient(145deg, #fff7e7, #fffdfa); border-color: #ead8ac; }
.court-modal-intro > .icon { width: 25px; height: 25px; flex: 0 0 auto; }
.court-modal-intro > div { min-width: 0; display: grid; gap: 3px; }
.court-modal-intro b { font-size: 12.5px; }
.court-modal-intro span { color: inherit; font-size: 11px; line-height: 1.5; }
.court-recommended-note {
  padding: 11px 12px;
  align-items: center;
  background: #f1f8fd;
  border: 1px solid #d2e4ef;
  border-radius: 14px;
}
.recommended-chip {
  min-height: 22px;
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0e61b0;
  background: #e6f2ff;
  border: 1px solid #c8def3;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.court-recommended-note > div { min-width: 0; display: grid; gap: 2px; }
.court-recommended-note b { color: #244a61; font-size: 11.5px; }
.court-recommended-note small { color: #607887; font-size: 10.5px; line-height: 1.4; }
.court-picker-head { align-items: center; justify-content: space-between; }
.court-picker-head > div { min-width: 0; display: grid; gap: 2px; }
.court-picker-head b { color: #24475c; font-size: 12px; }
.court-picker-head small { color: #627a89; font-size: 10.5px; }
.court-selected-count { padding: 6px 8px; color: #155f9f; background: #edf6fd; border-radius: 999px; font-size: 9.5px; font-weight: 900; white-space: nowrap; }
.court-exempt-note {
  min-width: 0;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #554793;
  background: #f2efff;
  border: 1px solid #d8d1f2;
  border-radius: 14px;
  font-size: 10.5px;
  line-height: 1.45;
}
.court-exempt-note > .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.court-exempt-note span { min-width: 0; }
.court-player-picker { max-height: min(330px, 38dvh); padding: 10px; border-color: #cddde5; background: #fbfcfd; }
.court-player-picker label { min-height: 50px; padding: 9px; border: 1px solid #e0e9ed; }
.court-player-picker label:has(input:checked) { background: #edf7ff; border-color: #bddaf0; }
.court-player-picker label.exempt { background: #faf9ff; border-color: #ded8f3; }
.court-player-picker label.exempt:has(input:checked) { background: #f0edff; border-color: #c9c0ee; }
.court-player-picker label.exempt b { color: #554793; }
.court-player-picker b { color: #23465b; font-size: 12.5px; }
.court-player-picker small { color: #657c89; font-size: 12px; }
.court-submit-charge { min-height: 50px; }

.round-share-form { gap: 13px; }
.round-share-warning { padding: 11px 12px; color: #4f6675; background: #f1f6f9; border-color: #d5e2e8; border-radius: 13px; line-height: 1.45; }
.round-share-warning b { color: #24495f; }
.share-option { min-height: 64px; padding: 11px 12px; border-color: #cfdee6; border-radius: 15px; }
.share-option b { color: #23465b; font-size: 12px; }
.share-option small { color: #607786; font-size: 10.5px; line-height: 1.4; }

@media (max-width: 520px) {
  .court-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-charge-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-charge-meta > span:last-child { grid-column: 1 / -1; }
  .court-source-actions { grid-template-columns: 1fr; }
  .court-source-actions .btn { width: 100%; }
}

@media (max-width: 430px) {
  .content { padding-right: max(13px, env(safe-area-inset-right)); padding-left: max(13px, env(safe-area-inset-left)); }
  .page-heading { padding: 13px; gap: 10px; }
  .page-heading h1 { font-size: clamp(25px, 7.4vw, 30px); }
  .page-heading p { font-size: 13px; }
  .modal-card { width: 100%; padding-right: 15px; padding-left: 15px; border-radius: 24px 24px 0 0; }
  .modal-header { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
  .form-row { grid-template-columns: 1fr; }
  .court-heading { align-items: stretch; }
  .court-heading .btn { width: 100%; }
  .court-charge-card { padding: 13px; }
  .court-charge-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .court-payment-row { grid-template-columns: minmax(0, 1fr) auto; }
  .court-payment-actions { grid-column: 1 / -1; justify-self: stretch; }
  .court-payment-actions .mini-btn { flex: 1 1 0; }
  .court-charge-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-charge-actions .btn,
  .court-charge-actions .court-history-lock { width: 100%; min-width: 0; }
  .court-recreate-action { grid-column: 1 / -1; }
  .court-picker-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 350px) {
  .content { padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
  .court-summary-grid { grid-template-columns: 1fr; }
  .court-charge-head { grid-template-columns: 1fr; }
  .court-progress { justify-self: start; }
  .court-charge-meta { grid-template-columns: 1fr; }
  .court-charge-meta > span:last-child { grid-column: auto; }
  .court-charge-actions { grid-template-columns: 1fr; }
  .court-modal-intro,
  .court-recommended-note { align-items: flex-start; }
}

@media (min-width: 721px) {
  .modal-card { margin-bottom: 18px; border-radius: 26px; }
}

@media (prefers-contrast: more) {
  :root { --v47-line: #9eb6c3; --v47-muted: #445f6e; }
  .btn,
  .field input,
  .field select,
  .field textarea { border-width: 2px; }
}

@media (forced-colors: active) {
  .btn,
  .icon-button,
  .nav-item,
  .court-status,
  .recommended-chip { forced-color-adjust: auto; border: 1px solid ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  .modal:not(.hidden) .modal-backdrop,
  .modal:not(.hidden) .modal-card,
  .court-charge-card,
  .share-option { animation: none !important; transition: none !important; transform: none !important; }
}

/* V49 — LISTA FINANCEIRA COMPLETA + PNG */
.share-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.share-actions-grid .share-option {
  min-width: 0;
  min-height: 72px;
  height: 100%;
}
.share-actions-grid .share-option > span {
  display: grid;
  gap: 3px;
}
.share-actions-grid .share-option small {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.png-download-option {
  background: #f7fbfe;
  border-color: #bed9ea;
}
.png-download-option > .icon { color: #146eaa; }
.png-download-option:hover,
.png-download-option:focus-visible {
  background: #edf7fd;
  border-color: #95c5df;
}
.png-download-option[aria-busy="true"] {
  cursor: progress;
}
.round-share-form #roundShareChargeHint {
  display: block;
  min-height: 1.45em;
}

@media (max-width: 520px) {
  .share-actions-grid { grid-template-columns: 1fr; }
  .share-actions-grid .share-option { min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .png-download-option { transition: none !important; }
}

/* V52: o acabamento atual está isolado em theme-v52.css; este arquivo preserva somente a base legada compatível. */


/* V88 — placares compactos sem quebra + destaques de ranking */
.football-scoreboard .placard-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0;min-width:0}
.football-scoreboard .placard-team{min-width:0;display:grid;justify-items:center;align-content:center;gap:3px;padding:10px 8px}
.football-scoreboard .placard-team small{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.18}
.football-scoreboard .placard-team b{font-variant-numeric:tabular-nums}
.football-scoreboard .score-versus{display:grid;place-items:center;min-width:32px;padding:0 5px}
.placard-card.premium-placard footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px}
.placard-meta{min-width:0;overflow-wrap:anywhere}
.placard-bad.premium{max-width:100%;min-width:0}
@media(max-width:430px){.football-scoreboard .placard-team{min-height:92px;padding:10px 6px}.football-scoreboard .placard-team b{font-size:30px}.football-scoreboard .placard-team small{font-size:10px}.placard-card.premium-placard footer{grid-template-columns:minmax(0,1fr)}.placard-bad.premium,.placard-bad.empty.premium{justify-self:start}}

body.theme-v62 .v88-rank-card{position:relative}
body.theme-v62 .v88-rank-card.v88-rank-top{border-color:#cfe4bf;background:linear-gradient(135deg,#fffef8,#f7fff2)}
body.theme-v62 .v88-rank-card.v88-rank-top-1{border-left-color:#1d9b54;box-shadow:0 10px 26px rgba(29,155,84,.12)}
body.theme-v62 .v88-rank-card.v88-rank-top-2{border-left-color:#4d86c9;box-shadow:0 10px 26px rgba(77,134,201,.1)}
body.theme-v62 .v88-rank-card.v88-rank-top-3{border-left-color:#b58b3b;box-shadow:0 10px 26px rgba(181,139,59,.1)}
body.theme-v62 .v88-rank-card.v88-rank-bottom{border-left-color:#cb5a5a;background:linear-gradient(135deg,#fff,#fff4f4)}
body.theme-v62 .v82-rank-position, .bad-rank-position, .captain-rank-position{display:inline-flex;align-items:center;gap:4px;min-width:0}
body.theme-v62 .v88-rank-medal,body.theme-v62 .v88-rank-alert{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;flex:none}
body.theme-v62 .v88-rank-medal .icon{width:12px;height:12px}
body.theme-v62 .v88-rank-medal.top-top-1{background:#e8f8ef;color:#128048}
body.theme-v62 .v88-rank-medal.top-top-2{background:#eef6ff;color:#2e72c2}
body.theme-v62 .v88-rank-medal.top-top-3{background:#fff4de;color:#9b6f11}
body.theme-v62 .v88-rank-alert{background:#ffe4e4;color:#b33030;font-size:11px;font-weight:900}
body.theme-v62 .v88-rank-chip{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 7px;border-radius:999px;font-size:9px;line-height:1.2;font-style:normal;font-weight:900;text-transform:uppercase;vertical-align:middle}
body.theme-v62 .v88-rank-chip.top{background:#eef7e8;color:#2d7d3f}
body.theme-v62 .v88-rank-chip.top.top-2{background:#eef5ff;color:#2e72c2}
body.theme-v62 .v88-rank-chip.top.top-3{background:#fff5e5;color:#a06e12}
body.theme-v62 .v88-rank-chip.bottom{background:#ffe9e9;color:#b74444}
body.theme-v62 .v82-rank-player-info small .v88-rank-chip{display:inline-flex}
.craque-ranking-list > button.v88-rank-top-1,.craque-ranking-list > button.v88-rank-top-2,.craque-ranking-list > button.v88-rank-top-3{border-left-width:3px;border-left-style:solid}
.craque-ranking-list > button.v88-rank-bottom{border-left:3px solid #cb5a5a;background:linear-gradient(135deg,#fff,#fff6f6)}
.v88-goal-quick{display:flex;flex-wrap:wrap;gap:7px;padding:10px 10px 0;align-items:center}
.v88-goal-quick small{font-size:11px;color:#526a81;font-weight:700}
.v88-goal-chip{min-height:34px;padding:6px 10px;border:1px solid #cfe0ef;border-radius:999px;background:#fff;color:#163a60;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.v88-goal-chip .icon{width:14px;height:14px}
.v88-goal-chip:active{transform:translateY(1px)}

/* V99: chamada de presença – compacto, acessível e sem autoplay */
.presence-audio-call{display:grid;gap:10px;margin:12px 0 16px;padding:14px 16px;border:1px solid #c9d8e9;border-radius:16px;background:linear-gradient(125deg,#f5faff,#fff);box-shadow:0 2px 10px #122b4910;min-width:0}
.presence-audio-call-copy{display:flex;gap:12px;align-items:center;min-width:0;color:#173b66}
.presence-audio-call-copy strong{display:block;font-size:1rem;line-height:1.3}
.presence-audio-call-copy p{margin:4px 0 0;font-size:.88rem;line-height:1.35;color:#486079}
.presence-audio-whistle{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:#e4efff;color:#154c89;font-size:23px;font-weight:700}
.presence-audio-player{display:block;width:100%;max-width:100%;min-width:0;height:48px}
.presence-audio-call>small{font-size:.78rem;line-height:1.4;color:#53677b}
@media(max-width:380px){.presence-audio-call{padding:12px;gap:8px}.presence-audio-call-copy{gap:9px}.presence-audio-whistle{flex-basis:34px;height:34px}}