:root {
    --green: #00C853;
    --green-dark: #00963E;
    --green-dim: #00C85322;
    --gold: #FFD600;
    --gold-dim: #FFD60022;
    --red: #FF3B30;
    --bg: #0A0F14;
    --bg2: #111820;
    --bg3: #17202B;
    --bg4: #1E2A38;
    --border: rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.13);
    --text: #F0F4F8;
    --muted: #7A8EA4;
    --accent: #00C853;
    --font-head: 'Bebas Neue', sans-serif;
    --font-cond: 'Barlow Condensed', sans-serif;
    --font: 'Barlow', sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ─── SCREENS ─────────────────────────────── */
  .screen { display: none; min-height: 100vh; flex-direction: column; }
  .screen.active { display: flex; }

  /* ─── AUTH ─────────────────────────────────── */
  #screen-auth {
    background: var(--bg);
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
  }
  .auth-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,200,83,0.18) 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255,214,0,0.08) 0%, transparent 70%);
  }
  .auth-card {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 20px;
    width: 100%; max-width: 420px;
    padding: 2.5rem 2rem;
    display: flex; flex-direction: column; gap: 1.5rem;
  }
  .auth-logo {
    text-align: center;
  }
  .auth-logo .logo-icon {
    width: 64px; height: 64px;
    background: var(--green);
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; margin-bottom: 0.75rem;
  }
  .auth-logo h1 {
    font-family: var(--font-head);
    font-size: 2.5rem; letter-spacing: 2px;
    line-height: 1;
    color: var(--text);
  }
  .auth-logo h1 span { color: var(--green); }
  .auth-logo p { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }

  .auth-tabs { display: flex; background: var(--bg3); border-radius: var(--radius-sm); padding: 4px; gap: 4px; }
  .auth-tab {
    flex: 1; padding: 0.5rem; border-radius: 6px;
    border: none; background: transparent; color: var(--muted);
    font-family: var(--font); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all .2s;
  }
  .auth-tab.active { background: var(--green); color: #000; }

  .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
  .form-group label { font-size: 0.82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
  .form-group input {
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--radius-sm); padding: 0.75rem 1rem;
    color: var(--text); font-family: var(--font); font-size: 0.95rem;
    outline: none; transition: border-color .2s;
  }
  .form-group input:focus { border-color: var(--green); }

  .btn-primary {
    background: var(--green); color: #000;
    border: none; border-radius: var(--radius-sm); padding: 0.85rem 1.5rem;
    font-family: var(--font-cond); font-size: 1rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: background .2s, transform .1s;
    width: 100%;
  }
  .btn-primary:hover { background: var(--green-dark); }
  .btn-primary:active { transform: scale(0.98); }

  .auth-divider { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: 0.8rem; }
  .auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
  }
  .btn-social {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--radius-sm); padding: 0.75rem;
    color: var(--text); font-family: var(--font); font-size: 0.9rem; font-weight: 500;
    cursor: pointer; transition: background .2s;
    width: 100%;
  }
  .btn-social:hover { background: var(--bg4); }

  /* ─── LAYOUT ────────────────────────────────── */
  .app-layout { display: flex; flex-direction: column; height: 100vh; }

  /* ─── HEADER ────────────────────────────────── */
  .app-header {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 0 1.25rem;
    height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    flex-shrink: 0;
  }
  .header-logo {
    font-family: var(--font-head);
    font-size: 1.6rem; letter-spacing: 2px;
    color: var(--text); text-decoration: none;
  }
  .header-logo span { color: var(--green); }

  .header-user {
    display: flex; align-items: center; gap: 0.75rem;
  }
  .user-points {
    display: flex; align-items: center; gap: 0.35rem;
    background: var(--gold-dim); border: 1px solid rgba(255,214,0,0.25);
    border-radius: 999px; padding: 0.3rem 0.75rem;
    font-family: var(--font-cond); font-size: 0.9rem; font-weight: 700; color: var(--gold);
  }
  .user-points .star { font-size: 0.8rem; }
  .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--green); color: #000;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; cursor: pointer;
    flex-shrink: 0;
  }

  /* ─── BOTTOM NAV ─────────────────────────────── */
  .bottom-nav {
    background: var(--bg2); border-top: 1px solid var(--border);
    display: flex; align-items: center;
    height: 62px; flex-shrink: 0;
    position: sticky; bottom: 0; z-index: 100;
  }
  .nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 0.5rem; cursor: pointer;
    color: var(--muted); transition: color .2s;
    border: none; background: transparent; font-family: var(--font);
  }
  .nav-item.active { color: var(--green); }
  .nav-item svg { width: 22px; height: 22px; }
  .nav-item span { font-size: 0.68rem; font-weight: 600; }

  /* ─── MAIN SCROLL ─────────────────────────────── */
  .main-scroll {
    flex: 1; overflow-y: auto;
    padding: 1rem 1rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.25rem;
  }

  /* ─── SECTION HEADER ─────────────────────────── */
  .section-title {
    font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted);
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.6rem;
  }
  .section-title a { color: var(--green); text-decoration: none; font-size: 0.72rem; }

  /* ─── LIVE BANNER ─────────────────────────────── */
  .live-banner {
    background: linear-gradient(135deg, var(--bg3) 0%, #1a2840 100%);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    position: relative; overflow: hidden;
  }
  .live-banner::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
    animation: shimmer 2s infinite linear;
    background-size: 200%;
  }
  @keyframes shimmer { from { background-position: 0% } to { background-position: 200% } }

  .live-tag {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--red); color: #fff;
    border-radius: 4px; padding: 0.18rem 0.55rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 0.85rem;
  }
  .live-tag .dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: pulse 1s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  .match-scoreboard {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .team-info { flex: 1; text-align: center; }
  .team-badge {
    width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin-bottom: 0.4rem;
    background: var(--bg4); border: 2px solid var(--border2);
  }
  .team-name { font-family: var(--font-cond); font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
  .team-abbr { font-size: 0.7rem; color: var(--muted); }

  .score-block { text-align: center; flex-shrink: 0; }
  .score-nums {
    font-family: var(--font-head); font-size: 3.2rem; letter-spacing: 4px;
    line-height: 1; color: var(--text);
  }
  .match-time {
    font-size: 0.75rem; font-weight: 600; color: var(--green);
    margin-top: 0.25rem;
  }
  .match-comp { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }

  .live-actions {
    display: flex; gap: 0.6rem; margin-top: 1rem;
  }
  .btn-sm {
    flex: 1; padding: 0.55rem; border-radius: var(--radius-sm);
    font-family: var(--font-cond); font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
    border: none; transition: all .2s;
  }
  .btn-sm.outlined {
    background: transparent; border: 1px solid var(--border2); color: var(--text);
  }
  .btn-sm.outlined:hover { background: var(--bg4); }
  .btn-sm.filled { background: var(--green); color: #000; }
  .btn-sm.filled:hover { background: var(--green-dark); }

  /* ─── GAME CARDS ─────────────────────────────── */
  .game-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; cursor: pointer;
    transition: border-color .2s, transform .15s;
  }
  .game-card:hover { border-color: var(--border2); transform: translateY(-1px); }

  .game-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: var(--bg3); font-size: 0.72rem; color: var(--muted);
  }
  .game-card-header .badge {
    padding: 0.18rem 0.55rem; border-radius: 4px;
    font-weight: 700; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase;
  }
  .badge-live { background: rgba(255,59,48,0.18); color: var(--red); }
  .badge-soon { background: rgba(0,200,83,0.12); color: var(--green); }
  .badge-done { background: rgba(255,255,255,0.05); color: var(--muted); }

  .game-card-body {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem;
  }
  .gc-team { flex: 1; display: flex; align-items: center; gap: 0.6rem; }
  .gc-team.right { flex-direction: row-reverse; text-align: right; }
  .gc-badge { font-size: 1.4rem; }
  .gc-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
  .gc-rec { font-size: 0.72rem; color: var(--muted); }

  .gc-score {
    text-align: center; flex-shrink: 0; padding: 0 0.75rem;
    font-family: var(--font-head); font-size: 1.8rem; letter-spacing: 3px;
  }
  .gc-score.pending { font-size: 1rem; font-family: var(--font); color: var(--muted); }

  .game-card-footer {
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 0.5rem;
  }
  .palpite-inp {
    flex: 1; display: flex; align-items: center; gap: 0.5rem;
  }
  .palpite-inp span { font-size: 0.75rem; color: var(--muted); }
  .palpite-score {
    display: flex; align-items: center; gap: 0.4rem;
  }
  .palpite-num {
    width: 32px; height: 32px; border-radius: 6px;
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text); font-weight: 700; font-size: 0.9rem;
    text-align: center; line-height: 32px; cursor: pointer;
    user-select: none; transition: background .15s;
  }
  .palpite-num:hover { background: var(--bg4); }
  .palpite-divider { color: var(--muted); font-weight: 700; }
  .btn-confirm {
    padding: 0.4rem 0.9rem; border-radius: 6px;
    background: var(--green); color: #000;
    border: none; font-family: var(--font-cond);
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    transition: background .2s;
  }
  .btn-confirm:hover { background: var(--green-dark); }
  .palpite-confirmed { font-size: 0.78rem; color: var(--green); font-weight: 600; }

  /* ─── RANKING ─────────────────────────────────── */
  .rank-podium {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 0.75rem; padding: 1.25rem 0 0;
  }
  .podium-item { flex: 1; max-width: 110px; text-align: center; }
  .podium-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; margin: 0 auto 0.35rem;
    border: 2px solid;
  }
  .podium-item:nth-child(1) .podium-avatar { border-color: var(--muted); }
  .podium-item:nth-child(2) .podium-avatar { border-color: var(--gold); width: 60px; height: 60px; font-size: 1.2rem; }
  .podium-item:nth-child(3) .podium-avatar { border-color: #cd7f32; }
  .podium-name { font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
  .podium-pts { font-size: 0.72rem; color: var(--muted); }
  .podium-rank { font-size: 1rem; }

  .rank-list { display: flex; flex-direction: column; gap: 0.5rem; }
  .rank-row {
    display: flex; align-items: center; gap: 0.85rem;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.75rem 0.9rem;
  }
  .rank-row.me { border-color: var(--green); background: var(--green-dim); }
  .rank-num {
    font-family: var(--font-cond); font-size: 0.85rem;
    font-weight: 700; color: var(--muted); width: 22px; text-align: center; flex-shrink: 0;
  }
  .rank-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.82rem;
  }
  .rank-info { flex: 1; }
  .rank-name { font-weight: 600; font-size: 0.9rem; }
  .rank-sub { font-size: 0.72rem; color: var(--muted); }
  .rank-pts {
    font-family: var(--font-cond); font-size: 1rem; font-weight: 700; color: var(--gold);
    flex-shrink: 0;
  }
  .rank-medal { font-size: 1rem; }

  /* ─── BATE-PAPO ────────────────────────────── */
  .poll-card {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem;
  }
  .poll-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.85rem; line-height: 1.4; }
  .poll-option {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px;
    padding: 0.65rem 0.85rem; margin-bottom: 0.5rem; cursor: pointer;
    transition: border-color .2s; position: relative; overflow: hidden;
  }
  .poll-option.selected { border-color: var(--green); }
  .poll-option .poll-bar {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--green-dim); transition: width 0.5s ease;
    z-index: 0;
  }
  .poll-option > * { position: relative; z-index: 1; }
  .poll-pct { font-family: var(--font-cond); font-weight: 700; font-size: 0.85rem; color: var(--green); margin-left: auto; min-width: 34px; text-align: right; }
  .poll-badge-em { font-size: 1.1rem; }

  .comment-card {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem;
  }
  .comment-input-area {
    display: flex; gap: 0.75rem; margin-bottom: 1rem;
  }
  .comment-input-area .avatar { flex-shrink: 0; }
  .comment-input {
    flex: 1; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 999px; padding: 0.5rem 1rem;
    color: var(--text); font-family: var(--font); font-size: 0.88rem;
    outline: none; transition: border-color .2s;
  }
  .comment-input:focus { border-color: var(--green); }

  .comment { display: flex; gap: 0.75rem; margin-bottom: 0.85rem; }
  .comment-body { flex: 1; }
  .comment-meta { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.2rem; }
  .comment-name { font-weight: 700; font-size: 0.85rem; }
  .comment-time { font-size: 0.72rem; color: var(--muted); }
  .comment-text { font-size: 0.88rem; line-height: 1.5; color: var(--text); }
  .comment-actions { display: flex; gap: 1rem; margin-top: 0.35rem; }
  .comment-action { font-size: 0.72rem; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 0.25rem; }
  .comment-action:hover { color: var(--green); }

  /* ─── MATCH DETAIL ─────────────────────────── */
  .match-detail-header {
    background: var(--bg2); border-bottom: 1px solid var(--border);
    padding: 1.25rem;
  }
  .back-btn {
    display: flex; align-items: center; gap: 0.4rem;
    color: var(--muted); font-size: 0.85rem; cursor: pointer;
    border: none; background: transparent; font-family: var(--font);
    margin-bottom: 1rem; padding: 0;
  }
  .back-btn:hover { color: var(--text); }

  .stats-bar {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem;
  }
  .stat-row { margin-bottom: 0.85rem; }
  .stat-row:last-child { margin-bottom: 0; }
  .stat-label {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: var(--muted); margin-bottom: 0.3rem;
  }
  .stat-label span { font-weight: 700; color: var(--text); }
  .stat-track { background: var(--bg4); border-radius: 999px; height: 6px; overflow: hidden; display: flex; }
  .stat-fill-left { background: var(--green); height: 100%; border-radius: 999px 0 0 999px; transition: width .5s; }
  .stat-fill-right { background: #4481D5; height: 100%; border-radius: 0 999px 999px 0; transition: width .5s; }

  .player-list { display: flex; flex-direction: column; gap: 0.5rem; }
  .player-row {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
  }
  .player-num { font-family: var(--font-cond); font-weight: 700; color: var(--muted); width: 20px; font-size: 0.85rem; }
  .player-info { flex: 1; }
  .player-name { font-weight: 600; font-size: 0.9rem; }
  .player-pos { font-size: 0.72rem; color: var(--muted); }
  .player-vote {
    padding: 0.35rem 0.85rem; border-radius: 6px;
    font-family: var(--font-cond); font-size: 0.8rem; font-weight: 700;
    cursor: pointer; transition: all .2s; border: 1px solid var(--border2);
    background: transparent; color: var(--muted);
  }
  .player-vote.voted { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
  .player-vote:not(.voted):hover { border-color: var(--border2); background: var(--bg4); color: var(--text); }

  /* ─── PERFIL ─────────────────────────────────── */
  .profile-hero {
    background: var(--bg2); border-bottom: 1px solid var(--border);
    padding: 2rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    position: relative;
  }
  .profile-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 80px;
    background: linear-gradient(135deg, rgba(0,200,83,0.15), rgba(255,214,0,0.08));
  }
  .profile-avatar {
    position: relative; z-index: 1;
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--green); color: #000;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.8rem;
    border: 3px solid var(--bg);
  }
  .profile-name { font-family: var(--font-cond); font-size: 1.4rem; font-weight: 700; }
  .profile-level { font-size: 0.8rem; color: var(--muted); }
  .profile-level strong { color: var(--gold); }

  .stats-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  }
  .stat-card {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.85rem 0.5rem; text-align: center;
  }
  .stat-card .num { font-family: var(--font-head); font-size: 1.6rem; line-height: 1; }
  .stat-card .lbl { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }

  .reward-card {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; display: flex; align-items: center; gap: 1rem;
    cursor: pointer; transition: border-color .2s;
  }
  .reward-card:hover { border-color: var(--border2); }
  .reward-card.locked { opacity: 0.5; cursor: default; }
  .reward-icon {
    width: 48px; height: 48px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
  }
  .reward-info { flex: 1; }
  .reward-name { font-weight: 700; font-size: 0.9rem; }
  .reward-desc { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
  .reward-req {
    font-size: 0.75rem; font-weight: 700;
    color: var(--gold); font-family: var(--font-cond);
    flex-shrink: 0; text-align: right;
  }
  .reward-card:not(.locked) .reward-req { color: var(--green); }

  /* ─── TABS ─────────────────────────────────────── */
  .tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0; padding: 0.75rem 1.25rem;
    border-bottom: 2px solid transparent; color: var(--muted);
    font-family: var(--font-cond); font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
    transition: color .2s, border-color .2s; background: none; border-left: none; border-right: none; border-top: none;
  }
  .tab.active { color: var(--green); border-bottom-color: var(--green); }



  /* ─── BATE-PAPO GERAL ───────────────────────────── */
  .chat-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: calc(100vh - 155px);
  }
  .chat-info {
    background: var(--green-dim);
    border: 1px solid rgba(0,200,83,0.22);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font-size: 0.86rem;
    line-height: 1.45;
  }
  .chat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 520px;
  }
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 58vh;
  }
  .chat-message {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
  }
  .chat-message.mine { flex-direction: row-reverse; }
  .chat-bubble {
    max-width: min(78%, 620px);
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 14px;
    padding: 0.65rem 0.8rem;
  }
  .chat-message.mine .chat-bubble {
    background: var(--green-dim);
    border-color: rgba(0,200,83,0.28);
  }
  .chat-meta {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    color: var(--muted);
  }
  .chat-name { color: var(--text); font-weight: 700; }
  .chat-text { font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
  .chat-form {
    border-top: 1px solid var(--border);
    padding: 0.8rem;
    display: flex;
    gap: 0.6rem;
    background: var(--bg2);
  }
  .chat-form input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 999px;
    color: var(--text);
    padding: 0.75rem 1rem;
    outline: none;
    font-family: var(--font);
  }
  .chat-form input:focus { border-color: var(--green); }
  .chat-send {
    width: auto;
    padding-inline: 1.25rem;
    white-space: nowrap;
  }

  /* ─── TOAST ─────────────────────────────────────── */
  #toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--bg3); border: 1px solid var(--green); border-radius: 999px;
    padding: 0.6rem 1.25rem; font-size: 0.88rem; font-weight: 600; color: var(--green);
    opacity: 0; transition: all .3s; z-index: 9999; white-space: nowrap;
    pointer-events: none;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ─── UTILITIES ─────────────────────────────────── */
  .chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.22rem 0.65rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
  }
  .chip-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,200,83,0.2); }
  .chip-gold { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(255,214,0,0.2); }
  .chip-red { background: rgba(255,59,48,0.12); color: var(--red); border: 1px solid rgba(255,59,48,0.2); }

  .empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); font-size: 0.9rem; }
  .empty .empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }

  .divider { height: 1px; background: var(--border); }

  @media (min-width: 600px) {
    .main-scroll { padding: 1.5rem; width: 100%; max-width: 760px; margin: 0 auto; }
    .app-header { padding: 0 2rem; }
    .auth-card { max-width: 460px; }
  }

  @media (min-width: 980px) {
    .app-layout { max-width: 1180px; margin: 0 auto; height: 100vh; }
    .main-scroll { max-width: 1100px; padding: 2rem; }
    .live-banner, .stats-bar, .poll-card, .comment-card, .chat-card { box-shadow: 0 18px 45px rgba(0,0,0,0.18); }
    .bottom-nav { border: 1px solid var(--border); border-radius: 18px; height: 76px; margin: 0 2rem 1.25rem; position: sticky; bottom: 1rem; }
    .nav-item span { font-size: 0.78rem; }
    .game-card-body { padding: 1.1rem 1.25rem; }
    .chat-messages { max-height: 62vh; }
  }

  @media (max-width: 430px) {
    .auth-card { padding: 2rem 1.25rem; }
    .app-header { padding: 0 0.85rem; }
    .header-logo { font-size: 1.35rem; }
    .user-points { font-size: 0.78rem; padding: 0.25rem 0.55rem; }
    .main-scroll { padding: 0.85rem 0.75rem 1.2rem; }
    .score-nums { font-size: 2.35rem; letter-spacing: 2px; }
    .match-scoreboard { gap: 0.45rem; }
    .team-badge { width: 44px; height: 44px; font-size: 1.25rem; }
    .game-card-body { gap: 0.4rem; padding: 0.75rem; }
    .gc-team { gap: 0.35rem; }
    .gc-name { font-size: 0.8rem; }
    .gc-score { padding: 0 0.35rem; font-size: 1.45rem; }
    .palpite-inp { flex-direction: column; align-items: flex-start; }
    .game-card-footer { flex-wrap: wrap; }
    .bottom-nav { height: 58px; }
    .nav-item svg { width: 20px; height: 20px; }
    .nav-item span { font-size: 0.6rem; }
    .chat-card { min-height: calc(100vh - 220px); }
    .chat-messages { max-height: 52vh; padding: 0.75rem; }
    .chat-bubble { max-width: 86%; }
    .chat-form { padding: 0.65rem; gap: 0.45rem; }
    .chat-send { padding-inline: 0.85rem; }
  }


