@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap");

/* Bolao do Thiago - Copa do Mundo 2026 visual identity */
:root{
  --bt-green:#00b85a;
  --bt-yellow:#ffd600;
  --bt-red:#e53935;
  --bt-blue:#1764b8;
  --bt-turquoise:#ffffff;
  --bt-white:#ffffff;
  --bt-black:#0e542d;
  --bt-gold:#ffc107;
  --bt-ink:#064221;
  --bt-panel:#075c2d;
  --bt-panel-2:#064221;
  --bt-line:rgba(5,84,40,.34);
  --bt-shadow:rgba(4,89,39,.26);
  --font-pixel:"Press Start 2P","Pixel Emulator","Silkscreen","Lucida Console",Monaco,Consolas,monospace;
  --font-text:"Share Tech Mono","Lucida Console",Monaco,Consolas,monospace;

  --bg0:#6edb62 !important;
  --bg1:#43c964 !important;
  --bg2:#1e9d51 !important;
  --green:var(--bt-green) !important;
  --green2:#39f27b !important;
  --gold:var(--bt-yellow) !important;
  --gold2:var(--bt-gold) !important;
  --ice:#ffffff !important;
  --text:var(--bt-white) !important;
  --muted:rgba(255,255,255,.78) !important;
  --card:rgba(7,92,45,.90) !important;
  --card2:rgba(6,66,33,.94) !important;
  --stroke:rgba(5,84,40,.30) !important;
  --app-glass:rgba(7,92,45,.90) !important;
  --app-glass2:rgba(6,66,33,.94) !important;
  --app-stroke:rgba(5,84,40,.34) !important;
  --head-grad:linear-gradient(105deg, rgba(7,92,45,.96), rgba(6,66,33,.92), rgba(255,214,0,.14)) !important;
  --foot-grad:linear-gradient(90deg, rgba(255,214,0,.18), rgba(7,92,45,.24), rgba(5,84,40,.16)) !important;
  --card-grad:linear-gradient(180deg, rgba(7,92,45,.92), rgba(6,66,33,.94)) !important;
  --ok:var(--bt-green) !important;
  --warn:var(--bt-yellow) !important;
  --bad:var(--bt-red) !important;
}

*{
  font-family:var(--font-text) !important;
  letter-spacing:0 !important;
}

html,
body{
  background-color:#45c862 !important;
  height:auto !important;
  min-height:100% !important;
}

body{
  min-height:100vh !important;
  min-height:100dvh !important;
  color:var(--bt-white) !important;
  background:#239a51 !important;
  text-rendering:geometricPrecision;
}

