/* ------------------------------------------------------------------ */
/* Font Faces
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: normal;
  src: url("/fonts/Source_Serif_4_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: italic;
  src: url("/fonts/Source_Serif_4_Var_It.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: normal;
  src: url("/fonts/Source_Sans_3_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: italic;
  src: url("/fonts/Source_Sans_3_Var_It.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro Variable";
  font-style: normal;
  src: url("/fonts/Source_Code_Pro_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro Variable";
  font-style: italic;
  src: url("/fonts/Source_Code_Pro_Var_It.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* View Transition
/* ------------------------------------------------------------------ */

@view-transition {
  navigation: auto;
  type: none;
}

/* ------------------------------------------------------------------ */
/* Variables
/* ------------------------------------------------------------------ */

:root {
  /* Font Faces */
  --font-face-body: "Source Serif 4 Variable", serif;
  --font-face-sans: "Source Sans 3 Variable", sans-serif;
  --font-face-code: "Source Code Pro Variable", monospace;

  /* Font Sizes */
  --font-size-300: clamp(0.9375rem, 0.7500rem + 0.625vw, 1.1250rem);
  --font-size-400: clamp(1.1250rem, 0.9375rem + 0.625vw, 1.3125rem);
  --font-size-700: clamp(1.3125rem, 1.1250rem + 0.625vw, 1.5000rem);

  /* Font Weights */
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-700: 700;

  /* Text Colors */
  --color-text-300:   light-dark(hsl(  0   0%  25% / 100%), hsl(  0   0%  70% / 100%));
  --color-text-400:   light-dark(hsl(  0   0%  15% / 100%), hsl(  0   0%  85% / 100%));
  --color-text-700:   light-dark(hsl(  0   0%   5% / 100%), hsl(  0   0%  95% / 100%));

  /* Colors */
  --color-accent:     light-dark(hsl(220  50%  40% / 100%), hsl(220  50%  60% / 100%));
  --color-background: light-dark(hsl(  0   0%  95% / 100%), hsl(  0   0%   5% / 100%));
}

/* ------------------------------------------------------------------ */
/*
/* ------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

::selection {
  background-color: hsl(from var(--color-accent) h s l / 50%);
}

::marker {
  color: var(--color-accent);
}

html {
  accent-color          : var(--color-accent);
  background-color      : var(--color-background);
  color-scheme          : light dark;
  interpolate-size      : allow-keywords;
  scroll-behavior       : smooth;
  scroll-padding-block  : 4rem;
  scroll-padding-inline : 6rem;
  scrollbar-gutter      : stable;
}

body {
  display          : block flex;
  flex-direction   : column;
  gap              : 0.5rem;
  margin-block     : 0;
  margin-inline    : auto;
  padding-block    : 0;
  padding-inline   : 0;
  min-block-size   : 100svb;
  inline-size      : min(45rem, 100% - 2rem);

  font-family      : var(--font-face-sans);
  /* font-size        : var(--font-size-400); */
  font-weight      : var(--font-weight-400);
  text-rendering   : optimizeLegibility;
  text-size-adjust : none;
  color            : var(--color-text-400);
}

body > :is(header, footer) {
  display          : block flex;
  margin-block     : 1.0rem;
  margin-inline    : 0.0rem;
  padding-block    : 1.0rem;
  padding-inline   : 1.0rem;

  flex-direction   : row;
  flex-wrap        : wrap;
  justify-content  : space-between;
  align-items      : center;
  gap              : 0.5rem 2.0rem;

  border-radius    : 0.5rem;
  background-color : light-dark(
    hsl(from var(--color-accent) h 15% 90% / 100%),
    hsl(from var(--color-accent) h 15% 10% / 100%)
  );
}

body > header {

  & > a {
    display        : block flow;
    font-size      : var(--font-size-400);
    font-weight    : var(--font-weight-700);
    color          : var(--color-text-700)
  }

  & button[popovertarget] {
    display : none;
  }

  & button#share {
    inline-size    : 8rem;
    text-align     : center;
    vertical-align : middle;
    padding        : 0.5rem 1.0rem;
    border         : 2px solid currentColor;
    border-radius  : 0.5rem;
    background     : transparent;
    color          : inherit;
    font           : inherit;
    cursor         : pointer;
    opacity        : 0.7;
    transition     : opacity 0.15s;

    &:hover {
      opacity: 1;
    }
  }
}

body > footer {

}

body > main {
  flex : 1 0 auto;
  overflow-x      : auto;
}

a {
  text-decoration : none;
  color           : currentColor;
  transition      : color 0.2s ease-in-out;

  &[href]:hover {
    color         : var(--color-accent);
  }
}

table {
  margin-inline   : auto;
  border-collapse : collapse;
  font-size       : 1rem;
}

thead {

}

tfoot {

}

tbody {

}

tr {

}

th {

}

th, td {
  padding-block  : 0.4rem;
  padding-inline : 0.8rem;

  border         : 2px solid light-dark(
    hsl(from var(--color-text-400) h s 65% / 100%),
    hsl(from var(--color-text-400) h s 35% / 100%)
  );

  text-align     : center;
  vertical-align : middle;
}

th.group {
  inline-size    : 3.5rem;
  padding-inline : 1.2rem;
}

th.team {
  inline-size : 5rem;

  & img.team-flag {
    display        : block;
    margin-block   : 0;
    margin-inline  : auto;
  }

  & div.team-code {
    margin-block-start : 0.5rem;
  }
}

td[data-click] {
  block-size           : 3.5rem;
  inline-size          : 3.5rem;
  font-variant-numeric : tabular-nums;
}

td[data-click="1"] {
  --color-background : light-dark(hsl(120  50%  70% / 100%), hsl(120  50%  30% / 100%));
  background-color   : var(--color-background);
  color              : contrast-color(var(--color-background));
}

td[data-click="2"] {
  --color-background : light-dark(hsl( 30  50%  70% / 100%), hsl(030  50%  30% / 100%));
  background-color   : var(--color-background);
  color              : contrast-color(var(--color-background));
}