/* ─── HOME MOBILE REDESIGN ───────────────────── */
body {
  background:
    radial-gradient(circle at top center, rgba(0,200,83,0.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,214,0,0.08), transparent 20%),
    var(--bg);
}

.app-layout-home {
  position: relative;
}

.app-header-home {
  background: rgba(17,24,32,0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.home-scroll {
  padding-top: 1rem;
  padding-bottom: 7.2rem;
}

.home-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(18,30,47,0.94), rgba(10,15,20,0.96)),
    linear-gradient(135deg, rgba(0,200,83,0.10), rgba(255,214,0,0.06));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 1.15rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.26);
}
.home-hero::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,83,0.18), transparent 70%);
}
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.02) 55%, transparent 100%);
  pointer-events: none;
}
.home-hero > * { position: relative; z-index: 1; }
.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0,200,83,0.13);
  color: #74ffb0;
  border: 1px solid rgba(0,200,83,0.18);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.home-hero-title {
  font-family: var(--font-cond);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: 0.2px;
  margin-bottom: 0.75rem;
}
.home-hero-text {
  color: #b3c1cf;
  font-size: 0.92rem;
  line-height: 1.55;
}
.home-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.hq-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 0.8rem 0.65rem;
  text-align: center;
}
.hq-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.55rem;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--text);
}
.hq-stat span {
  display: block;
  color: var(--muted);
  margin-top: 0.2rem;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.home-featured-wrap,
.home-shortcuts-wrap,
.home-upcoming-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.home-featured-card {
  border-radius: 24px;
  padding: 1rem;
  background:
    radial-gradient(circle at top left, rgba(0,200,83,0.16), transparent 30%),
    linear-gradient(145deg, #132034 0%, #0f1824 48%, #121b27 100%);
  box-shadow: 0 20px 45px rgba(0,0,0,0.28);
}
.home-featured-card::before {
  height: 3px;
}
.featured-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
}
.featured-scoreboard {
  gap: 0.4rem;
}
.featured-scoreboard .team-badge {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-cond);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.featured-scoreboard .team-name {
  font-size: 0.95rem;
}
.featured-scoreboard .score-nums {
  font-size: clamp(2.2rem, 8vw, 3rem);
  letter-spacing: 2px;
}
.featured-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.95rem;
}
.featured-meta-pill {
  flex: 1 1 140px;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c6d3df;
  border-radius: 999px;
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.shortcut-card {
  background: linear-gradient(180deg, rgba(21,32,46,0.96), rgba(15,24,36,0.98));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .2s ease;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.shortcut-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,200,83,0.22);
}
.shortcut-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(0,200,83,0.11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.shortcut-title {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.shortcut-text {
  color: var(--muted);
  font-size: 0.76rem;
}

.home-mini-note {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #9eb0c2;
  border-radius: 16px;
  padding: 0.85rem 0.95rem;
  font-size: 0.78rem;
  line-height: 1.45;
}
.home-games-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.game-card.compact-home {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(0,0,0,0.18);
}
.game-card.compact-home .game-card-header {
  padding: 0.7rem 0.85rem;
  gap: 0.4rem;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(29,42,59,0.95), rgba(22,33,45,0.95));
}
.game-card.compact-home .game-card-body {
  padding: 0.95rem 0.85rem 0.8rem;
}
.game-card.compact-home .gc-team {
  min-width: 0;
}
.game-card.compact-home .gc-name {
  font-size: 0.98rem;
}
.game-card.compact-home .gc-rec {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card.compact-home .gc-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cond);
  font-size: 0.82rem;
  font-weight: 700;
  color: #dce5ee;
  flex-shrink: 0;
}
.game-card.compact-home .gc-score {
  font-size: 1.45rem;
  letter-spacing: 1px;
  padding: 0 0.45rem;
}
.home-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0 0.85rem 0.8rem;
}
.home-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  color: #aebccd;
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 0.36rem 0.68rem;
}
.game-card.compact-home .game-card-footer {
  padding: 0.8rem 0.85rem 0.9rem;
  gap: 0.8rem;
  align-items: flex-start;
  flex-direction: column;
}
.game-card.compact-home .palpite-inp {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.game-card.compact-home .palpite-inp span {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.game-card.compact-home .palpite-score {
  gap: 0.3rem;
}
.game-card.compact-home .palpite-num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 0.84rem;
}
.game-card.compact-home .btn-confirm {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
}

.bottom-nav {
  background: rgba(17,24,32,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 24px;
  height: 74px;
  margin: 0 0.9rem 0.9rem;
  position: sticky;
  bottom: 0.8rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.32);
}
.nav-item {
  gap: 4px;
}
.nav-item span {
  font-size: 0.65rem;
}
.nav-item.active {
  color: var(--green);
}

@media (min-width: 600px) {
  .home-scroll {
    max-width: 760px;
  }
}

@media (min-width: 980px) {
  .home-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bottom-nav {
    margin: 0 2rem 1.25rem;
  }
}

@media (max-width: 430px) {
  .home-scroll {
    padding-bottom: 6.7rem;
  }
  .home-hero {
    border-radius: 22px;
    padding: 1rem;
  }
  .home-hero-title {
    font-size: 1.45rem;
  }
  .home-hero-text {
    font-size: 0.86rem;
  }
  .hq-stat {
    border-radius: 16px;
    padding: 0.72rem 0.45rem;
  }
  .hq-stat strong {
    font-size: 1.35rem;
  }
  .home-featured-card {
    border-radius: 22px;
    padding: 0.9rem;
  }
  .featured-head-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .featured-scoreboard {
    align-items: center;
  }
  .featured-scoreboard .team-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 0.82rem;
  }
  .featured-scoreboard .team-name {
    font-size: 0.84rem;
  }
  .featured-scoreboard .score-nums {
    font-size: 2rem;
  }
  .home-shortcuts {
    gap: 0.65rem;
  }
  .shortcut-card {
    border-radius: 18px;
    padding: 0.8rem;
  }
  .shortcut-title {
    font-size: 0.92rem;
  }
  .home-card-meta {
    padding-bottom: 0.7rem;
  }
  .game-card.compact-home .palpite-inp {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .game-card.compact-home .btn-confirm {
    width: 100%;
  }
  .bottom-nav {
    margin: 0 0.6rem 0.6rem;
    height: 70px;
    border-radius: 22px;
  }
}

/* ─── PREMIUM MOBILE PATCH: FLAGS, DETAILS, WINNER PICKS ───────────── */
.flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.flag-badge,
.featured-scoreboard .team-badge,
.flag-large,
.mini-flag {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
}
.featured-scoreboard .team-badge span,
.flag-badge span,
.flag-large span {
  font-family: var(--font-cond);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .8px;
}
.home-hero {
  padding: .95rem 1rem;
}
.home-hero-title {
  max-width: 620px;
}
.home-featured-card,
.premium-game-card,
.shortcut-card,
.real-data-card,
.lineup-card,
.premium-poll {
  border-color: rgba(130, 170, 210, .14) !important;
}
.premium-game-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(0,200,83,.08), transparent 38%),
    linear-gradient(180deg, rgba(18,29,43,.97), rgba(13,21,31,.99));
}
.game-card.compact-home .gc-badge,
.premium-game-card .gc-badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.22);
}
.winner-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.winner-label {
  font-family: var(--font-cond);
  color: #8ea7c0;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: .76rem;
}
.winner-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.winner-options button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #d9e5ef;
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  padding: .45rem .35rem;
  cursor: pointer;
  transition: transform .15s, border-color .2s, background .2s;
}
.winner-options button:hover,
.winner-options button.selected {
  border-color: rgba(0,200,83,.58);
  background: rgba(0,200,83,.14);
  color: #68ffa8;
}
.winner-confirm {
  width: 100%;
  border-radius: 12px;
  min-height: 42px;
}
.winner-pick.compact .winner-options button {
  min-height: 38px;
  font-size: .72rem;
}
.match-topbar {
  background: rgba(17,24,32,.86);
  backdrop-filter: blur(16px);
}
.match-detail-dynamic {
  flex-shrink: 0;
}
.match-hero-premium {
  margin: 0;
  padding: 1rem 1rem 1.05rem;
  background:
    radial-gradient(circle at top left, rgba(0,200,83,.15), transparent 38%),
    radial-gradient(circle at bottom right, rgba(255,214,0,.08), transparent 32%),
    linear-gradient(155deg, #142238 0%, #0d1624 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 50px rgba(0,0,0,.28);
}
.match-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.live-tag.no-pulse {
  background: rgba(0,200,83,.16);
  border: 1px solid rgba(0,200,83,.25);
  color: #66ff9f;
}
.match-venue {
  color: #9fb2c7;
  font-size: .78rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-scoreboard .team-badge.flag-large {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: .5rem;
}
.detail-scoreboard .team-name {
  font-size: .98rem;
}
.detail-scoreboard .score-nums {
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  letter-spacing: 2px;
}
.detail-pick-box {
  margin-top: 1rem;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: .85rem;
}
.match-tabs {
  background: rgba(10,15,20,.92);
  position: sticky;
  top: 60px;
  z-index: 80;
}
.match-main-scroll {
  padding-bottom: 2rem;
}
.real-data-card {
  background:
    linear-gradient(180deg, rgba(18,29,43,.96), rgba(13,21,31,.98));
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.15rem;
  box-shadow: 0 16px 35px rgba(0,0,0,.18);
}
.real-data-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(0,200,83,.12);
  margin-bottom: .85rem;
  font-size: 1.25rem;
}
.real-data-card h3 {
  font-family: var(--font-cond);
  font-size: 1.2rem;
  margin-bottom: .45rem;
}
.real-data-card p,
.poll-subtitle,
.data-warning {
  color: #9fb2c7;
  line-height: 1.5;
  font-size: .86rem;
}
.real-data-grid {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
.real-data-grid span,
.data-warning {
  display: block;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: .72rem .85rem;
}
.lineup-grid {
  display: grid;
  gap: .85rem;
}
.lineup-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .95rem;
}
.lineup-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-cond);
  font-weight: 800;
  letter-spacing: .7px;
  margin-bottom: .8rem;
}
.mini-flag {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.compact-info {
  margin-bottom: .85rem;
}
.community-vote-list {
  gap: .65rem;
}
.vote-row,
.live-poll-option {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  padding: .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
}
.vote-row strong,
.live-poll-option .poll-pct {
  color: #69ffa6;
  z-index: 2;
}
.vote-bar,
.live-poll-option .poll-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.05);
}
.vote-bar i,
.live-poll-option .poll-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #93ff54);
}
.premium-poll {
  background: var(--bg2);
}
.premium-poll h3 {
  margin-bottom: .25rem;
}
.premium-poll .poll-subtitle {
  margin-bottom: .85rem;
}

