@layer reset, base, layout, components, utilities;

/* Normalize / modern-normalize */
@import url("./reset.css") layer(reset);

/* Element defaults (h1-h6, p, a…) */
@layer base {
  :root {
    --clr-royal-gold: #e9cc54;
    --clr-cerulean: #40798c;
    --clr-salmon: #e9806e;
    --clr-ivory-mist: #fcf8e8;
    --clr-pitch-black: #080702;
    --clr-pong-brown: #4e2915;

    /* https://coolors.co/palette/264653-2a9d8f-e9c46a-f4a261-e76f51 */
    --clr-charcoal-blue: #264653;
    --clr-verdigris: #2a9d8f;
    --clr-jasmine: #e9c46a;
    --clr-sandy-brown: #f4a261;
    --clr-burnt-peach: #e76f51;
    --clr-tint: #fdfbf4;
    --clr-shade: #151003;

    --color-primary: var(--clr-jasmine);
    --color-secondary-light: var(--clr-verdigris);
    --color-secondary-dark: var(--clr-charcoal-blue);
    --color-accent-light: var(--clr-sandy-brown);
    --color-accent-dark: var(--clr-burnt-peach);
    --color-white: var(--clr-tint);
    --color-black: var(--clr-shade);

    --ratio: 1.125;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s6: calc(var(--s5) * var(--ratio));

    --text-main: var(--color-black);
    --text-high-contrast: var(--clr-charcoal-blue);
    --text-brand: var(--color-primary);
    --text-brand-light: var(--clr-verdigris);

    --ff-heading: sans-serif;
    --ff-body: serif;

    --fs-200: var(--s-2);
    --fs-300: var(--s-1);
    --fs-400: var(--s0);
    --fs-500: var(--s1);
    --fs-600: var(--s2);
    --fs-700: var(--s3);
    --fs-800: var(--s4);
    --fs-900: var(--s5);
    --fs-1000: var(--s6);

    --font-size-xs: var(--fs-200);
    --font-size-sm: var(--fs-300);
    --font-size-regular: var(--fs-400);
    --font-size-md: var(--fs-500);
    --font-size-lg: var(--fs-600);
    --font-size-xl: var(--fs-700);
    --font-size-2xl: var(--fs-800);
    --font-size-3xl: var(--fs-900);
    --font-size-4xl: var(--fs-1000);

    --measure: 75ch;
    --min-touch-target: 50px;
    --input-icon-size: 2.25rem;
    --input-icon-spacing: 0.5rem;
  }

  * {
    max-inline-size: var(--measure);
  }

  html,
  body,
  div,
  header,
  nav,
  main,
  footer {
    max-inline-size: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--ff-heading);
    font-weight: 700;
    color: var(--text-main);
  }

  a {
    color: var(--text-high-contrast);
  }

  a:hover,
  a:focus-visible {
    color: var(--text-brand-light);
    background-color: var(--color-black);
    padding: 0.3rem;
  }

  body {
    font-family: var(--ff-body);
    font-size: var(--font-size-regular);
    background-color: var(--color-primary);
    color: var(--color-black);
    padding-inline: 0.5rem;
    padding-block: 0.5rem 1rem;
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  article {
    max-inline-size: none;
  }

  article > * {
    max-inline-size: var(--measure);
  }

  footer {
    text-align: center;
  }

  table,
  th,
  td {
    border: 1px solid;
  }

  th,
  td {
    padding: 0.2rem;
    min-width: 6rem;
    text-align: center;
  }

  th {
    color: var(--color-primary);
    background: var(--color-black);
  }

  section:not(#cover) {
    margin-block-start: 2rem !important;

    h2 {
      /* stick to top of screen */
      position: sticky;
      top: 0;
      z-index: 100;

      /* add gap between header links */
      display: flex;
      justify-content: space-between;
    }
  }

  section > h2,
  section > h3 {
    background-color: var(--color-black);
    color: var(--color-primary);
    padding: 0.6em;
    text-transform: uppercase;

    a {
      color: var(--text-brand);
      text-decoration: none;
    }

    a:hover,
    a:focus-visible {
      text-decoration: underline;
      padding: 0;
    }

    .top-link {
      font-size: var(--font-size-md);
    }

    a:not(.top-link):hover::after {
      content: " #";
    }
  }

  .instructions-link {
    text-align: center;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    margin-block-start: var(--input-icon-spacing) !important;

    a {
      color: var(--text-main);
      text-decoration: none;
    }

    a:hover,
    a:focus-visible {
      text-decoration: underline;
      color: var(--text-brand-light);
      text-decoration: none;
    }
  }

  figure,
  table {
    margin-block: 1.8em;
  }

  figure > img {
    margin-inline: auto;
    height: 22rem;
  }

  figcaption {
    text-align: center;
  }

  figcaption,
  caption {
    font-style: italic;
  }

  figcaption > span,
  caption > span {
    font-weight: bold;
    font-style: normal;
  }

  header,
  h1.title {
    max-inline-size: none;
    inline-size: 100%;
  }

  h1.title img {
    height: 3svh;
  }

  .page-container {
    margin-block-start: 1em;
  }

  .game-container > * + * {
    margin-block-start: 2em;
  }

  .input-device-compatibility {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
    gap: var(--input-icon-spacing);

    li.keyboard .icon {
      background-image: url("../images/input-keyboard.svg");
    }

    li.mouse .icon {
      background-image: url("../images/input-mouse.svg");
    }

    li.touchscreen .icon {
      background-image: url("../images/input-touch.svg");
    }

    li a,
    li span {
      background-size: contain;
      padding: 0;
      background-repeat: no-repeat;

      &:hover,
      &:focus-visible {
        background-color: initial;
      }

      .modifier {
        background-repeat: no-repeat;
      }
    }

    .icon {
      display: block;
      inline-size: var(--input-icon-size);
      block-size: var(--input-icon-size);

      position: relative;
      text-indent: -9999px;
    }

    [data-supported="false"] {
      /* text-decoration: line-through; */

      .modifier {
        background-image: url("../images/input-unsupported.svg");
        display: block;
        inline-size: var(--input-icon-size);
        block-size: var(--input-icon-size);
      }
    }
  }

  #instructions .input-device-compatibility {
    display: block;
    inline-size: max-content;

    .icon {
      text-indent: initial;
      block-size: calc(var(--input-icon-size) * 1.5);
      inline-size: max-content;

      .modifier {
        block-size: calc(var(--input-icon-size) * 1.5);
        inline-size: initial;
        padding-inline-start: calc(var(--input-icon-size) * 1.5 + 0.5rem);
        line-height: calc(var(--input-icon-size) * 1.5);
      }
    }
  }

  #pong {
    background-color: var(--color-black);
    max-inline-size: 100%;
    /* width: auto; */
    /* height: 85svh; */
    image-rendering: pixelated;
    display: block;
    margin: 0 auto;
    padding: min(4svw, 2.5rem);
    border-radius: min(4svw, 4rem);
    /* block-size: auto; */
    /* inline-size: max(90%, calc(85svh * 0.7375)) !important; */

    /* SOMETHING IS OFF HERE? */
    --canvas-width: max(100%, 85svh);
    block-size: var(--canvas-width) !important;
    inline-size: calc(var(--canvas-width) * 354 / 480) !important;

    /* is it portrait or landscape? */
    /* if landscape, make sure canvas height is less than viewport height */
    /* if portrait, make sure canvas width is less than viewport width */

    /* --canvas-height: 85svh; */
    /* block-size: var(--canvas-height) !important; */
    /* inline-size: calc(var(--canvas-height) * 480/354) !important; */
  }

  #cover {
    max-inline-size: none !important;
    --cover-width: calc(var(--measure) * 1.2162);
    inline-size: min(100%, var(--cover-width));
    /* margin-block-start: 2rem !important; */

    img {
      max-inline-size: var(--cover-width);
      width: 100%;
    }
  }

  .intro > h2,
  .intro > h3,
  .intro > div {
    background-color: var(--color-accent-dark);
    color: var(--color-black);
    margin-inline: auto;
    text-align: center;
    width: 82.222222%;
  }

  .intro > h2 {
    font-size: var(--font-size-4xl);
    /* @link https://utopia.fyi/clamp/calculator?a=320,430,22.78125—32.4365844 */
    font-size: clamp(
      var(--font-size-xl),
      -0.3317rem + 8.7776vw,
      var(--font-size-4xl)
    );
    padding-block-end: 0;
  }

  .intro > h3 {
    font-size: var(--font-size-2xl);
    /* @link https://utopia.fyi/clamp/calculator?a=320,430,20.25—25.6289 */
    font-size: clamp(
      var(--font-size-lg),
      0.2876rem + 4.8899vw,
      var(--font-size-2xl)
    );
    font-weight: normal;
    padding-block-start: 0;
  }

  .intro > div {
    font-family: var(--ff-heading);
    font-weight: bold;
    font-size: var(--font-size-xl);
    /* @link https://utopia.fyi/clamp/calculator?a=320,430,16—25.6289 */
    font-size: clamp(1rem, -0.1636rem + 5.8182vw, 1.4rem);
    font-size: clamp(
      var(--font-size-regular),
      -0.7507rem + 8.7535vw,
      var(--font-size-xl)
    );
    text-transform: uppercase;
    line-height: 1.2em;
    padding-inline: 1em;
    padding-block-end: 1em;
  }

  section#table-of-contents {
    margin-block-start: 0 !important;
  }

  #troubleshooting {
    table {
      border-collapse: collapse;
    }

    table ul {
      margin: 0;
      padding-inline: 2.8ch;
    }

    table,
    th,
    td {
      border: none;
    }

    th,
    td {
      padding: 0.2rem;
      min-width: 6rem;
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--color-primary);
      background: var(--color-black);
    }

    tr {
      border-top: 2px solid var(--color-accent-dark);
    }

    thead tr {
      border: 0;
    }

    thead th {
      text-align: center;
      font-family: var(--ff-heading);
      text-transform: uppercase;
      color: var(--color-black);
      background: var(--color-primary);
      font-size: var(--font-size-md);
      padding-block-end: 0.6rem;
    }

    td {
      padding-block: 0.6rem;
    }

    tr > td:first-child {
      border-right: 2px solid var(--color-accent-dark);
      font-weight: bold;
    }

    @media (max-width: 500px) {
      th {
        display: none;
      }

      td {
        display: block;
        border-right: none !important;
        width: 100%;
      }

      tr:first-child {
        border-top: none;

        td:first-child {
          padding-block-start: 0;
        }
      }

      tr:last-child {
        td:last-child {
          padding-block-end: 0;
        }
      }

      /* td::before { */
      /*   content: attr(data-cell) ": "; */
      /*   text-transform: capitalize; */
      /* } */
    }
  }

  .game-challenge {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 2px solid var(--color-accent-dark);
    padding-block: 0.8rem;
    /* background-color: var(--color-black); */
    /* color: var(--color-white); */

    a {
      font-weight: bold;
      /* color: var(--color-white); */
    }

    .prev,
    .next {
      min-inline-size: var(--min-touch-target);
      min-block-size: var(--min-touch-target);
      /* background-color: var(--color-accent-dark); */
      /* border: 2px solid var(--color-accent-dark); */
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: var(--min-touch-target);

      a {
        inline-size: var(--min-touch-target);
        block-size: var(--min-touch-target);
      }

      a:hover,
      a:focus-visible {
        padding: 0 !important;
      }
    }
  }
}

/* Grid, flex wrappers */
@layer layout {
  /* .stack { */
  /*   display: flex; */
  /*   flex-direction: column; */
  /*   justify-content: flex-start; */
  /* } */
  /**/
  /* .stack>* { */
  /*   margin-block: 0; */
  /* } */
  /**/
  /* .stack>*+* { */
  /*   margin-block-start: var(--space, 1.5rem); */
  /* } */

  .center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--measure);
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, 1.3em);
  }
}

/* Button, Card, Modal… */
@layer components {
}

/* Single-property helpers */
@layer utilities {
  .text-center {
    text-align: center;
  }

  .no-wrap {
    white-space: nowrap;
  }

  .text-brand {
    color: var(--text-brand);
  }

  .text-high-contast {
    color: var(--text-high-contrast);
  }
}