:root {
  --base03:  #002b36;  /* darkest background */
  --base02:  #073642;  /* dark background */
  --base01:  #586e75;  /* muted content */
  --base00:  #657b83;  /* body text dark bg */
  --base0:   #839496;  /* body text */
  --base1:   #93a1a1;  /* comments/secondary */
  --base2:   #eee8d5;  /* light background */
  --base3:   #fdf6e3;  /* lightest background */
  --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;
}
@font-face {
    font-family: "NotoSansJP";
    src: url("NotoSansJP-VariableFont_wght.ttf");
}
body {
  background: var(--base03);
  color: var(--base0);
      font-family: "NotoSansJP";

}



table {
  width: 100%;
  border-collapse: collapse;
  background: var(--base02);
}

thead tr {
  background: var(--base01);
  color: var(--base3);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
}

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
}

tbody tr {
  border-bottom: 1px solid var(--base01);
}

tbody tr:hover {
  background: var(--base03);
}

.winner {
  color: var(--green);
  font-weight: bold;
}

.loser {
  color: var(--base0);
}

nav {
  background: var(--base02);
  border-bottom: 1px solid var(--base01);
}

button {
  background: var(--base01);
  color: var(--base3);
  border: 1px solid var(--base00);
}

button:hover {
  background: var(--blue);
  border-color: var(--blue);
}

button.danger {
  background: var(--red);
  border-color: var(--red);
}

input, select {
  background: var(--base02);
  color: var(--base0);
  border: 1px solid var(--base01);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
}
.stat-card {
  border-radius: 1rem;
  border: 2px solid #1b1b1b; 
  padding: 1rem;
  margin: .5rem;
  max-width: 200px;
  min-width: 200px;
  background-color: var(--base02);
  box-shadow: 2px 5px rgba(0,0,0,0.3);
}
#stat-card-container{
    display:flex;
    flex-wrap: wrap;
}
.stat-card:nth-child(1) {   border-color: var(--blue); }
.stat-card:nth-child(2) {  border-color: var(--green); }
.stat-card:nth-child(3) {   border-color: var(--cyan); }
.stat-card:nth-child(4) {  border-color: var(--yellow); }
.stat-card:nth-child(5) {  border-color: var(--orange); }
.stat-card:nth-child(6) {   border-color: var(--blue); }
.stat-card:nth-child(7) {   border-color: var(--violet); }
.stat-card:nth-child(8) {   border-color: var(--magenta); }
.stat-card:nth-child(1) h3 { color: var(--blue); }
.stat-card:nth-child(2) h3 { color: var(--green); }
.stat-card:nth-child(3) h3 { color: var(--cyan); }
.stat-card:nth-child(4) h3 { color: var(--yellow); }
.stat-card:nth-child(5) h3 { color: var(--orange); }
.stat-card:nth-child(6) h3 { color: var(--blue); }
.stat-card:nth-child(7) h3 { color: var(--violet); }
.stat-card:nth-child(8) h3 { color: var(--magenta); }
h1,h2, h3{
      --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;
    color:var(--base2)
}

nav {
  background: var(--base02);
  border-bottom: 1px solid var(--base01);
}

button {
  background: var(--base01);
  color: var(--base3);
  border: 1px solid var(--base00);
}

button:hover {
  background: var(--blue);
  border-color: var(--blue);
}

button.danger {
  background: var(--red);
  border-color: var(--red);
}

input, select {
  background: var(--base02);
  color: var(--base0);
  border: 1px solid var(--base01);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
}
.badge-easy   { background: var(--green);  color: var(--base03); }
.badge-medium { background: var(--yellow); color: var(--base03); }
.badge-hard   { background: var(--red);    color: var(--base3);  }


#prizes {
  margin-top: 2rem;
  padding: 1rem;
}

#prizes ul {
  list-style: none;
  padding: 0;
}

.prize {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--base02);
  border-left: 4px solid var(--yellow);
  color: var(--base1);
  border-radius: 0 6px 6px 0;
}

.prize:nth-child(2) { border-color: var(--cyan); }
.prize:nth-child(3) { border-color: var(--magenta); }
.prize:nth-child(4) { border-color: var(--green); }
.prize:nth-child(5) { border-color: var(--violet); }
.prize:nth-child(6) { border-color: var(--orange); }
.prize:nth-child(7) { border-color: var(--blue); }

#bubble-svg{
    max-width: 100%;
}
#tooltip {
  position: absolute;
  background: var(--base02);
  border: 1px solid var(--base01);
  color: var(--base0);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  pointer-events: none;
  box-shadow: 2px 4px rgba(0,0,0,0.4);
}