/* no fancy scss, we be raw doggin css */

body {
  width: 1920px;
  height: 1080px;
  margin: 0;
}

.bracket-wrapper {
  position: relative;
  margin: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background-color: #2a2a2a;
  background: url('https://rashinban.org/assets/images/key-visual.png');
}

.mini .bracket-wrapper {
  background: transparent;
}

.mini .bracket-wrapper::after {
  background: transparent;
}

/* blur and darken it with a semi-transparent scrim */
.bracket-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(3px);
  transform: scale(1.05);
  z-index: 0;
}
/* darken background */
.bracket-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

svg.bracket-svg {
  position: relative;
  width: 100%;
  height: 100%;
  /* width: 1920px;
  height: 1080px; */
  display: block;
  z-index: 3;
}

svg:not(:root) {
  overflow: hidden;
}

svg.bracket-svg {
  position: absolute;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  overflow: visible;
}

.match {
  font-family: 'Noto Sans JP';
  font-weight: bold;
}

.bracket-line-container {
  transition: 0.5s ease-in-out;
}

.bracket-line {
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 1px;
}

.bracket-line.-entering {
  -webkit-animation: dash 0.3s linear forwards;
  animation: dash 0.3s linear forwards;
}

.bracket-line.-leaving {
  opacity: 0;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.match {
  overflow: visible;
  transition: 0.5s ease-in-out;
}

.match-border{
  display: none;
}

.match-border.active{
  display: block;
}

.match.-entering {
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

.match.-leaving {
  opacity: 0;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.match--base-background {
  fill: #272727;
}

.match--wrapper-background {
  fill-opacity: 0;
  shape-rendering: auto;
}

.match--wrapper-background.-underway {
  fill: #08c;
  fill-opacity: 1;
}

.match--scores-wrapper,
.match--menu-wrapper {
  fill: rgba(37, 37, 37, 0.95);
  stroke: #2a2a2a;
  stroke-width: 1px;
}

.match--score {
  font-size: 12px;
  fill: #bbb;
}

.match--identifier {
  fill: #999;
  font-size: 10px;
}

.match--identifier.-highlighted {
  fill: #3ae;
}

.match--seed {
  fill: white;
  font-size: 21px;
  font-family: 'kaneda-gothic', sans-serif;
  text-shadow: none;
  font-optical-sizing: auto;
  font-weight: 900;
  margin-top: var(--distance-from-top);
  font-style: normal;
}

.match--seed-background {
  fill: #646464;
}

.match--player.winner .match--seed-background {
  fill: #ff3030;
}

.match--player-score-background {
  fill: #838383;
}

.match--player-info-icon {
  visibility: hidden;
}

svg.match--player:not(:root) {
  overflow: visible;
}

svg.match--player.-over .match--player-background {
  fill: #222;
}

svg.match--player.-over .match--player-background.-drop-active {
  fill: #44b;
}

svg.match--player.-draggable {
  cursor: move;
}

svg.match--player.-drop-incomplete path {
  fill: #944;
}

svg.match--player.-drop-active path {
  fill: #77c;
}

svg.match--player.-drop-target path {
  fill: #44b;
}

svg.match--player.-incorrect path {
  fill: #644;
}

svg.match--player.-incorrect .match--player-name {
  text-decoration: line-through;
  fill: #999;
}

svg.match--player.-correct path {
  fill: #446ab6;
}

svg.match--player.-forfeited .match--player-name {
  text-decoration: line-through;
}

.match--player.-dragging rect {
  fill: #77c;
  stroke: #44b;
  stroke-width: 1px;
}

.match--player-portrait-backdrop {
  fill: #fff;
}

.match--player-name {
  fill: #000;
  font-size: 12px;
}

.match--player-score {
  fill: #252525;
  font-size: 12px;
  text-shadow: none;
}

.match--player-container {
  fill: #2392d0;
}

.match--player-background {
  fill: #cfcfcf;
}

.match--player-divider {
  stroke: #fff;
  stroke-width: 1px;
}

.match--decorative-path {
  fill: #2392d0;
}

.third-place-match-label {
  fill: #e9e9e9;
  font-weight: bold;
  transform: translate(0, -5px);
}

g.-pulsing {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: custom-fa-spin 0.5s infinite steps(8);
  -moz-animation: custom-fa-spin 0.5s infinite steps(8);
  animation: custom-fa-spin 0.5s infinite steps(8);
}

@-webkit-keyframes custom-fa-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359);
    transform: rotate(359);
  }
}

@keyframes custom-fa-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359);
    transform: rotate(359);
  }
}

.svg-tooltip {
  animation: fadein 0.3s;
}

.svg-tooltip rect {
  fill: #252525;
}

.svg-tooltip polygon {
  fill: #252525;
}

.svg-tooltip text {
  fill: #fff;
  font-size: 13px;
}

.round-label rect {
  fill: #626262bf;
}

.round-label text {
  fill: #fff;
  font-size: 12px;
}

.round-label text.round-label--best-of {
  fill: #6cf;
  font-weight: bold;
}

.rounds {
  opacity: 1;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 0.15s;
  -o-transition-duration: 0.15s;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.rounds.-hidden {
  opacity: 0;
}

.round-header-label text {
  fill: #fff;
  font-size: 16px;
  font-weight: bold;
}

.round-header-label text.round-header-label--best-of {
  fill: #6cf;
  font-size: 12px;
}