@media (max-width: 430px) {
  .winner-options {
    grid-template-columns: 1fr;
  }
  .winner-pick.compact .winner-options {
    grid-template-columns: 1fr;
  }
  .detail-scoreboard .team-badge.flag-large {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }
  .match-venue {
    max-width: 46%;
  }
  .game-card.compact-home .game-card-footer,
  .premium-game-card .game-card-footer {
    padding: .8rem .85rem .95rem;
  }
}

@media (min-width: 720px) {
  .lineup-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.timeline-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.timeline-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: .6rem;
  align-items: center;
  font-size: .86rem;
  color: var(--text);
}
.timeline-row span {
  color: var(--green);
  font-family: var(--font-cond);
  font-weight: 800;
}
.timeline-row small {
  color: var(--muted);
  font-size: .75rem;
}

/* ─── PATCH: RANKING LIMPO E ELENCOS COMPLETOS ───────────── */
.rank-clean-card,
.rank-list-card {
  background: linear-gradient(180deg, rgba(18,29,43,.96), rgba(13,21,31,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 1.1rem;
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
}
.rank-clean-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: rgba(0,200,83,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: .85rem;
}
.rank-clean-card h2 {
  font-family: var(--font-cond);
  font-size: 1.45rem;
  margin-bottom: .45rem;
}
.rank-clean-card p {
  color: #9fb2c7;
  line-height: 1.5;
  font-size: .9rem;
}
.rank-rules {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
.rank-rules span {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: .7rem .85rem;
  color: #d7e5f0;
  font-size: .82rem;
}
.lineup-card,
.community-vote-list {
  overflow: visible !important;
  max-height: none !important;
}
.lineup-card .player-list,
.community-vote-list.player-list {
  max-height: none !important;
  overflow: visible !important;
}
.lineup-card .player-row {
  min-height: 52px;
}
.vote-row span {
  position: relative;
  z-index: 2;
  padding-right: .6rem;
  font-weight: 700;
}
.vote-row strong {
  min-width: 56px;
  text-align: right;
}
@media (min-width: 720px) {
  .lineup-card .player-list,
  .community-vote-list {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ─── PATCH FINAL: RESPONSIVO, FILTROS E DADOS ZERADOS ───────────── */
.games-list-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.filter-empty {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
}
.stats-note {
  margin-bottom: 1rem;
}
.zero-track {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.04);
}
.zero-stat .stat-label span {
  color: #dbe7f4;
}
.vote-total-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: .75rem;
  border-radius: 999px;
  border: 1px solid rgba(0,200,83,.18);
  background: rgba(0,200,83,.1);
  color: var(--green);
  padding: .38rem .72rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2px;
}
.vote-row.no-votes strong,
.live-poll-option.no-votes .poll-pct {
  color: #8fa4ba;
}
.vote-row.no-votes .vote-bar i,
.live-poll-option.no-votes .poll-bar {
  width: 0 !important;
}
.match-main-scroll {
  padding-bottom: 2rem;
}
.lineup-grid {
  width: 100%;
  min-width: 0;
}
.lineup-card,
.player-row,
.vote-row,
.live-poll-option,
.premium-game-card,
.home-featured-card,
.match-hero-premium,
.stats-bar,
.timeline-card {
  min-width: 0;
}
.player-info,
.rank-info,
.gc-team > div:last-child {
  min-width: 0;
}
.player-name,
.gc-name,
.lineup-title,
.vote-row span {
  overflow-wrap: anywhere;
}
.winner-options {
  min-width: 0;
}
.winner-options button {
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

@media (max-width: 620px) {
  body {
    overflow-x: hidden;
  }
  .app-layout {
    width: 100%;
    max-width: 100%;
  }
  .app-header {
    min-height: 58px;
    height: auto;
    padding: .72rem .95rem;
  }
  .header-logo {
    font-size: 1.45rem;
  }
  .main-scroll {
    width: 100%;
    max-width: 100%;
    padding-left: .86rem;
    padding-right: .86rem;
  }
  .tabs {
    padding: 0 .45rem;
    gap: .25rem;
    overflow-x: auto;
    background: rgba(10,15,20,.96);
  }
  .tab {
    padding: .82rem .72rem;
    font-size: .78rem;
    white-space: nowrap;
  }
  .premium-game-card .game-card-header,
  .game-card.compact-home .game-card-header {
    align-items: flex-start;
  }
  .premium-game-card .game-card-header > span:first-child,
  .game-card.compact-home .game-card-header > span:first-child {
    max-width: 100%;
    line-height: 1.35;
  }
  .game-card-body {
    gap: .45rem;
  }
  .gc-team {
    min-width: 0;
    gap: .45rem;
  }
  .gc-name {
    font-size: .86rem;
  }
  .gc-rec {
    font-size: .68rem;
  }
  .gc-score {
    font-size: 1.22rem;
    letter-spacing: 1px;
    padding: 0 .25rem;
  }
  .flag-badge,
  .gc-badge.flag-badge {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    flex: 0 0 34px;
  }
  .home-card-meta {
    gap: .4rem;
  }
  .home-card-meta span {
    max-width: 100%;
    font-size: .68rem;
  }
  .winner-pick,
  .winner-pick.compact {
    width: 100%;
  }
  .winner-options {
    grid-template-columns: 1fr;
  }
  .winner-options button {
    min-height: 40px;
  }
  .winner-confirm {
    width: 100%;
  }
  .match-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
  }
  .match-detail-dynamic {
    width: 100%;
  }
  .match-hero-premium {
    border-radius: 0 0 24px 24px;
    padding: 1rem .9rem;
  }
  .match-hero-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .match-venue {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }
  .detail-scoreboard {
    gap: .45rem;
    align-items: flex-start;
  }
  .detail-scoreboard .team-info {
    min-width: 0;
  }
  .detail-scoreboard .team-badge.flag-large {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }
  .detail-scoreboard .team-name {
    font-size: .86rem;
    overflow-wrap: anywhere;
  }
  .detail-scoreboard .score-nums {
    font-size: 2.05rem;
    letter-spacing: 1px;
  }
  .detail-pick-box .winner-options {
    grid-template-columns: 1fr;
  }
  .match-main-scroll {
    padding: 1rem .86rem 2rem;
  }
  .stats-bar,
  .timeline-card,
  .lineup-card,
  .premium-poll,
  .real-data-card {
    border-radius: 18px;
    padding: .9rem;
  }
  .stat-label {
    font-size: .76rem;
  }
  .timeline-row {
    grid-template-columns: 34px 1fr;
  }
  .timeline-row small {
    grid-column: 2;
  }
  .lineup-grid {
    grid-template-columns: 1fr !important;
    gap: .85rem;
  }
  .lineup-card .player-row {
    align-items: flex-start;
    padding: .72rem;
  }
  .community-vote-list {
    gap: .55rem;
  }
  .vote-row {
    grid-template-columns: 1fr;
    gap: .45rem;
    align-items: flex-start;
  }
  .vote-row strong {
    min-width: 0;
    text-align: left;
    color: var(--green);
  }
  .vote-bar {
    width: 100%;
  }
  .live-poll-option {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: .35rem;
  }
  .live-poll-option .poll-pct {
    margin-left: 0;
    text-align: left;
  }
  .rank-row {
    align-items: flex-start;
  }
  .bottom-nav {
    left: 0;
    right: 0;
  }
}

@media (max-width: 380px) {
  .main-scroll,
  .match-main-scroll {
    padding-left: .7rem;
    padding-right: .7rem;
  }
  .home-hero-title {
    font-size: 1.3rem;
  }
  .detail-scoreboard .team-badge.flag-large {
    width: 48px;
    height: 48px;
  }
  .detail-scoreboard .score-nums {
    font-size: 1.7rem;
  }
  .team-abbr,
  .match-comp {
    font-size: .66rem;
  }
}


/* ─── FINAL RESPONSIVE + VOTE LOCKS ───────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
.screen, .app-layout { width: 100%; }
.app-layout { max-width: 1180px; margin-inline: auto; }
.main-scroll { width: 100%; box-sizing: border-box; }
button:disabled { cursor: not-allowed; opacity: .72; }
.winner-pick.locked { width: 100%; }
.winner-locked-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: rgba(0,200,83,.10);
  border: 1px solid rgba(0,200,83,.22);
  color: var(--green);
  border-radius: 12px;
  padding: .8rem .95rem;
  font-weight: 800;
}
.winner-locked-box small { color: var(--muted); font-weight: 600; line-height: 1.35; }
.vote-row.user-voted, .poll-option.user-voted {
  border-color: rgba(0,200,83,.45) !important;
  background: rgba(0,200,83,.10) !important;
}
.vote-row:disabled, .poll-option:disabled { opacity: 1; }
.games-list-wrap { display: grid; gap: 1rem; }
.games-list-wrap > .section-title, .games-list-wrap > .empty { grid-column: 1 / -1; }
.rank-row, .reward-card, .player-row, .chat-message, .game-card { min-width: 0; }
.rank-info, .reward-info, .player-info, .gc-team > div { min-width: 0; }
.rank-name, .reward-name, .player-name, .gc-name { overflow-wrap: anywhere; }

@media (min-width: 900px) {
  #screen-jogos .games-list-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-jogos .premium-game-card { height: 100%; }
  #screen-jogos .game-card-footer { margin-top: auto; }
  .lineup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .app-header { padding-inline: .85rem; gap: .7rem; }
  .header-logo { font-size: 1.4rem; }
  .header-user { gap: .45rem; }
  .main-scroll { padding-inline: .78rem; }
  .game-card-header { align-items: flex-start; gap: .45rem; flex-direction: column; }
  .game-card-body { align-items: stretch; gap: .85rem; }
  .premium-game-card .game-card-body { flex-direction: column; }
  .premium-game-card .gc-team, .premium-game-card .gc-team.right { flex-direction: row; text-align: left; justify-content: flex-start; width: 100%; }
  .premium-game-card .gc-score { align-self: center; padding: .25rem .8rem; }
  .winner-options { grid-template-columns: 1fr; width: 100%; }
  .winner-options button { min-height: 42px; white-space: normal; }
  .winner-confirm { width: 100%; min-height: 42px; }
  .home-card-meta, .featured-meta-row { flex-direction: column; }
  .featured-meta-pill, .home-card-meta span { width: 100%; }
  .detail-scoreboard { gap: .55rem; }
  .detail-scoreboard .team-info { min-width: 0; }
  .detail-scoreboard .team-badge { width: 50px; height: 50px; }
  .detail-scoreboard .score-nums { font-size: 2rem; letter-spacing: 1px; }
  .match-hero-top { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .tabs { gap: .2rem; padding-inline: .2rem; }
  .tab { padding: .8rem .75rem; font-size: .78rem; }
  .lineup-grid { grid-template-columns: 1fr; }
  .player-row { align-items: flex-start; }
  .community-vote-list { gap: .55rem; }
  .vote-row, .poll-option { width: 100%; align-items: flex-start; gap: .45rem; }
  .poll-option { flex-wrap: wrap; }
  .poll-pct { margin-left: 0; }
  .rank-row { grid-template-columns: auto auto 1fr; align-items: flex-start; row-gap: .35rem; }
  .rank-pts { grid-column: 3; justify-self: start; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero { margin-inline: 0 !important; border-radius: 18px !important; }
  .chat-form { flex-direction: column; }
  .chat-send { width: 100%; }
}

@media (max-width: 430px) {
  .home-hero-title { font-size: 1.32rem; }
  .home-quick-stats { gap: .45rem; }
  .hq-stat { padding: .65rem .35rem; }
  .featured-scoreboard { gap: .25rem; }
  .featured-scoreboard .team-badge { width: 44px; height: 44px; }
  .team-name { font-size: .82rem; }
  .team-abbr { font-size: .66rem; }
  .score-nums { font-size: 1.85rem; }
  .live-actions { flex-direction: column; }
  .bottom-nav { left: .6rem; right: .6rem; width: auto; }
  .nav-item span { font-size: .58rem; }
  .nav-item svg { width: 19px; height: 19px; }
}

@media (max-width: 760px) { .rank-row { display: grid !important; } }

/* ─── PATCH: CRAQUE, ABAS CENTRALIZADAS E RANKING PREMIUM ───────────── */
.live-actions-single .btn-sm {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
}

.match-tabs {
  justify-content: center;
  padding-inline: clamp(.5rem, 3vw, 2rem);
  gap: .35rem;
  flex-wrap: nowrap;
}
.match-tabs .tab {
  flex: 0 1 160px;
  text-align: center;
  justify-content: center;
  border-radius: 0;
}

.craque-main-card,
.craque-ranking-card,
.craque-team-section,
.rank-podium-card {
  background: linear-gradient(180deg, rgba(18,29,43,.97), rgba(13,21,31,.99));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 1.1rem;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.craque-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.craque-title-row h3 {
  margin-bottom: .45rem;
}
.locked-vote-note {
  margin-top: .9rem;
  border: 1px solid rgba(0,200,83,.22);
  background: rgba(0,200,83,.08);
  color: #83ffba;
  border-radius: 14px;
  padding: .72rem .85rem;
  font-size: .82rem;
  line-height: 1.35;
}
.locked-vote-note.neutral {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #9fb2c7;
}
.craque-ranking-card {
  margin-top: 1rem;
}
.craque-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.craque-top-empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  color: #9fb2c7;
  text-align: center;
}
.craque-top-empty strong {
  color: var(--text);
}
.craque-top-empty span {
  font-size: .84rem;
  line-height: 1.45;
}
.craque-top-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 1rem;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.craque-top-card.rank-1 {
  border-color: rgba(255,214,0,.30);
  background: linear-gradient(180deg, rgba(255,214,0,.10), rgba(255,255,255,.035));
}
.craque-medal {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  font-size: 1.1rem;
}
.craque-top-info strong {
  display: block;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.craque-top-info span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-top: .25rem;
}
.craque-top-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: auto;
}
.craque-top-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 999px;
}
.craque-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.craque-team-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
}
.craque-team-head h4 {
  font-family: var(--font-cond);
  font-size: 1.15rem;
  letter-spacing: .4px;
  margin: 0;
}
.craque-team-head span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-top: .12rem;
}
.craque-team-head strong {
  white-space: nowrap;
  background: rgba(0,200,83,.10);
  border: 1px solid rgba(0,200,83,.18);
  color: var(--green);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .72rem;
}
.split-vote-list {
  gap: .55rem;
}
.split-vote-list .vote-row {
  min-height: 58px;
  padding: .72rem .8rem;
}
.split-vote-list .vote-row strong {
  min-width: 78px;
}

