@import "https://www.nerdfonts.com/assets/css/webfont.css";

/* source-serif-pro-latin-400-normal */
@font-face {
  font-family: "Source Serif Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-serif-pro@latest/latin-400-normal.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/source-serif-pro@latest/latin-400-normal.woff)
      format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* source-serif-pro-latin-ext-400-normal */
@font-face {
  font-family: "Source Serif Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-serif-pro@latest/latin-ext-400-normal.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/source-serif-pro@latest/latin-ext-400-normal.woff)
      format("woff");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/**************************************************
 * Variables
 **************************************************/
:root {
  --color-foreground: #000;
  --color-background: #fff;
  --color-active-foreground: rgb(185, 0, 74);
  --color-active-background: rgb(255, 226, 226);
}

/**************************************************
 * Game, locations, layout
 **************************************************/
x-game {
  position: fixed;
  inset: 0;
  padding: 1rem;
  text-align: center;
  font-family: "Source Serif Pro";
}

x-location {
  display: none;
  flex-grow: 1;
  flex-shrink: 0;

  &[active] {
    display: block;
  }

  menu {
    padding: 2rem;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

x-game {
  display: flex;
  flex-direction: column;

  x-location {
    flex-grow: 1;
    flex-shrink: 0;
  }

  #hud {
    flex-grow: 0;
    flex-shrink: 0;
    order: 100000;
  }
}

/**************************************************
 * Interactive elements
 **************************************************/
x-location menu a,
x-action,
x-game button,
x-inspection::part(button) {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1),
    color 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  border: 2px solid var(--color-foreground);
  background-color: var(--color-background);
  color: var(--color-foreground);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 0.5em;

  &:hover {
    color: var(--color-active-foreground);
    border-color: var(--color-active-foreground);
    background-color: var(--color-active-background);
  }
}

x-inspection::part(button):hover {
  color: var(--color-active-foreground);
  border-color: var(--color-active-foreground);
  background-color: var(--color-active-background);
}

x-expand {
  display: none;
}

/**************************************************
 * HUD
 **************************************************/

#hud {
  padding: 0.5rem;
  gap: 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  /* 
  button {
    background-color: var(--color-foreground);
    color: var(--color-background);
    border: 0;
    border-radius: 0.25rem;
    padding: 0.25rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    cursor: pointer;
    &:hover {
      background-color: var(--color-active-foreground);
    }
  } */
}

/**************************************************
 * Utilitiles
 **************************************************/
x-game {
  .visible {
    display: block;
  }
  .hide {
    display: none;
  }
}

x-state {
  display: contents;
}

/**************************************************
 * Inspections
 **************************************************/
x-inspect {
  cursor: help;
  text-decoration: underline;
}

/**************************************************
 * Reveal animations
 **************************************************/
x-reveal[active] > * {
  opacity: 0;
  pointer-events: none;
}

x-reveal[active] > *.reveal {
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
}

/**************************************************
 * State
 **************************************************/

x-when,
x-value {
  display: none;
}

/** Some helper classes for state related stuff */

.x-when--none-matches {
  display: none;
}

.x-when:not(:has(x-when.visible)) .x-when--none-matches {
  display: block;
}

/**************************************************
 * Profiles
 **************************************************/

x-profile {
  display: none;
}