body::before{
  content:"";
  position:fixed !important;
  inset:0 !important;
  z-index:0;
  pointer-events:none;
  animation:none !important;
  transform:none !important;
  background:
    linear-gradient(180deg, rgba(2,12,24,.12), rgba(5,39,19,.20)),
    url("/img/fundo2.jpeg"),
    linear-gradient(180deg, #061322 0%, #0a3a24 58%, #0b5a28 100%) !important;
  background-size:auto, cover, auto !important;
  background-position:center, center center, center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  animation:none !important;
  transform:none !important;
  background:
    radial-gradient(900px 460px at 50% 10%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  opacity:.45;
}

.app-wrap,
.page,
.toast-host{
  position:relative;
  z-index:2;
}

.app-wrap{
  width:min(1320px, 100%) !important;
}

.rules-header-wrap{
  width:min(1320px, 100%) !important;
  margin:0 auto !important;
  padding:12px !important;
  position:relative;
  z-index:2;
}

.rules-header-wrap > .bh-header{
  width:100% !important;
  margin:0 !important;
}

h1,h2,h3,h4,h5,h6,
.content-h1,
.menu-title,
.section-title,
.login-card h1,
.bh-header__title,
.bh-header__mobile-current,
.champ-card-head .h1,
.panel-title,
.card-title,
.ranking-title,
.title{
  font-family:var(--font-pixel) !important;
  color:var(--bt-yellow) !important;
  text-transform:uppercase;
  line-height:1.55 !important;
  text-shadow:
    2px 2px 0 #064221,
    3px 3px 0 rgba(3,45,22,.72) !important;
}

.login-card h1,
.content-h1{
  color:var(--bt-yellow) !important;
}

p,
span,
label,
li,
td,
th,
.content-sub,
.champ-hint{
  line-height:1.55;
}

p,
li,
td,
.rules-copy p,
.rules-list li,
.rules-ordered-list li,
.rules-table,
.rules-table td,
.rules-aside,
.content-sub,
.champ-hint,
.text-muted{
  color:rgba(255,255,255,.88) !important;
}

strong,
b,
th,
.rules-table th{
  color:#ffffff !important;
}

a{
  color:var(--bt-yellow);
  text-decoration-color:rgba(255,214,0,.48);
}

::selection{
  color:#082013 !important;
  background:var(--bt-yellow) !important;
}

.login-card,
.card-glass,
.app-content,
.app-menu,
.bh-header,
.champ-card,
.champ-card-head,
.champ-footer,
.team-tile,
.user-chip,
.toast,
.badge,
.card,
.panel,
.box,
.modal,
.game-card,
.match-card,
.ranking-card,
.group-card,
.rule-card,
.admin-card,
.summary-card,
.result-card,
.fixture-card,
.palpite-card,
.profile-card,
.profile-section,
.profile-chip,
.profile-note-card,
table{
  border-radius:8px !important;
  border-color:var(--bt-line) !important;
  background:
    radial-gradient(620px 180px at 12% 0%, rgba(13,116,56,.28), transparent 60%),
    linear-gradient(180deg, rgba(7,92,45,.92), rgba(6,66,33,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(5,84,40,.22),
    0 18px 42px rgba(4,89,39,.22) !important;
  backdrop-filter:none !important;
}

.profile-card{
  border-radius:28px !important;
}

.profile-section{
  border-radius:22px !important;
}

.profile-chip,
.profile-note-card{
  border-radius:18px !important;
}

.profile-head{
  background:var(--head-grad) !important;
  border-radius:18px !important;
  padding:18px 20px !important;
}

.profile-eyebrow,
.profile-card .input-group label{
  border-color:rgba(5,84,40,.34) !important;
  background:linear-gradient(180deg, rgba(13,116,56,.94), rgba(6,66,33,.92)) !important;
  color:rgba(255,255,255,.94) !important;
  text-shadow:1px 1px 0 rgba(6,66,33,.58) !important;
}

.profile-lead,
.profile-section-text,
.profile-note,
.profile-card .input-hint{
  color:rgba(255,255,255,.88) !important;
  text-shadow:1px 1px 0 rgba(6,66,33,.32);
}

.profile-chip-label,
.profile-note-title{
  color:rgba(255,255,255,.82) !important;
}

.profile-card .input-group input,
.profile-card .input-group select,
.profile-card .input-group textarea{
  background:#0a4a28 !important;
  color:#ffffff !important;
  border-color:rgba(5,84,40,.46) !important;
}

.profile-card .input-group input:-webkit-autofill{
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 0 0 1000px #0a4a28 inset !important;
}

.profile-card .input-group select option{
  background:#0a4a28 !important;
  color:#ffffff !important;
}

.menu-view-switch,
.menu-link,
.group-block,
.group-line,
.match-card,
.match-head,
.match-body,
.group-rank-card,
.group-rank-head{
  background:
    radial-gradient(520px 160px at 16% 0%, rgba(13,116,56,.24), transparent 62%),
    linear-gradient(180deg, rgba(7,92,45,.94), rgba(6,66,33,.96)) !important;
  border-color:rgba(5,84,40,.48) !important;
}

.menu-link:hover,
.menu-link:focus,
.match-card:hover,
.group-rank-card:hover{
  background:
    radial-gradient(520px 160px at 16% 0%, rgba(20,138,66,.26), transparent 62%),
    linear-gradient(180deg, rgba(8,103,50,.96), rgba(5,56,28,.96)) !important;
}

.menu-link.is-active,
.menu-view-btn.is-active{
  background:linear-gradient(180deg, #075c2d, #04381d) !important;
  color:#ffffff !important;
  border-color:rgba(255,214,0,.68) !important;
}

.group-pill,
.group-count,
.badge,
.match-status,
.round-pill,
.fifa-pill{
  background:linear-gradient(180deg, #0d7438, #064221) !important;
  color:#ffffff !important;
  border-color:rgba(5,84,40,.52) !important;
}

.app-content,
.app-menu{
  border-radius:8px !important;
  background:rgba(4,47,24,.90) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.26) !important;
}

.app-content::before,
.app-menu::before{
  content:none !important;
}

.group-block{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.group-line{
  margin:0 0 10px !important;
  padding:8px 10px !important;
  border-radius:6px !important;
  background:rgba(6,66,33,.72) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}

.matches{
  gap:10px !important;
}

.match-card{
  border-radius:6px !important;
  background:rgba(3,49,24,.88) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}

.match-card:hover{
  background:rgba(5,60,29,.92) !important;
  border-color:rgba(255,214,0,.24) !important;
}

.match-top{
  padding:9px 10px !important;
  background:rgba(8,77,37,.72) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.match-body{
  padding:14px 12px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.match-when .when,
.match-when .round,
.match-status,
.group-pill,
.group-count{
  border-radius:6px !important;
  background:rgba(4,47,24,.82) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

.scorebox{
  border-radius:8px !important;
  background:rgba(2,35,18,.78) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}

.score{
  border-radius:5px !important;
  background:#05361c !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22) !important;
}

.app-content,
.login-card,
.champ-card,
.app-menu{
  position:relative;
}

.app-content::before,
.login-card::before,
.champ-card::before,
.app-menu::before{
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;
  border:1px solid rgba(5,84,40,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius:4px;
}

.app-content::before,
.app-menu::before{
  content:none !important;
}

button,
.btn-login,
.btn-save-champ,
.btn-back,
.btn-logout,
.topnav-link,
.bh-header__nav-link,
.bh-header__logout,
.bh-header__mobile-link,
.bh-header__mobile-logout,
input[type="submit"],
input[type="button"]{
  font-family:var(--font-pixel) !important;
  text-transform:uppercase;
  border-radius:6px !important;
  border:2px solid rgba(5,84,40,.38) !important;
  background:
    linear-gradient(180deg, rgba(255,214,0,.98), rgba(255,193,7,.95)) !important;
  color:#111111 !important;
  text-shadow:none !important;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.22),
    3px 3px 0 rgba(7,44,20,.78),
    0 10px 18px rgba(7,44,20,.26) !important;
}

button:hover,
.btn-login:hover,
.btn-save-champ:hover,
.btn-back:hover,
.btn-logout:hover,
.topnav-link:hover,
.bh-header__nav-link:hover,
.bh-header__logout:hover,
.bh-header__mobile-link:hover,
.bh-header__mobile-logout:hover{
  filter:saturate(1.08) brightness(1.06);
  transform:translateY(-1px);
}

button:disabled,
.btn-save-champ:disabled,
input:disabled,
select:disabled,
textarea:disabled{
  opacity:.58 !important;
  filter:grayscale(.35) !important;
  cursor:not-allowed !important;
}

input,
select,
textarea{
  border-radius:6px !important;
  border:2px solid rgba(5,84,40,.46) !important;
  background:#0a4a28 !important;
  color:var(--bt-white) !important;
  box-shadow:
    inset 3px 3px 0 rgba(3,49,24,.34),
    0 0 0 1px rgba(21,125,62,.26) !important;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.56) !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:var(--bt-yellow) !important;
  box-shadow:
    inset 3px 3px 0 rgba(7,44,20,.32),
    0 0 0 3px rgba(255,214,0,.20),
    0 0 16px rgba(255,214,0,.18) !important;
}

.rank-select,
.rank-select option,
.bolao-select-display,
.bolao-select-search input,
.bolao-select-opt{
  font-family:"Segoe UI", Arial, Helvetica, sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-shadow:none !important;
  text-rendering:auto !important;
  font-synthesis:none !important;
}

.rank-select,
.bolao-select-display{
  line-height:1.2 !important;
}

.bolao-select-native{
  display:none !important;
}

.rank-select:disabled,
.rank-select[disabled],
.bolao-select-display.is-disabled{
  opacity:1 !important;
  filter:none !important;
}

.score{
  border-radius:5px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:#05361c !important;
  color:#ffffff !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22) !important;
}

.score:focus{
  border-color:rgba(255,214,0,.68) !important;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 0 0 3px rgba(255,214,0,.18) !important;
}

.badge,
.topnav-link.is-active,
.bh-header__nav-link.is-active,
.bh-header__mobile-badge,
.team-tile.is-selected .check{
  background:linear-gradient(180deg, var(--bt-green), #009a42) !important;
  color:#ffffff !important;
  border-color:rgba(255,214,0,.72) !important;
  text-shadow:2px 2px 0 rgba(7,44,20,.90) !important;
}

.btn-back,
.btn-logout,
.bh-header__logout,
.topnav-link:not(.is-active),
.bh-header__nav-link:not(.is-active),
.bh-header__mobile-link:not(.is-active),
.bh-header__mobile-logout{
  background:
    linear-gradient(180deg, rgba(7,92,45,.94), rgba(6,66,33,.96)) !important;
  color:var(--bt-white) !important;
  border-color:rgba(5,84,40,.38) !important;
  text-shadow:2px 2px 0 rgba(6,66,33,.70) !important;
}

.topnav-link.is-admin,
.bh-header__nav-link.is-admin,
.bh-header__mobile-link.is-admin{
  background:linear-gradient(180deg, var(--bt-blue), #0056b8) !important;
  color:#ffffff !important;
}

.champ-card-head,
.champ-footer,
.content-head,
thead,
th{
  background:
    linear-gradient(90deg, rgba(0,200,83,.24), rgba(255,214,0,.18), rgba(0,130,255,.16)) !important;
}

.team-tile{
  min-height:74px;
  background:
    radial-gradient(180px 70px at 12% 0%, rgba(255,214,0,.14), transparent 64%),
    linear-gradient(180deg, rgba(7,92,45,.92), rgba(6,66,33,.94)) !important;
  color:var(--bt-white) !important;
  text-shadow:none !important;
}

.team-tile,
.team-tile *{
  font-family:var(--font-text) !important;
  text-transform:none !important;
}

.team-tile:hover,
.team-tile:focus{
  border-color:var(--bt-yellow) !important;
  background:
    linear-gradient(180deg, rgba(13,116,56,.96), rgba(6,66,33,.94)) !important;
}

.team-tile.is-selected{
  border-color:var(--bt-green) !important;
  background:
    linear-gradient(180deg, rgba(7,92,45,.98), rgba(4,47,24,.96)) !important;
}

.flag,
.logo-wrapper img,
.bh-header__logo,
.app-brand img{
  image-rendering:auto;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.48)) !important;
}

.logo-wrapper{
  margin:0 auto 10px !important;
}

.logo-wrapper img{
  width:auto !important;
  max-width:min(84vw, 374px) !important;
  max-height:min(37vh, 303px) !important;
}

.bh-header{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.70),
    0 0 0 3px rgba(255,255,255,.08),
    0 12px 28px rgba(0,0,0,.40) !important;
}

.bh-header__bar{
  min-height:62px;
}

.bh-header__brand{
  max-width:258px;
}

.bh-header__logo{
  width:42px !important;
  height:42px !important;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)) !important;
}

.bh-header__title{
  max-width:178px;
  font-size:11px !important;
  line-height:1.35 !important;
}

.bh-header__subtitle{
  max-width:178px !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

.bh-header__nav{
  justify-content:flex-start !important;
  overflow-x:auto !important;
  gap:5px !important;
}

.bh-header__nav-link,
.bh-header__logout,
.bh-header__mobile-link,
.bh-header__mobile-logout{
  font-size:9px !important;
  line-height:1.25 !important;
  padding:7px 7px !important;
  min-height:32px;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.22),
    2px 2px 0 rgba(7,44,20,.78),
    0 8px 14px rgba(7,44,20,.24) !important;
}

.bh-header__user{
  border-radius:8px !important;
  padding:5px 7px !important;
  box-shadow:
    0 0 0 2px rgba(7,44,20,.48),
    2px 2px 0 rgba(7,44,20,.30) !important;
}

.bh-header__user-dot{
  width:7px !important;
  height:7px !important;
}

.bh-header__user-name{
  max-width:78px !important;
  font-size:10px !important;
}

.bh-header__user-meta{
  display:none !important;
}

.meta .sigla,
.bh-header__subtitle,
.bh-header__mobile-subtitle,
.bh-header__user-meta,
.bh-header__mobile-user-meta,
.content-sub,
.champ-hint,
.text-muted{
  color:rgba(255,255,255,.74) !important;
}

hr,
.divider{
  border-color:rgba(5,84,40,.22) !important;
}

#btnFinalizeChangesGlobal{
  right:14px !important;
  bottom:14px !important;
  min-height:34px !important;
  padding:8px 10px !important;
  border-radius:8px !important;
  font-size:10px !important;
  line-height:1.25 !important;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.22),
    2px 2px 0 rgba(7,44,20,.78),
    0 8px 16px rgba(7,44,20,.24) !important;
}

@media (max-width:1180px){
  .app-wrap{
    width:min(1120px, 100%) !important;
  }

  .rules-header-wrap{
    width:min(1120px, 100%) !important;
  }

  .bh-header__brand{
    max-width:none;
  }

  .bh-header__title{
    max-width:52vw;
    font-size:11px !important;
  }

  .bh-header__subtitle{
    max-width:52vw !important;
  }

  .bh-header__toggle{
    width:38px !important;
    height:38px !important;
  }
}

@media (max-width:560px){
  body::before{
    width:auto !important;
    height:auto !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    transform:none !important;
    background:
      linear-gradient(180deg, rgba(2,12,24,.16), rgba(5,39,19,.22)),
      url("/img/fundo2.jpeg"),
      linear-gradient(180deg, #061322 0%, #0a3a24 58%, #0b5a28 100%) !important;
    background-size:auto, cover, auto !important;
    background-position:center, center bottom, center !important;
    background-repeat:no-repeat !important;
  }

  h1,h2,h3,h4,h5,h6,
  .content-h1,
  .login-card h1{
    font-size:clamp(13px, 3.5vw, 18px) !important;
  }

  button,
  .btn-login,
  .btn-save-champ,
  .btn-back,
  .btn-logout,
  .topnav-link,
  .bh-header__nav-link,
  .bh-header__logout,
  .bh-header__mobile-link,
  .bh-header__mobile-logout{
    font-size:10px !important;
    line-height:1.45 !important;
  }

  .logo-wrapper img{
    max-width:min(88vw, 350px) !important;
    max-height:32vh !important;
  }

  #btnFinalizeChangesGlobal{
    right:10px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    max-width:calc(100vw - 20px) !important;
    min-height:32px !important;
    padding:7px 9px !important;
    border-radius:8px !important;
    font-size:9px !important;
  }
}