.rank-podium-card {
  padding: 1.15rem;
}
.rank-top3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  align-items: stretch;
}
.rank-podium-user {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  background: linear-gradient(180deg, rgba(22,35,51,.96), rgba(13,21,31,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-align: center;
}
.rank-podium-user.podium-1 {
  transform: translateY(-8px);
  border-color: rgba(255,214,0,.35);
  box-shadow: 0 18px 42px rgba(255,214,0,.06);
}
.rank-podium-user.me {
  border-color: rgba(0,200,83,.35);
}
.rank-podium-medal {
  font-size: 1.65rem;
}
.rank-podium-avatar {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: var(--green);
  color: #00150b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-family: var(--font-cond);
  font-size: 1.2rem;
}
.rank-podium-user strong {
  font-weight: 900;
  overflow-wrap: anywhere;
}
.rank-podium-user span {
  color: var(--gold);
  font-family: var(--font-cond);
  font-size: 1.25rem;
  font-weight: 900;
}
.rank-podium-user small {
  color: var(--muted);
}
.rank-list-card .section-title {
  margin-bottom: .85rem;
}
.rank-list .rank-row {
  min-height: 70px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.rank-list .rank-row:nth-child(-n+3) .rank-num {
  color: var(--gold);
  border-color: rgba(255,214,0,.22);
  background: rgba(255,214,0,.08);
}

@media (max-width: 900px) {
  .craque-split-grid,
  .craque-top-grid,
  .rank-top3 {
    grid-template-columns: 1fr;
  }
  .rank-podium-user.podium-1 {
    transform: none;
  }
}

@media (max-width: 560px) {
  .match-tabs {
    justify-content: flex-start;
    padding-inline: .6rem;
    overflow-x: auto;
  }
  .match-tabs .tab {
    flex: 0 0 auto;
    min-width: 108px;
    padding-inline: .85rem;
  }
  .craque-title-row,
  .craque-team-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .split-vote-list .vote-row {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .split-vote-list .vote-row strong {
    min-width: 0;
    text-align: left;
  }
  .rank-top3 {
    gap: .7rem;
  }
  .rank-podium-user {
    min-height: 150px;
  }
}

/* ─── PATCH FINAL: CHAT, PERFIL E RESPONSIVIDADE GERAL ───────────── */
.chat-page-scroll,
.profile-page-scroll {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 7.5rem;
}

.chat-hero-card,
.profile-card-main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(0,200,83,.16), transparent 34%),
    linear-gradient(145deg, rgba(20,31,45,.98), rgba(12,18,26,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 1.35rem);
  box-shadow: 0 18px 45px rgba(0,0,0,.24);
}
.chat-hero-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
}
.chat-eyebrow,
.profile-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: .35rem .7rem;
  background: rgba(0,200,83,.12);
  border: 1px solid rgba(0,200,83,.18);
  color: #68ffa9;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.chat-hero-card h2,
.profile-card-main h2,
.profile-progress-card h3 {
  font-family: var(--font-cond);
  letter-spacing: .4px;
  line-height: 1;
}
.chat-hero-card h2 { font-size: clamp(1.55rem, 5vw, 2.2rem); margin-bottom: .45rem; }
.chat-hero-card p,
.profile-progress-card p,
.profile-note-card p {
  color: #aebdd0;
  font-size: .9rem;
  line-height: 1.5;
}
.chat-status-card {
  min-width: 110px;
  border-radius: 20px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: .9rem;
}
.chat-status-card strong {
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--green);
  line-height: .9;
}
.chat-status-card span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .8px; }

