/* =========================================================
   BRICKSCORE — design tokens (tema laranja & preto)
   ========================================================= */
:root{
  --bg: #0A0A0B;
  --bg-elevated: #131313;
  --surface: #171716;
  --surface-2: #1F1F1E;
  --border: #2A2A28;
  --text: #F5F5F3;
  --text-dim: #9A9994;
  --text-faint: #66655F;
  --accent: #FF7A1A;
  --accent-2: #FF9A3C;
  --accent-dim: #47280F;
  --green: #22C55E;
  --red: #EF4444;
  --gold: #FF7A1A;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,0.45);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input{ font-family: var(--font); }
a{ text-decoration:none; color:inherit; }
.hidden{ display:none !important; }

/* =========================================================
   APP SHELL
   ========================================================= */
.app{
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(255,122,26,0.10), transparent 60%),
    var(--bg);
}

.app-header{
  position: sticky;
  top:0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
  background: rgba(10,10,11,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:8px; min-width:0; }
.eyebrow{
  font-size:11px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase;
  color: var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-name{ font-size:16px; letter-spacing:0.5px; font-weight:600; color:var(--text-dim); }
.brand-name b{ color:var(--text); font-weight:800; }
.icon-btn{
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text);
  font-weight:700;
  font-size:13px;
  padding:7px 12px;
  border-radius: 20px;
  cursor:pointer;
}
.avatar-btn{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(145deg, var(--accent), #B4560E);
  color:#0A0A0B; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
}

.view-root{
  flex:1;
  padding: 16px 16px 100px;
}
.view{ animation: fadeUp .25s ease; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* =========================================================
   HERO CARD (Home)
   ========================================================= */
.hero-card{
  position:relative;
  background: linear-gradient(160deg, #1C1310 0%, var(--surface) 55%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px 20px 22px;
  overflow:hidden;
  margin-bottom: 20px;
}
.hero-ball{
  position:absolute; right:-18px; bottom:-22px; font-size:110px; opacity:0.10;
  transform: rotate(-12deg); pointer-events:none; line-height:1;
}
.hero-eyebrow{ font-size:11px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color: var(--accent); }
.hero-logo{ font-size:26px; font-weight:900; letter-spacing:-0.5px; margin:2px 0 12px; }
.hero-logo .accent{ color: var(--accent); }
.hero-headline{ font-size:21px; font-weight:800; line-height:1.25; margin:0 0 8px; letter-spacing:-0.3px; max-width:88%; }
.hero-sub{ font-size:13.5px; color:var(--text-dim); margin:0 0 16px; max-width:85%; line-height:1.4; }
.hero-cta{ position:relative; z-index:1; width:auto; display:inline-flex; margin:0; padding:12px 20px; }

/* =========================================================
   TYPOGRAPHY / SECTION HEADERS
   ========================================================= */
.section-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin: 4px 2px 12px;
}
.section-title.mt{ margin-top: 26px; }
.section-title h1{ font-size:22px; margin:0; font-weight:800; letter-spacing:-0.3px; }
.section-title h2{ font-size:12px; margin:0; font-weight:800; color: var(--text-dim); text-transform: uppercase; letter-spacing:0.8px; }
.link{ font-size:13px; color: var(--accent); font-weight:700; }

/* =========================================================
   CARDS / STAT GRID
   ========================================================= */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.list-card{ overflow:hidden; }

.stat-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.stat-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  position:relative;
  overflow:hidden;
}
.stat-card .stat-icon{ position:absolute; right:10px; top:10px; opacity:.35; }
.stat-card .stat-value{ font-size:24px; font-weight:800; letter-spacing:-0.5px; }
.stat-card .stat-label{ font-size:11.5px; color:var(--text-dim); margin-top:4px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.stat-card .stat-caption{ font-size:11.5px; color: var(--green); margin-top:5px; font-weight:700; }
.stat-card .stat-caption.muted{ color: var(--text-faint); }
.stat-card.wide{ grid-column: span 2; display:flex; align-items:center; justify-content:space-between; }
.stat-card.accent{ border-left-color: var(--accent); background: linear-gradient(145deg, rgba(255,122,26,0.10), var(--surface) 60%); }
.stat-card.gold{ border-left-color: var(--accent); background: linear-gradient(145deg, rgba(255,122,26,0.10), var(--surface) 60%); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary{
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 70%);
  color:#160D06;
  border:none;
  border-radius: 14px;
  font-weight:800;
  font-size:15px;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow: 0 8px 20px rgba(255,122,26,0.30);
  transition: transform .12s ease;
}
.btn-primary:active{ transform: scale(.98); }
.btn-block{ width:100%; margin: 18px 0 8px; }

.btn-secondary{
  background: var(--surface-2);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 14px;
  font-weight:700;
  font-size:14px;
  padding: 12px 16px;
  cursor:pointer;
}
.btn-chip{
  background: var(--surface-2);
  color: var(--accent);
  border:1px solid var(--border);
  border-radius: 20px;
  font-weight:700;
  font-size:13px;
  padding: 7px 13px;
  cursor:pointer;
}
.btn-ghost{
  background:transparent;
  border:none;
  color: var(--text-dim);
  font-weight:600;
  cursor:pointer;
}
.btn-danger{
  background: rgba(239,68,68,0.12);
  color: var(--red);
  border:1px solid rgba(239,68,68,0.35);
  border-radius: 14px;
  font-weight:700;
  padding: 12px 16px;
  cursor:pointer;
}
.back-btn{
  background:none; border:none; color: var(--accent);
  font-weight:700; font-size:15px; padding: 4px 0 14px; cursor:pointer;
}

/* =========================================================
   LISTS (players / matches / ranking)
   ========================================================= */
.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  cursor:pointer;
}
.list-row:last-child{ border-bottom:none; }
.list-row:active{ background: var(--surface-2); }

.avatar{
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(145deg, var(--accent-dim), #241408);
  color: var(--accent-2); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; flex-shrink:0;
  border: 1px solid rgba(255,122,26,0.4);
}
.avatar.sm{ width:30px; height:30px; font-size:12px; }
.avatar.orange{ background: var(--accent); color:#160D06; border-color: var(--accent); }

.row-main{ flex:1; min-width:0; }
.row-title{ font-weight:700; font-size:14.5px; }
.row-sub{ font-size:12.5px; color:var(--text-dim); margin-top:1px; }
.row-value{ text-align:right; }
.row-value .big{ font-weight:800; font-size:16px; }
.row-value .small{ font-size:11px; color:var(--text-dim); }

.rank-pos{
  width:22px; text-align:center; font-weight:800; font-size:13px; color: var(--text-dim); flex-shrink:0;
}
.rank-pos.gold{ color: var(--accent); }
.rank-pos.silver{ color:#D8D6D0; }
.rank-pos.bronze{ color:#C97A3F; }

.empty-state{
  padding: 34px 20px;
  text-align:center;
  color: var(--text-dim);
  font-size:13.5px;
}

/* Match card (linha de partida com rodapé de vencedor/MVP) */
.match-card{
  padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer;
}
.match-card:last-child{ border-bottom:none; }
.match-card:active{ background: var(--surface-2); }
.match-card .mc-date{ font-size:11px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.match-card .mc-date .live-dot{ width:6px; height:6px; border-radius:50%; background: var(--text-faint); display:inline-block; }
.match-card .mc-line{ display:flex; justify-content:space-between; font-size:15px; font-weight:700; padding:3px 0; }
.match-card .mc-line.win .mc-score{ color: var(--green); }
.match-card .mc-line.lose{ color: var(--text-faint); }
.match-card .mc-line.lose .mc-score{ color: var(--text-faint); }
.match-card .mc-footer{ display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; font-weight:700; }
.match-card .mc-footer .mc-win{ color: var(--accent); }
.match-card .mc-footer .mc-mvp{ color: var(--text-dim); }

/* =========================================================
   FILTER CHIPS
   ========================================================= */
.filter-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding: 2px 2px 14px;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{ display:none; }
.filter-chip{
  flex-shrink:0;
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text-dim);
  font-weight:700;
  font-size:12.5px;
  padding: 7px 14px;
  border-radius: 20px;
  cursor:pointer;
  white-space:nowrap;
}
.filter-chip.active{
  background: var(--accent);
  border-color: var(--accent);
  color:#160D06;
}

/* =========================================================
   SEARCH
   ========================================================= */
.search-wrap{ margin-bottom: 12px; }
input[type="text"], input[type="number"], input[type="date"], select, textarea{
  width:100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font-size:14.5px;
  outline:none;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,122,26,0.18);
}
input::placeholder{ color: var(--text-faint); }

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.bottom-nav{
  position: sticky;
  bottom:0;
  z-index: 20;
  display:flex;
  justify-content:space-around;
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 8px 6px calc(env(safe-area-inset-bottom) + 8px);
}
.nav-item{
  background:none; border:none; color: var(--text-faint);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; cursor:pointer;
  padding: 4px 10px;
  flex:1;
}
.nav-item svg{ width:22px; height:22px; }
.nav-item.active{ color: var(--accent); }

/* =========================================================
   PLAYER PROFILE
   ========================================================= */
.profile-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 10px 0 20px;
}
.profile-hero .avatar{ width:76px; height:76px; font-size:26px; margin-bottom:10px; }
.profile-hero .name{ font-size:20px; font-weight:800; }
.profile-hero .since{ font-size:12.5px; color: var(--text-dim); margin-top:2px; }

.badge-row{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px;
}
.badge-pill{
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:6px 11px;
  font-size:12px;
  font-weight:600;
}

.sparkline-wrap{ padding: 14px 14px 6px; }

.record-item{ display:flex; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--border); font-size:13.5px; }
.record-item:last-child{ border-bottom:none; }
.record-item .rlabel{ color: var(--text-dim); }
.record-item .rvalue{ font-weight:700; }

/* Tabela de estatísticas (detalhe da partida) */
.stat-table{ width:100%; border-collapse:collapse; }
.stat-table thead th{
  text-align:right; font-size:10.5px; color:var(--text-dim); font-weight:700;
  text-transform:uppercase; letter-spacing:0.4px; padding:10px 16px 6px; white-space:nowrap;
}
.stat-table thead th:first-child{ text-align:left; }
.stat-table tbody td{ padding:9px 16px; font-size:13.5px; border-top:1px solid var(--border); text-align:right; }
.stat-table tbody td:first-child{ text-align:left; font-weight:700; }
.stat-table tbody tr:first-child td{ border-top:none; }

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(0,0,0,0.78);
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter: blur(3px);
}
.modal{
  width:100%;
  max-width:560px;
  max-height: 92vh;
  background: var(--bg-elevated);
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--border);
  border-bottom:none;
  overflow-y:auto;
  animation: slideUp .22s ease;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
@keyframes slideUp{ from{ transform: translateY(24px); opacity:0; } to{ transform: translateY(0); opacity:1; } }

.modal-header{
  position:sticky; top:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 16px 18px 12px;
  background: var(--bg-elevated);
  border-bottom:1px solid var(--border);
  z-index:2;
}
.modal-header .mh-titles{ min-width:0; }
.modal-header .mh-eyebrow{ font-size:11px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.modal-header h2{ font-size:18px; margin:0; font-weight:900; letter-spacing:-0.2px; }
.modal-header .mh-step{ font-size:11.5px; color:var(--text-dim); font-weight:700; margin-top:4px; }
.modal-close{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px; flex-shrink:0; }
.modal-body{ padding: 16px 18px; }
.modal-footer{ padding: 14px 18px; display:flex; gap:10px; border-top:1px solid var(--border); }
.modal-footer .btn-primary, .modal-footer .btn-secondary{ flex:1; margin:0; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.4px; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }

.format-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.format-opt{
  text-align:center; padding:10px 4px; border-radius:12px;
  background: var(--surface); border:1px solid var(--border); color:var(--text-dim);
  font-weight:800; font-size:13px; cursor:pointer;
}
.format-opt.active{ background: var(--accent); border-color:var(--accent); color:#160D06; }

.player-pick-list{ max-height: 300px; overflow-y:auto; border:1px solid var(--border); border-radius:12px; }
.player-pick-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--border); cursor:pointer; }
.player-pick-row:last-child{ border-bottom:none; }
.player-pick-row.selected{ background: rgba(255,122,26,0.10); }
.player-pick-row .pick-toggle{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0;
  background:var(--surface-2); color:var(--text-dim); font-size:15px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.player-pick-row.selected .pick-toggle{ background: var(--accent); border-color: var(--accent); color:#160D06; }

.selected-count{ font-size:12.5px; color:var(--text-dim); margin: 8px 2px 0; font-weight:600; }

.team-split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.team-col{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; }
.team-col h4{ margin:0 0 8px; font-size:12px; text-transform:uppercase; color:var(--accent); font-weight:800; letter-spacing:0.4px; }
.team-col .tp{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--border); }
.team-col .tp:last-child{ border-bottom:none; }
.team-col .tp button{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:16px; }

.stat-input-row{
  display:flex; align-items:center; gap:8px; padding:11px 0; border-bottom:1px solid var(--border);
}
.stat-input-row:last-child{ border-bottom:none; }
.stat-input-row .siname{ flex:1; font-weight:700; font-size:13.5px; min-width:0; }
.stat-pill{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.stat-input-row input{
  width:52px; height:44px; text-align:center; padding:4px; font-weight:800; font-size:15px;
  border-radius: 12px;
}
.stat-input-row input:focus{ background: var(--surface-2); }
.stat-input-row .silabel{ font-size:9.5px; color:var(--text-dim); text-align:center; width:52px; font-weight:700; letter-spacing:0.4px; }

.score-preview{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px; margin: 6px 0 16px;
}
.score-preview .side{ text-align:center; flex:1; }
.score-preview .side .tname{ font-size:12px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.score-preview .side .tscore{ font-size:32px; font-weight:900; margin-top:2px; }
.score-preview .side.win .tscore{ color: var(--accent); }
.score-preview .vs{ color:var(--text-faint); font-weight:700; font-size:12px; padding: 0 10px; text-align:center; }

.winner-banner{
  display:flex; align-items:center; gap:10px; background: var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:13px 16px; margin-bottom:12px;
  font-weight:800; font-size:14px; color: var(--accent);
}
.mvp-banner{
  display:flex; align-items:center; gap:12px; background: linear-gradient(135deg, rgba(255,122,26,0.14), transparent);
  border:1px solid rgba(255,122,26,0.35); border-left:3px solid var(--accent); border-radius:14px; padding:12px 14px; margin-bottom:16px;
}
.mvp-banner .mtag{ font-size:11px; font-weight:800; color: var(--accent); letter-spacing:0.5px; }
.mvp-banner .mname{ font-weight:800; font-size:15px; margin-top:2px; }

.section-sub{ font-size:12px; font-weight:800; color: var(--accent); text-transform:uppercase; letter-spacing:0.6px; margin: 18px 2px 8px; }

.settings-card{ overflow:hidden; }
.settings-row{ display:flex; justify-content:space-between; align-items:center; padding:15px 16px; border-bottom:1px solid var(--border); cursor:pointer; font-weight:600; font-size:14px; }
.settings-row:last-child{ border-bottom:none; }
.settings-row .chev{ color:var(--text-faint); }
.settings-row.danger{ color: var(--red); }
.fine-print{ text-align:center; color:var(--text-faint); font-size:11.5px; margin-top:22px; }

.toast-root{ position:fixed; top: calc(env(safe-area-inset-top) + 10px); left:0; right:0; z-index:999; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{
  background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding: 10px 18px; border-radius: 30px; font-size:13px; font-weight:700;
  box-shadow: var(--shadow); animation: toastIn .2s ease;
}
@keyframes toastIn{ from{ opacity:0; transform: translateY(-8px);} to{opacity:1; transform:translateY(0);} }

@media (min-width: 601px){
  .app{ border-left:1px solid var(--border); border-right:1px solid var(--border); }
}