body {font-family: 'Istok Web', sans-serif;background: url("http://picjumbo.com/wp-content/uploads/HNCK2189-1300x866.jpg") no-repeat #000;background-size: cover;min-height: 100%;margin: 0;}
.hero {position:relative; text-align: center; color: #fcfcfc; }
.hero h1 {font-family: 'Holtwood One SC', serif;font-weight: normal;font-size: 5.4em;margin:0 0 20px; text-shadow:0 0 12px rgba(0, 0, 0, 0.5);text-transform: uppercase;letter-spacing:-1px;}
.hero p {font-family: 'Abel', sans-serif;text-transform: uppercase; color: #CA5C5C; letter-spacing: 6px;text-shadow:0 0 12px rgba(0, 0, 0, 0.5);font-size: 1.2em;}
.hero-wrap {padding: 3.5em 10px;}
.hero p.intro {font-family: 'Holtwood One SC', serif;text-transform: uppercase;letter-spacing: 1px;font-size: 3em;margin-bottom:-40px;}
.hero p.year {color: #fff; letter-spacing: 20px; font-size: 34px; margin: -25px 0 25px;}
.hero p.year i {font-size: 14px;vertical-align: middle;}
#bracket {overflow-x: auto;overflow-y: visible;background-color: #e1e1e1;background-color:rgba(225,225,225,0.9);padding-top: 20px;font-size: 12px;padding: 40px 0;}
/*used to be max-width :1100px*/
.container {max-width: max-content;margin: 0 auto;display: inline-block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}
.split {display: inline-block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;width: 42%;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;}
.champion {float:left;display:block;width: 16%;-webkit-flex-direction:row;flex-direction:row;-webkit-align-self:center;align-self:center;margin-top: -15px;text-align: center;padding: 230px 0\9;} 
.champion i {color: #a0a6a8; font-size: 45px;padding: 10px 0; }
.round {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:95%;width:30.8333%\9;}
.split-two {}
.split-one .round {margin: 0 2.5% 0 0;}
.split-two .round {margin: 0 0 0 2.5%;}
/*width:100%*/
.matchup {margin:0;width: max-content;padding: 10px 0;height:60px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.score {font-size: 11px;text-transform: uppercase;float: right;color: #2C7399;font-weight: bold;font-family: 'Roboto Condensed', sans-serif;position: absolute;right: 5px;}
.team {padding: 0 5px;margin: 3px 0;height: 25px; line-height: 25px;white-space: nowrap; overflow: hidden;position: relative;}
.round-two .matchup {margin:0; height: 60px;padding: 50px 0;}
.round-three .matchup {margin:0; height: 60px; padding: 130px 0;}
.round-details {font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: #2C7399;text-transform: uppercase;text-align: center;height: 40px;}
.champion li, .round li {background-color: #fff;box-shadow: none; opacity: 0.45;}
.current li {opacity: 1;}
.current li.team {background-color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1;}
.vote-options {display: block;height: 52px;}
.share .container {margin: 0 auto; text-align: center;}
.share-icon {font-size: 24px; color: #fff;padding: 25px;}
.share-wrap {max-width: 1100px; text-align: center; margin: 60px auto;}
.final {margin: 4.5em 0;}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.share-icon {color: #fff; opacity: 0.35; }
.share-icon:hover { opacity:1;  -webkit-animation: pulse 0.5s; animation: pulse 0.5s;}
.date {font-size: 10px; letter-spacing: 2px;font-family: 'Istok Web', sans-serif;color:#3F915F;}

.team:empty::before {
  content: attr(data-text); /* uses the value from data-text */
  color: #aaa; /* placeholder style */
  font-style: italic;
}
dialog {
      padding: 20px;
      border: none;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
@media screen and (min-width: 981px) and (max-width: 1099px) {
  .container {margin: 0 1%;}
  .champion {width: 14%;}
  .split {width:43%; }
  .split-one .vote-box {margin-left: 138px;}
  .hero p.intro {font-size: 28px;}
  .hero p.year {margin: 5px 0 10px;}

}

@media screen and (max-width: 980px) {
  .container {-webkit-flex-direction:column;-moz-flex-direction:column;flex-direction:column;}
  .split, .champion {width: 90%;margin: 35px 5%;}
  .champion {-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;}
  .split {border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;}
  .hero p.intro {font-size: 24px;}
  .hero h1 {font-size: 2.5em; margin: 15px 0;}
  .hero p {font-size: 1em;}
}


@media screen and (max-width: 400px) {

  .split {width: 95%;margin: 25px 2.5%;}
  .round {width:21%;}
  .current {-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;}
  .hero h1 {font-size: 2.15em; letter-spacing: 0;margin:0; }
  .hero p.intro {font-size: 1.15em;margin-bottom: -10px;}
  .round-details {font-size: 90%;}
  .hero-wrap {padding: 2.5em;}
  .hero p.year {margin: 5px 0 10px; font-size: 18px;}

}

/* === Bracket width + horizontal scroll ================================== */
:root{
  /* tune these to taste */
  --col-min: 260px;   /* min width of each round column */
  --team-min: 220px;  /* min width of each <li> "box" */
}

#bracket{
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Make the whole bracket as wide as it needs */
.container{
  max-width: none !important;
  width: max-content !important;
}

/* Let left/right halves and champ block size to content (not % of viewport) */
.split,
.champion{
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Give each round column a solid width so items don’t crush */
.round{
  width: auto !important;
  flex: 0 0 var(--col-min) !important; /* fixed column width */
}

/* === Matchup / Team sizing ============================================== */
.matchup{
  width:  100%  !important;   /* column grows to fit widest team */
  padding: 10px 0;
}

/* Make the team row flex so name + score are side-by-side cleanly */
.team{
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: var(--team-min) !important;  /* wider boxes */
  width: 95% !important;           /* can grow for long names */
  padding: 0 10px;
  white-space: nowrap;
  overflow: visible !important;            /* don’t clip long names */
  height: 25px;
  line-height: 25px;
 /* position: relative; */                     /* keep your look */
}

/* Move score into the flex flow so it never overlaps the name */
.score{
  position: static !important;
  margin-left: auto;       /* push score all the way right */
  float: none !important;
  right: auto !important;
}

.round-three{
  margin-right:5px !important;
}

/* Optional: on small screens reduce the column/box widths a bit */
@media (max-width: 980px){
  :root{
    --col-min: 220px;
    --team-min: 190px;
  }
}

#bracket::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Edge (WebKit/Blink) */
}

/* Hide scrollbars globally but keep scrollability */
html, body {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old IE/Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.hero p{
  color: #CA5C5C !important;
}

/* badge sizing/colors (tweak if you want) */
:root{
  --terrain-badge-size: 18px;     /* base circle size */
  --terrain-badge-bg:   #e53935;  /* red background */
  --terrain-badge-fg:   #ffffff;  /* text color */
}
/* terrain badge (circle/pill), centered vertically on the left */
.team > .terrain{
  min-width: var(--terrain-badge-size);
  height: var(--terrain-badge-size);
  line-height: var(--terrain-badge-size);
  border-radius: 9999px;          /* circle/pill */
  background: var(--terrain-badge-bg);
  color: var(--terrain-badge-fg);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

/* hide the badge when there is no value */
.team > .terrain:empty{
  display: none;
}

/* Dim all items by default */
.champion li,
.round li {
  background-color: #fff;
  opacity: .45;
}

/* When a round is active, make its items full white */
.round.current li { opacity: 1; }
.round.current li.team {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}