.public-chat-card {
  min-height: min(62vh, 620px);
  border-radius: 24px;
  background: rgba(17,24,32,.96);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(0,0,0,.20);
}
.chat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.chat-title { font-weight: 800; font-size: .98rem; }
.chat-subtitle { color: var(--muted); font-size: .78rem; margin-top: .12rem; }
.public-chat-messages {
  min-height: 360px;
  max-height: calc(100vh - 330px);
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent),
    rgba(10,15,20,.45);
}
.chat-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: .78rem !important;
  box-shadow: 0 0 0 3px rgba(0,200,83,.08);
}
.chat-bubble {
  border-radius: 18px 18px 18px 6px;
  padding: .78rem .9rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.chat-message.mine .chat-bubble { border-radius: 18px 18px 6px 18px; }
.chat-you-chip { font-size: .6rem !important; padding: .12rem .42rem !important; }
.public-chat-form {
  position: sticky;
  bottom: 0;
  align-items: center;
  background: rgba(17,24,32,.96);
  backdrop-filter: blur(12px);
}
.chat-form-avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.public-chat-form input {
  min-height: 44px;
  border-radius: 14px;
}
.chat-send-btn {
  min-height: 44px;
  border: none;
  border-radius: 14px;
  background: var(--green);
  color: #00170a;
  padding: 0 1.1rem;
  font-family: var(--font-cond);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-send-btn:disabled { opacity: .55; cursor: wait; }

.profile-card-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
.profile-card-main .profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.profile-main-info { min-width: 0; }
.profile-main-info .profile-name {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: .95;
  overflow-wrap: anywhere;
}
.profile-main-info p { color: var(--muted); font-size: .86rem; margin: .25rem 0 .6rem; overflow-wrap: anywhere; }
.profile-chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.profile-summary-card,
.profile-progress-card,
.profile-note-card,
.profile-action-card {
  background: rgba(17,24,32,.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.profile-summary-card span,
.profile-summary-card small {
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .4px;
}
.profile-summary-card strong {
  display: block;
  margin: .35rem 0 .1rem;
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 1;
}
.profile-summary-card.accent-green strong { color: var(--green); }
.profile-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .9rem;
}
.profile-section-head h3 { font-size: 1.25rem; }
#profile-progress-label {
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}
.profile-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-bottom: .75rem;
}
.profile-progress-track i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width .4s ease;
}
.profile-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.profile-action-card {
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .16s, border-color .2s;
}
.profile-action-card:hover { transform: translateY(-2px); border-color: rgba(0,200,83,.25); }
.profile-action-card span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(0,200,83,.11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
}
.profile-action-card strong { display: block; margin-bottom: .2rem; }
.profile-action-card small { color: var(--muted); line-height: 1.35; }
.profile-note-card strong { display: block; margin-bottom: .35rem; }

@media (max-width: 900px) {
  .profile-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-actions-grid { grid-template-columns: 1fr; }
  .chat-hero-card { flex-direction: column; }
  .chat-status-card { min-width: 0; align-items: flex-start; }
}

@media (max-width: 640px) {
  html, body { width: 100%; overflow-x: hidden; }
  .app-layout { width: 100%; max-width: 100%; }
  .main-scroll { padding-inline: .8rem; }
  .chat-page-scroll, .profile-page-scroll { padding-bottom: 6.8rem; }
  .profile-card-main { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .profile-chip-row { justify-content: center; }
  .profile-summary-grid { gap: .65rem; }
  .profile-summary-card { padding: .85rem .75rem; }
  .profile-summary-card strong { font-size: 1.65rem; }
  .profile-section-head { flex-direction: column; gap: .35rem; }
  .public-chat-card { border-radius: 20px; min-height: calc(100vh - 240px); }
  .public-chat-messages { min-height: 320px; max-height: calc(100vh - 340px); padding: .8rem; }
  .chat-card-head { align-items: flex-start; flex-direction: column; }
  .public-chat-form { display: grid; grid-template-columns: 1fr; gap: .55rem; }
  .chat-form-avatar { display: none !important; }
  .public-chat-form input, .chat-send-btn { width: 100%; }
  .chat-message { gap: .55rem; }
  .chat-bubble { max-width: 82vw; }
}

@media (max-width: 430px) {
  .profile-summary-grid { grid-template-columns: 1fr 1fr; }
  .profile-card-main .profile-avatar { width: 74px; height: 74px; border-radius: 20px; }
  .chat-hero-card, .profile-card-main, .profile-progress-card, .profile-note-card, .profile-summary-card, .profile-action-card { border-radius: 18px; }
  .chat-hero-card h2 { font-size: 1.45rem; }
  .chat-hero-card p { font-size: .84rem; }
}

/* ─── FINAL MOBILE FIX: CHAT, PERFIL E LAYOUT GERAL ───────────── */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  background: #071014;
}
.screen, .app-layout {
  width: 100%;
  max-width: 100%;
}
.app-layout {
  min-height: 100dvh;
}
.app-header {
  width: 100%;
  min-height: 64px;
}
.main-scroll {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-bottom: 7.2rem !important;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
button, input { font-family: inherit; }

/* corrige home mobile: evita pills gigantes e cards espremidos */
.home-scroll { gap: 1rem; }
.home-hero, .home-featured-card, .shortcut-card, .game-card, .profile-hero-modern, .chat-room-card {
  max-width: 100%;
}
.featured-meta-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}
.featured-meta-pill {
  min-height: 42px !important;
  height: auto !important;
  flex: none !important;
  display: flex;
  align-items: center;
  border-radius: 14px !important;
  padding: .65rem .8rem !important;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.home-featured-card .live-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}
.home-featured-card .btn-sm {
  width: 100%;
  min-height: 44px;
}
.game-card.compact-home .game-card-body {
  align-items: center;
}
.game-card.compact-home .gc-team,
.featured-scoreboard .team-info {
  min-width: 0;
}
.gc-name, .team-name, .chat-title, .profile-name {
  overflow-wrap: anywhere;
}

/* chat público redesenhado */
.clean-chat-page {
  max-width: 760px !important;
  gap: 0;
  padding-top: 1rem;
}
.chat-room-card {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 160px);
  background: linear-gradient(160deg, rgba(17,26,38,.98), rgba(9,14,20,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
}
.chat-room-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.05rem .95rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(circle at top left, rgba(0,200,83,.16), transparent 40%);
}
.chat-room-head h2 {
  font-family: var(--font-cond);
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  line-height: 1;
  margin: 0 0 .2rem;
}
.chat-room-head p {
  color: #91a4bb;
  font-size: .82rem;
  line-height: 1.35;
  margin: 0;
}
.chat-room-count {
  min-width: 84px;
  text-align: center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: .7rem .65rem;
}
.chat-room-count strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.75rem;
  color: var(--green);
  line-height: 1;
}
.chat-room-count span {
  display: block;
  margin-top: .1rem;
  color: var(--muted);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.clean-chat-messages {
  flex: 1;
  min-height: 360px !important;
  max-height: none !important;
  padding: 1rem !important;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.10));
}
.chat-empty-state {
  height: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #8fa2b8;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 1.2rem;
  font-size: .9rem;
}
.clean-chat-messages .empty-icon,
.public-chat-messages .empty-icon {
  display: none !important;
}
.chat-message {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: .85rem;
  min-width: 0;
}
.chat-message.mine {
  flex-direction: row-reverse;
}
.chat-avatar {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 12px !important;
  font-size: .72rem !important;
}
.chat-bubble {
  max-width: min(74%, 520px) !important;
  min-width: 0;
  background: rgba(28,40,55,.98) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px 18px 18px 6px !important;
  padding: .72rem .8rem !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}
.chat-message.mine .chat-bubble {
  background: rgba(0,200,83,.14) !important;
  border-color: rgba(0,200,83,.28) !important;
  border-radius: 18px 18px 6px 18px !important;
}
.chat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: center;
  margin-bottom: .25rem;
  color: #8fa2b8;
  font-size: .68rem;
}
.chat-name {
  color: #eef6ff;
  font-weight: 800;
}
.chat-text {
  color: #eaf2fb;
  font-size: .88rem !important;
  line-height: 1.45 !important;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font), Arial, sans-serif !important;
}
.clean-chat-form {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: .7rem;
  padding: .9rem;
  background: rgba(12,18,26,.98);
  border-top: 1px solid rgba(255,255,255,.07);
  position: static !important;
}
.clean-chat-form input {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  background: #111b27;
  border: 1px solid rgba(255,255,255,.10);
  color: #f1f7ff;
  padding: 0 .9rem;
  outline: none;
}
.clean-chat-form input:focus {
  border-color: rgba(0,200,83,.7);
}
.chat-send-btn {
  min-width: 112px;
  min-height: 46px;
  border-radius: 15px !important;
}
.chat-delay-note {
  display: block;
  color: #8094aa;
  padding: 0 .95rem .9rem;
  font-size: .72rem;
  line-height: 1.35;
}

/* perfil redesenhado */
.clean-profile-page {
  max-width: 760px !important;
  gap: 1rem;
  padding-top: 1rem;
}
.profile-logout-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #dce8f5;
  border-radius: 999px;
  padding: .42rem .9rem;
  font-weight: 800;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  cursor: pointer;
}
.profile-hero-modern {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  padding: 1.4rem 1rem 1.15rem;
  background: linear-gradient(160deg, rgba(17,29,43,.98), rgba(10,15,21,.98));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.profile-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top center, rgba(0,200,83,.20), transparent 38%),
    linear-gradient(90deg, transparent, rgba(255,214,0,.04), transparent);
  pointer-events: none;
}
.profile-hero-modern > *:not(.profile-hero-bg) {
  position: relative;
  z-index: 1;
}
.profile-avatar-large {
  width: 86px;
  height: 86px;
  border-radius: 28px;
  background: var(--green);
  color: #00180b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cond);
  font-size: 1.8rem;
  font-weight: 900;
  border: 4px solid rgba(7,16,20,.96);
  box-shadow: 0 16px 36px rgba(0,0,0,.30);
}
.profile-hero-modern .profile-name {
  font-family: var(--font-cond);
  font-size: clamp(1.8rem, 6vw, 2.35rem);
  line-height: .95;
  margin: .25rem 0 0;
}
.profile-hero-modern p {
  color: #91a4bb;
  font-size: .84rem;
  overflow-wrap: anywhere;
  margin: 0;
}
.profile-chip-row {
  justify-content: center;
  margin-top: .35rem;
}
.profile-summary-clean {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}
.profile-summary-card {
  min-width: 0;
}
.profile-summary-clean .profile-summary-card {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(19,30,43,.98), rgba(12,18,26,.98));
  border: 1px solid rgba(255,255,255,.08);
}
.profile-progress-clean,
.profile-actions-clean .profile-action-card {
  border-radius: 24px;
}
.profile-actions-clean {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.profile-action-card {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(19,30,43,.98), rgba(12,18,26,.98));
}

/* desktop centralizado e largura controlada */
@media (min-width: 900px) {
  .bottom-nav {
    max-width: 1040px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .clean-chat-page, .clean-profile-page {
    max-width: 820px !important;
  }
}

/* mobile real */
@media (max-width: 640px) {
  .app-header {
    height: 60px;
    padding-inline: .85rem !important;
  }
  .header-logo {
    font-size: 1.45rem !important;
  }
  .user-points {
    font-size: .72rem !important;
    padding: .28rem .55rem !important;
  }
  .avatar {
    width: 38px;
    height: 38px;
  }
  .main-scroll {
    padding-inline: .72rem !important;
    padding-top: .8rem;
  }
  .home-hero {
    padding: .95rem !important;
  }
  .home-hero-title {
    font-size: 1.38rem !important;
    line-height: 1.05 !important;
  }
  .home-hero-text {
    font-size: .82rem !important;
  }
  .home-quick-stats {
    gap: .5rem !important;
  }
  .hq-stat {
    padding: .65rem .35rem !important;
  }
  .hq-stat strong {
    font-size: 1.25rem !important;
  }
  .hq-stat span {
    font-size: .62rem !important;
  }
  .home-featured-card {
    padding: .85rem !important;
    border-radius: 22px !important;
  }
  .featured-head-row {
    gap: .6rem !important;
    margin-bottom: .75rem !important;
  }
  .featured-scoreboard {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    gap: .35rem !important;
  }
  .featured-scoreboard .team-badge {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }
  .featured-scoreboard .team-name {
    font-size: .78rem !important;
  }
  .featured-scoreboard .score-nums {
    font-size: 1.85rem !important;
  }
  .match-time, .match-comp {
    font-size: .68rem !important;
  }
  .featured-meta-row {
    grid-template-columns: 1fr !important;
    gap: .55rem;
  }
  .featured-meta-pill {
    min-height: 38px !important;
    border-radius: 12px !important;
    font-size: .72rem !important;
  }
  .home-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .6rem !important;
  }
  .shortcut-card {
    padding: .75rem !important;
    border-radius: 18px !important;
  }
  .shortcut-icon {
    width: 34px !important;
    height: 34px !important;
  }
  .game-card.compact-home .game-card-body {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    gap: .4rem !important;
    padding: .85rem .7rem !important;
  }
  .game-card.compact-home .gc-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }
  .game-card.compact-home .gc-name {
    font-size: .78rem !important;
  }
  .home-card-meta {
    padding-inline: .7rem !important;
  }
  .home-card-meta span {
    max-width: 100%;
    white-space: normal;
  }
  .bottom-nav {
    left: .55rem;
    right: .55rem;
    width: auto !important;
    margin: 0 .55rem .55rem !important;
    height: 68px !important;
    border-radius: 22px !important;
  }
  .nav-item svg {
    width: 19px !important;
    height: 19px !important;
  }
  .nav-item span {
    font-size: .56rem !important;
  }

  .clean-chat-page, .clean-profile-page {
    padding-inline: .72rem !important;
    gap: .75rem;
  }
  .chat-room-card, .profile-hero-modern {
    border-radius: 22px;
  }
  .chat-room-card {
    min-height: calc(100dvh - 145px);
  }
  .chat-room-head {
    padding: .9rem;
  }
  .chat-room-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .chat-room-count {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: .65rem .75rem;
  }
  .chat-room-count strong {
    font-size: 1.35rem;
  }
  .clean-chat-messages {
    min-height: 330px !important;
    padding: .75rem !important;
  }
  .chat-bubble {
    max-width: 78vw !important;
    padding: .68rem .75rem !important;
  }
  .chat-avatar {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 10px !important;
  }
  .clean-chat-form {
    grid-template-columns: 1fr !important;
    padding: .75rem !important;
    gap: .55rem;
  }
  .chat-send-btn {
    width: 100%;
    min-width: 0;
  }
  .chat-delay-note {
    padding: 0 .8rem .75rem;
  }

  .profile-avatar-large {
    width: 76px;
    height: 76px;
    border-radius: 24px;
    font-size: 1.55rem;
  }
  .profile-summary-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
  }
  .profile-summary-card {
    padding: .85rem .72rem !important;
    border-radius: 18px !important;
  }
  .profile-summary-card strong {
    font-size: 1.55rem !important;
  }
  .profile-progress-clean {
    padding: .9rem !important;
    border-radius: 20px !important;
  }
  .profile-section-head {
    display: flex !important;
    flex-direction: column !important;
    gap: .45rem !important;
  }
  .profile-actions-clean {
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }
  .profile-action-card {
    border-radius: 18px !important;
    padding: .85rem !important;
  }
  .profile-action-card span {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: .5rem !important;
  }
}

@media (max-width: 370px) {
  .main-scroll {
    padding-inline: .55rem !important;
  }
  .profile-summary-clean {
    grid-template-columns: 1fr !important;
  }
  .featured-scoreboard .team-badge {
    width: 44px !important;
    height: 44px !important;
  }
  .featured-scoreboard .score-nums {
    font-size: 1.55rem !important;
  }
}

/* ─── AJUSTES FINAIS: DESKTOP, MODAIS, PERFIL E RANKING ───────────── */
.avatar.has-photo,
.profile-avatar-large.has-photo,
.rank-avatar.has-photo,
.rank-podium-avatar.has-photo {
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}
.profile-avatar-upload {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}
.profile-avatar-upload small {
  color: var(--green);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.profile-avatar-upload:hover .profile-avatar-large { border-color: rgba(0,200,83,.55); }

.mini-action-link {
  border: 1px solid rgba(0,200,83,.25);
  background: rgba(0,200,83,.09);
  color: var(--green);
  border-radius: 999px;
  padding: .38rem .7rem;
  font-family: var(--font-cond);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  cursor: pointer;
}
.mini-action-link:hover { background: rgba(0,200,83,.16); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
}
.modal-backdrop.show { display: flex; }
.app-modal {
  display: none;
  width: min(720px, 100%);
  max-height: min(78vh, 720px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,29,43,.98), rgba(9,15,22,.98));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.app-modal.show { display: flex; flex-direction: column; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.modal-head h3 {
  font-family: var(--font-cond);
  font-size: 1.5rem;
  line-height: 1;
  margin-top: .2rem;
}
.modal-close {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 1.45rem;
  cursor: pointer;
}
.modal-search-wrap { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.modal-search-wrap input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  outline: none;
  padding: .75rem .9rem;
  font-family: var(--font);
}
.modal-list {
  overflow: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.modal-empty {
  color: #9fb2c7;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 1rem;
  text-align: center;
}
.ranking-modal-row,
.pick-history-row {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) auto;
  gap: .8rem;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: .8rem;
}
.ranking-modal-row.me { border-color: rgba(0,200,83,.35); background: rgba(0,200,83,.08); }
.modal-rank-pos {
  color: var(--gold);
  font-family: var(--font-cond);
  font-weight: 900;
  min-width: 24px;
}
.modal-rank-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--green);
  color: #00150b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.ranking-modal-row strong,
.pick-teams strong { display: block; overflow-wrap: anywhere; }
.ranking-modal-row small,
.pick-teams small { display: block; color: var(--muted); margin-top: .15rem; }
.ranking-modal-row b { color: var(--gold); white-space: nowrap; }
.pick-history-row { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) auto; }
.pick-choice { color: #b8c8d8; font-size: .86rem; }
.pick-status {
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}
.pick-status.pending { background: rgba(255,255,255,.06); color: #b9c7d8; }
.pick-status.correct { background: rgba(0,200,83,.12); color: var(--green); }
.pick-status.wrong { background: rgba(255,59,48,.12); color: var(--red); }

/* Detalhes do jogo no PC: card centralizado em vez de tela esticada */
@media (min-width: 900px) {
  #screen-jogo .app-layout {
    max-width: 100%;
  }
  #screen-jogo .match-topbar,
  #screen-jogo .match-detail-dynamic,
  #screen-jogo .match-tabs,
  #screen-jogo .match-main-scroll {
    width: min(1180px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
  }
  #screen-jogo .match-topbar {
    margin-top: .75rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px 22px 0 0;
  }
  #screen-jogo .match-detail-dynamic {
    background: transparent;
  }
  #screen-jogo .match-hero-premium {
    margin-top: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-top: 0;
    border-radius: 0 0 28px 28px;
    padding: 1.25rem 1.35rem 1.35rem;
  }
  #screen-jogo .detail-scoreboard {
    max-width: 760px;
    margin-inline: auto;
  }
  #screen-jogo .detail-pick-box {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
  #screen-jogo .match-tabs {
    top: 0;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
  }
  #screen-jogo .match-tabs .tab {
    min-width: 150px;
    text-align: center;
  }
  #screen-jogo .match-main-scroll {
    max-width: 980px;
    padding-top: 1.5rem;
  }
  #screen-jogo .real-data-card,
  #screen-jogo .poll-card,
  #screen-jogo .player-group-card,
  #screen-jogo .craque-ranking-card {
    border-radius: 24px;
  }
  .profile-actions-clean { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 899px) {
  .profile-actions-clean { grid-template-columns: 1fr !important; }
}

/* Ranking com respiro melhor no mobile */
.rank-podium-card,
.rank-list-card,
.rank-clean-card { margin-bottom: .95rem; }
.rank-list { gap: .75rem !important; }
.rank-list .rank-row { padding: .85rem !important; }
@media (max-width: 640px) {
  .rank-top3 {
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
  }
  .rank-podium-user {
    min-height: 150px !important;
    transform: none !important;
    border-radius: 20px !important;
  }
  .rank-list-card .section-title {
    align-items: flex-start;
    gap: .55rem;
  }
  .mini-action-link { width: 100%; text-align: center; }
  .rank-list .rank-row {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    gap: .6rem !important;
    padding: .85rem !important;
    border-radius: 18px !important;
  }
  .rank-list .rank-pts {
    grid-column: 3;
    justify-self: start;
    margin-top: .25rem;
  }
  .app-modal {
    max-height: 84dvh;
    border-radius: 22px;
  }
  .modal-head { padding: 1rem; }
  .modal-list { padding: .75rem; }
  .ranking-modal-row { grid-template-columns: auto auto minmax(0,1fr); }
  .ranking-modal-row b { grid-column: 3; justify-self: start; }
  .pick-history-row { grid-template-columns: 1fr; align-items: flex-start; }
  .pick-status { justify-self: start; }
}

/* ─── HOTFIX: PERFIL MOBILE E CARD SUPERIOR DA HOME ─────────────── */
#screen-perfil .clean-profile-page {
  padding-top: .85rem !important;
  overflow-x: hidden !important;
}
#screen-perfil .profile-hero-modern {
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: 1.35rem 1rem 1.15rem !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .45rem !important;
  margin: 0 !important;
}
#screen-perfil .profile-hero-bg {
  border-radius: inherit !important;
  overflow: hidden !important;
}
#screen-perfil .profile-avatar-upload {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto .15rem !important;
  padding: 0 !important;
  overflow: visible !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
}
#screen-perfil .profile-avatar-large {
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  min-height: 92px !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background-size: cover !important;
  background-position: center !important;
}
#screen-perfil .profile-avatar-upload small {
  display: inline-flex !important;
  line-height: 1.1 !important;
  min-height: auto !important;
}
#screen-perfil .profile-eyebrow,
#screen-perfil .profile-name,
#screen-perfil .js-profile-email,
#screen-perfil .profile-chip-row {
  position: relative !important;
  z-index: 2 !important;
  max-width: 100% !important;
}
#screen-perfil .profile-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: .45rem !important;
}
#screen-perfil .profile-summary-clean {
  margin-top: 0 !important;
}

/* Corrige o selo/card superior da home cortado em desktop e mobile */
#screen-home .home-hero {
  min-height: auto !important;
  height: auto !important;
  padding-top: 1.15rem !important;
  padding-bottom: 1.15rem !important;
  overflow: hidden !important;
}
#screen-home .home-hero-badge {
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 32px !important;
  height: auto !important;
  line-height: 1.15 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  padding: .42rem .9rem !important;
  margin: 0 0 .85rem 0 !important;
}
#screen-home .home-hero-title,
#screen-home .home-hero-text,
#screen-home .home-quick-stats {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#screen-home .home-quick-stats {
  display: grid !important;
}

@media (max-width: 640px) {
  #screen-perfil .profile-hero-modern {
    padding: 1.1rem .85rem 1rem !important;
    border-radius: 22px !important;
  }
  #screen-perfil .profile-avatar-large {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
  }
  #screen-perfil .profile-hero-modern .profile-name {
    font-size: 1.65rem !important;
    line-height: 1 !important;
  }
  #screen-home .home-hero-badge {
    min-height: 30px !important;
    font-size: .66rem !important;
    padding: .38rem .75rem !important;
  }
}


/* ─── HOTFIX FINAL: foto refletida + card inicial sem corte ───────────── */
.avatar.has-photo,
.chat-avatar.has-photo,
.rank-avatar.has-photo,
.rank-podium-avatar.has-photo,
.modal-rank-avatar.has-photo,
.profile-avatar-large.has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
}

.chat-avatar,
.rank-avatar,
.rank-podium-avatar,
.modal-rank-avatar {
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* Corrige definitivamente o bloco "FanScore • experiência mobile first" */
#screen-home .home-hero {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: .75rem !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding: 1rem !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(0,200,83,.18), transparent 34%),
    linear-gradient(145deg, rgba(18,30,47,.96), rgba(10,15,20,.98)) !important;
}
#screen-home .home-hero::before,
#screen-home .home-hero::after {
  display: none !important;
}
#screen-home .home-hero-badge {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  align-self: start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
  padding: .45rem .85rem !important;
  margin: 0 !important;
  border-radius: 999px !important;
}
#screen-home .home-hero-title {
  margin: 0 !important;
  display: block !important;
  max-width: 760px !important;
}
#screen-home .home-hero-text {
  margin: 0 !important;
  display: block !important;
  max-width: 760px !important;
}
#screen-home .home-quick-stats {
  margin-top: .1rem !important;
  display: grid !important;
}
@media (max-width: 640px) {
  #screen-home .home-hero {
    padding: .9rem !important;
    gap: .65rem !important;
    border-radius: 20px !important;
  }
  #screen-home .home-hero-badge {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: .66rem !important;
  }
}


/* ─── HOTFIX DEFINITIVO: home compacta + foto no chat ───────────── */
#screen-home .home-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  overflow-x: hidden !important;
}
#screen-home .home-hero.home-hero-compact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: .55rem !important;
  width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 1rem 1.1rem !important;
  margin: 0 !important;
  overflow: visible !important;
  border-radius: 22px !important;
  border: 1px solid rgba(0,200,83,.14) !important;
  background: linear-gradient(135deg, rgba(18,31,46,.96), rgba(5,55,33,.88)) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.22) !important;
  position: relative !important;
}
#screen-home .home-hero.home-hero-compact::before,
#screen-home .home-hero.home-hero-compact::after {
  display: none !important;
}
#screen-home .home-hero.home-hero-compact > * {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  z-index: auto !important;
}
#screen-home .home-hero-compact .home-hero-badge {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: .42rem .85rem !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,200,83,.16) !important;
  border: 1px solid rgba(0,200,83,.22) !important;
  color: #7dffb7 !important;
  font-size: .78rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: .55px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#screen-home .home-hero-mini {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  color: #c6d4e2 !important;
  font-size: .92rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
#screen-home .home-featured-wrap {
  margin-top: 0 !important;
}
#screen-home .home-featured-card {
  position: relative !important;
  overflow: hidden !important;
}
#screen-home .home-featured-card .home-quick-stats,
#screen-home .home-featured-card .home-hero-title,
#screen-home .home-featured-card .home-hero-text {
  display: none !important;
}

.chat-avatar.has-photo,
.avatar.chat-avatar.has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}

@media (max-width: 640px) {
  #screen-home .home-hero.home-hero-compact {
    padding: .85rem !important;
    border-radius: 18px !important;
    gap: .45rem !important;
  }
  #screen-home .home-hero-compact .home-hero-badge {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: .66rem !important;
  }
  #screen-home .home-hero-mini {
    text-align: center !important;
    font-size: .78rem !important;
  }
}

/* ===== HOTFIX: jogos lado a lado no mobile, chat robusto e perfil reorganizado ===== */
@media (max-width: 640px) {
  #screen-jogos .game-card.compact-home .game-card-body,
  #screen-home .game-card.compact-home .game-card-body,
  .game-card.compact-home .game-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .95rem .8rem .7rem !important;
  }

  #screen-jogos .game-card.compact-home .gc-team,
  #screen-home .game-card.compact-home .gc-team,
  .game-card.compact-home .gc-team {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: .38rem !important;
    text-align: left !important;
  }

  #screen-jogos .game-card.compact-home .gc-team.right,
  #screen-home .game-card.compact-home .gc-team.right,
  .game-card.compact-home .gc-team.right {
    align-items: flex-end !important;
    text-align: right !important;
  }

  #screen-jogos .game-card.compact-home .gc-badge,
  #screen-home .game-card.compact-home .gc-badge,
  .game-card.compact-home .gc-badge {
    width: 48px !important;
    height: 34px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  #screen-jogos .game-card.compact-home .gc-badge img,
  #screen-home .game-card.compact-home .gc-badge img,
  .game-card.compact-home .gc-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  #screen-jogos .game-card.compact-home .gc-name,
  #screen-home .game-card.compact-home .gc-name,
  .game-card.compact-home .gc-name {
    max-width: 112px !important;
    font-size: .9rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #screen-jogos .game-card.compact-home .gc-rec,
  #screen-home .game-card.compact-home .gc-rec,
  .game-card.compact-home .gc-rec {
    font-size: .68rem !important;
    max-width: 112px !important;
  }

  #screen-jogos .game-card.compact-home .gc-score,
  #screen-home .game-card.compact-home .gc-score,
  .game-card.compact-home .gc-score {
    font-size: .9rem !important;
    padding: 0 .15rem !important;
    letter-spacing: 1px !important;
    align-self: center !important;
  }

  #screen-jogos .home-card-meta,
  #screen-home .home-card-meta,
  .home-card-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
  }

  #screen-jogos .winner-pick-options,
  #screen-home .winner-pick-options,
  .winner-pick-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .5rem !important;
  }

  #screen-jogos .tabs {
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  #screen-jogos .tab {
    min-width: max-content !important;
    padding-inline: .85rem !important;
  }
}

@media (min-width: 641px) {
  #screen-jogos .game-card.compact-home .game-card-body,
  #screen-home .game-card.compact-home .game-card-body,
  .game-card.compact-home .game-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
  }

  #screen-jogos .game-card.compact-home .gc-team.right,
  #screen-home .game-card.compact-home .gc-team.right,
  .game-card.compact-home .gc-team.right {
    justify-content: flex-end !important;
  }
}

/* Perfil: ações primeiro, dados depois, sem quebrar no mobile */
.profile-actions-clean {
  order: 2;
}
.profile-summary-clean {
  order: 3;
}
.profile-progress-clean {
  order: 4;
}
.clean-profile-page {
  display: flex !important;
  flex-direction: column !important;
}
#screen-perfil .profile-actions-clean {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
#screen-perfil .profile-summary-clean {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}
@media (max-width: 720px) {
  #screen-perfil .profile-actions-clean,
  #screen-perfil .profile-summary-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }
  #screen-perfil .profile-action-card,
  #screen-perfil .profile-summary-card {
    min-height: 120px !important;
    padding: .9rem !important;
  }
  #screen-perfil .profile-action-card span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }
  #screen-perfil .profile-summary-card strong {
    font-size: 1.55rem !important;
  }
}

/* Chat mais estável e mensagens sempre legíveis */
.public-chat-messages,
.clean-chat-messages {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}
.chat-message {
  max-width: 100% !important;
  min-width: 0 !important;
}
.chat-bubble {
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.chat-text {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 520px) {
  .chat-room-card {
    min-height: calc(100vh - 150px) !important;
  }
  .public-chat-messages,
  .clean-chat-messages {
    min-height: 300px !important;
    max-height: calc(100vh - 335px) !important;
  }
  .chat-message .avatar,
  .chat-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: .7rem !important;
  }
  .chat-bubble {
    max-width: calc(100% - 44px) !important;
  }
}

/* ===== HOTFIX FINAL: cards de jogos lado a lado no mobile ===== */
@media (max-width: 640px) {
  #screen-jogos .premium-game-card .game-card-body,
  #screen-home .premium-game-card .game-card-body,
  .premium-game-card .game-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: .5rem !important;
    padding: .95rem .75rem .75rem !important;
  }

  #screen-jogos .premium-game-card .gc-team,
  #screen-home .premium-game-card .gc-team,
  .premium-game-card .gc-team {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: .36rem !important;
  }

  #screen-jogos .premium-game-card .gc-team.right,
  #screen-home .premium-game-card .gc-team.right,
  .premium-game-card .gc-team.right {
    align-items: flex-end !important;
    text-align: right !important;
  }

  #screen-jogos .premium-game-card .gc-team > div:not(.gc-badge),
  #screen-home .premium-game-card .gc-team > div:not(.gc-badge),
  .premium-game-card .gc-team > div:not(.gc-badge) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #screen-jogos .premium-game-card .gc-badge,
  #screen-home .premium-game-card .gc-badge,
  .premium-game-card .gc-badge {
    width: 48px !important;
    height: 34px !important;
    min-width: 48px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  #screen-jogos .premium-game-card .gc-badge img,
  #screen-home .premium-game-card .gc-badge img,
  .premium-game-card .gc-badge img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #screen-jogos .premium-game-card .gc-name,
  #screen-home .premium-game-card .gc-name,
  .premium-game-card .gc-name {
    font-size: .88rem !important;
    line-height: 1.08 !important;
    max-width: 112px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #screen-jogos .premium-game-card .gc-rec,
  #screen-home .premium-game-card .gc-rec,
  .premium-game-card .gc-rec {
    font-size: .66rem !important;
    max-width: 112px !important;
  }

  #screen-jogos .premium-game-card .gc-score,
  #screen-home .premium-game-card .gc-score,
  .premium-game-card .gc-score {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: .8rem !important;
    letter-spacing: 0 !important;
    color: var(--muted) !important;
  }
}

@media (min-width: 641px) {
  #screen-jogos .premium-game-card .game-card-body,
  #screen-home .premium-game-card .game-card-body,
  .premium-game-card .game-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
  }
}

/* Correção: deixa claro quando o time do palpite foi selecionado */
.winner-options button.selected,
.winner-options button[aria-pressed="true"] {
  border-color: rgba(0,200,83,.9) !important;
  background: rgba(0,200,83,.22) !important;
  color: #68ffa8 !important;
  box-shadow: 0 0 0 2px rgba(0,200,83,.10), inset 0 0 0 1px rgba(104,255,168,.18);
  transform: translateY(-1px);
}

/* Palpite profissional: alterar/cancelar antes do início */
.winner-pick.editing {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .06);
}
.winner-edit-note {
  margin: .45rem 0 .65rem;
  font-size: .82rem;
  color: var(--muted);
}
.winner-edit-note strong { color: var(--green); }
.winner-actions {
  display: flex;
  gap: .55rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .7rem;
}
.btn-cancel-pick {
  border: 1px solid rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
  border-radius: 12px;
  padding: .7rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-cancel-pick:hover { background: rgba(239, 68, 68, .16); }