/* ****************** fontface ****************** */
/* Don't use them at the moment: */
/* TODO : change fonts to something like Roboto or Quattrocento Sans */

/* Libre Franklin - Regular (variable) */
@font-face {
  font-family: 'Libre Franklin';
  src: url('./fonts/LibreFranklin-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Libre Franklin - Italic (variable) */
@font-face {
  font-family: 'Libre Franklin';
  src: url('./fonts/LibreFranklin-Italic-VariableFont_wght.ttf')
    format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Dosis - Regular (variable) */
@font-face {
  font-family: 'Dosis';
  src: url('./fonts/Dosis-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light theme (default) */
  --text-primary: #212529;
  --text-secondary: #50565b;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --accent: #413b59;
  --accent-reverse: #d3cce7;
  /* #3B3B88  #4a0e94*/
  --accent-2: #0d6efd;
  --text-box: #343a40;

  /* BLOCK COLORS */
  /* PRIMARY */
  --box-dark-primary: #0b0227;
  --box-mid-dark-primary: #160840;
  --box-medium-primary: #81779e;
  --box-light-primary: #c1bad5;
  --box-spare-primary: #3e2f6b;

  /* SECONDARY */
  --box-dark-secondary: #393000;
  --box-mid-dark-secondary: #5d4d02;
  --box-medium-secondary: #e6dca6;
  --box-light-secondary: #fff9da;
  --box-spare-secondary: #9c8c39;

  /* TERTIARY (Teal) */
  --box-dark-tertiary: #022727;
  --box-mid-dark-tertiary: #084040;
  --box-medium-tertiary: #2f6b6b;
  --box-light-tertiary: #bad5d5;

  /* QUATERNARY (Rust) */
  --box-dark-quaternary: #270b02;
  --box-mid-dark-quaternary: #401608;
  --box-medium-quaternary: #6b3e2f;
  --box-light-quaternary: #d5c1ba;

  /* QUINARY (Sage) */
  --box-dark-quinary: #0b2702;
  --box-mid-dark-quinary: #164008;
  --box-medium-quinary: #3e6b2f;
  --box-light-quinary: #bad5ba;

  /* SENARY (Burgundy) */
  --box-dark-senary: #27020b;
  --box-mid-dark-senary: #400816;
  --box-medium-senary: #6b2f3e;
  --box-light-senary: #d5bad5;

  --box-dark-disabled: #545454;
  --box-light-disabled: #a0a0a0;

  /* GOLDEN RATIO VALUES */
  --golden-ratio: 1.618;
  --golden-minor: 0.618; /* 1 / golden-ratio */
  --golden-major: 2.618; /* golden-ratio squared */

  /* Derived values */
  --aspect-ratio: calc(var(--golden-ratio) * 3 / 2);
  --golden-minor-rem: calc(var(--golden-minor) * 1rem);
  --golden-ration-boxes: calc(var(--golden-ratio) * 100px);

  /* New Box Sizes: */
  --box-width-max-large-screens: 130px;
  --box-width-min-large-screens: 110px;
  --box-width-max: 100px;
  --box-width-min: 90px;
  --box-width-max-very-small-screen: 80px;
  --box-width-min-very-small-screen: 70px;

  /* Spacing & fonts */

  --font-main: system-ui, sans-serif;
  --spacing-unit: 1rem;
  --max-width-buttons: 6rem; /* for buttons */
  --max-width-screen: 90dvw;
}

/* Dark theme via @media */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --bg-primary: #212529;
    --bg-secondary: #343a40;
    --accent: #d3cce7;
    --accent-reverse: #413b59;
  }
}

[data-theme='dark'] {
  /* Dark theme overrides */
  --text-primary: #f8f9fa;
  --text-secondary: #adb5bd;
  --bg-primary: #212529;
  --bg-secondary: #343a40;
  --accent: #d3cce7;
  --accent-reverse: #413b59;
}

[data-theme='light'] {
  /* Light theme overrides */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --accent: #413b59;
  --accent-reverse: #d3cce7;
}

/* *********************************************** */

/* ****************** BODY: ****************** */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
}

body {
  display: grid;
  justify-content: center;
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
.main {
  max-width: var(--max-width-screen);
  min-width: 20dvw;
}

.display-and-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex: 0 0 auto;
  margin-top: 1.4rem;
}

.display {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4rem;
  padding: 0.8rem;
  max-width: 100%;
}

.actions {
  max-width: 95vw;
  display: flex;
  justify-content: center;
  gap: var(--spacing-unit);
  max-width: 100%;
}

.below-game {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);
}
.instructions-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: fit-content;
  max-width: var(--max-width-screen, 90vw);
}

.instructions {
  margin-top: calc(var(--golden-minor) * 1rem);
  margin-bottom: calc(var(--golden-minor) * 1rem);
  text-align: center;
}

button {
  background: var(--bg-secondary);
  padding: var(--spacing-unit);
  color: var(--accent);
  /* aspect-ratio: var(--aspect-ratio); */
  border-radius: var(--golden-minor-rem);
  border: 1.4px solid var(--text-secondary);
}

#theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: calc(var(--golden-minor) * 1rem);
  padding: calc(var(--golden-minor) * 1rem);
}

h1 {
  font-size: 4.236rem;
  margin-bottom: 1.4rem;
  margin-top: calc(var(--golden-major) * 1rem);
  text-align: center;
}

h2 {
  font-size: 1.618rem;
  text-align: center;
  margin-bottom: calc(var(--golden-major) * 1rem);
}

/* footer {
  font-size: 0.8rem;
  font-weight: 200;
  text-align: center;
  margin-top: 14px;
} */
/* ********************* Link style for github: ********************* */
.see-code {
  color: var(--text-primary);
}
.see-code:link {
  color: var(--accent-2);
}
.see-code:visited {
  color: var(--text-secondary);
}
.see-code:hover {
  color: var(--accent);
}
/* ********************* fut feat choose bases ********************* */
.choose-bases {
  text-align: center;
  margin-bottom: var(--spacing-unit);
}
.choose-bases p {
  margin-bottom: calc(var(--golden-minor) * 1rem);
}
.choose-bases label {
  margin: 0 calc(var(--golden-minor) * 0.5rem);
}
.choose-bases button {
  margin-top: var(--spacing-unit);
}
.base1-button {
  background-color: var(--box-light-primary);
  border: 2px solid var(--box-dark-primary);
}
.base2-button {
  background-color: var(--box-light-secondary);
  border: 2px solid var(--box-dark-secondary);
}
.base3-button {
  background-color: var(--box-light-tertiary);
  border: 2px solid var(--box-dark-tertiary);
}
.base4-button {
  background-color: var(--box-light-quaternary);
  border: 2px solid var(--box-dark-quaternary);
}
.base5-button {
  background-color: var(--box-light-quinary);
  border: 2px solid var(--box-dark-quinary);
}
.base6-button {
  background-color: var(--box-light-senary);
  border: 2px solid var(--box-dark-senary);
}
/* ********************* GRID: ********************* */
.grid-container {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
  grid-template-columns: repeat(8, 1fr);
  width: fit-content;
  max-width: var(
    --max-width-screen,
    90vw
  ); /* fall back to 90vw if the variable with 90dvw fails */
  place-content: center;
  place-items: center;
  gap: 30px;
  margin: 0 auto;
  max-width: 95vw;
  perspective: 13000px;
  transform-style: preserve-3d;
}

/* .grid-container::after {
  content: '↓ Scroll for more';
  position: sticky;
  bottom: 0;
  text-align: center;
  padding: 8px;
} */

/* ****************** BLOCKS: ****************** */

.block {
  text-align: center;
  /* place-items: center;
  place-content: center; */
  /* aspect-ratio: 3/3; */
  width: 120px;
  height: 120px;
  /* min-width: var(--box-width-min-large-screens);
  max-width: var(--box-width-max-large-screens); */
  /* background-color: var(--accent-2); */
  /*   border: 1px solid white; */
  /* color: var(--box-dark-primary); */
  color: var(--text-box);
  font-size: 1.382rem;
  font-weight: 800;
  /* background-color: var(--box-light-primary);
  border: 3px solid var(--box-dark-primary); */
  /* 3D Properties */
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  cursor: pointer;
  /* border-radius: 5px; */
}
/* .block:hover {
  background-color: var(--box-medium-primary);
  border: 3px solid var(--box-mid-dark-primary);
} */
/* ****************** COLORED BASES: ****************** */
/* *************** BASE 0: *************** */
.base0 {
  background-color: var(--box-light-senary);
  border: 3px solid var(--box-dark-senary);
}
.base0:hover {
  background-color: var(--box-medium-senary);
  border: 3px solid var(--box-mid-dark-senary);
}
/* *************** BASE 1: *************** */
.base1 {
  background-color: var(--box-light-primary);
  border: 3px solid var(--box-dark-primary);
}
.base1:hover {
  background-color: var(--box-medium-primary);
  border: 3px solid var(--box-mid-dark-primary);
}
/* *************** BASE 2: *************** */
.base2 {
  background-color: var(--box-light-secondary);
  border: 3px solid var(--box-dark-secondary);
}
.base2:hover {
  background-color: var(--box-medium-secondary);
  border: 3px solid var(--box-mid-dark-secondary);
}
/* *************** BASE 3: *************** */
.base3 {
  background-color: var(--box-light-tertiary);
  border: 3px solid var(--box-dark-primary);
}
.base3:hover {
  background-color: var(--box-medium-tertiary);
  border: 3px solid var(--box-mid-dark-tertiary);
}
/* *************** BASE 4: *************** */
.base4 {
  background-color: var(--box-light-quaternary);
  border: 3px solid var(--box-dark-quaternary);
}
.base4:hover {
  background-color: var(--box-medium-quaternary);
  border: 3px solid var(--box-mid-dark-quaternary);
}
/* *************** BASE 5: *************** */
.base5 {
  background-color: var(--box-light-quinary);
  border: 3px solid var(--box-dark-quinary);
}
.base5:hover {
  background-color: var(--box-medium-quinary);
  border: 3px solid var(--box-mid-dark-quinary);
}

/* *************** DISABLE & SELECT *************** */
/* 
.disabled {
  background-color: var(--box-dark-disabled);
  color: var(--box-light-disabled);
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}
.disabled:hover {
  background-color: var(--box-dark-disabled);
  color: var(--box-light-disabled);
}
.disabled-face {
  background-color: var(--box-dark-disabled);
  color: var(--box-light-disabled);
  opacity: 0.5;
  pointer-events: none;
}
.selected {
  transform: scale(114%);
  transition: transform 0.2s ease;
  z-index: 10;
}
.deselected {
  transform: scale(100%);
  transition: transform 0.2s ease;
  z-index: 2;
}
.deselected-face {
  transform: scale(1);
  z-index: 2;
} */

.disabled {
  /* background-color: var(--box-dark-disabled);
  color: var(--box-light-disabled);
  z-index: 1;
  opacity: 0.5; */
  pointer-events: none;
}
/* .disabled:hover {
  background-color: var(--box-dark-disabled);
  color: var(--box-light-disabled);
} */
.selected {
  /* transform: scale(114%);
   box-shadow: 0 0 8px gold; 
  animation: pulse 0.5s infinite;
  transition: transform 0.2s ease;
  z-index: 10; */
}
.deselected {
  /*transform: scale(100%);
  transition: transform 0.2s ease;
    z-index: 2; */
}
.disabled-face {
  background-color: var(--box-dark-disabled);
  color: var(--box-light-disabled);
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}
.selected-face {
  /* transform: scale(1.05); */
  z-index: 10;
  box-shadow: 0 0 10px var(--text-secondary);
  /* outline: 10px solid var(--text-secondary); */
  box-shadow:
    0 0 0 5px var(--bg-primary),
    /* Gap color (background color) */ 0 0 0 10px var(--text-secondary); /* Outer "outline" color */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
/* .deselected-face is actually useless from css speaking. did i use it in main.js for seomething? test it. 
actually, i even seem to apply both to some boxes, causing errors to occur */
.deselected-face {
  /* transform: scale(1);
  box-shadow: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  z-index: 2; */
}

/*   *********************** 3D Logic ***********************   */

/* Faces of the Block */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border: 1px solid #999;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 0.3rem;
  /* color: #333; */
  box-sizing: border-box;
  /* max-width: 95vw; */
}

/* Face Positions (3D Transformations) */
.face-0 {
  transform: rotateY(0deg) translateZ(60px);
}
.face-1 {
  transform: rotateY(90deg) translateZ(60px);
}
.face-2 {
  transform: rotateY(180deg) translateZ(60px);
}
.face-3 {
  transform: rotateY(-90deg) translateZ(60px);
}
.face-top {
  transform: rotateX(90deg) translateZ(60px);
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(60px);
}

/* Grid Perspective */
.grid-container {
  perspective: 13000px;
}

/*   *********************** @media ***********************   */

/*       ***************** mobile *****************       */

/* larger screens */
@media (min-width: 1320px) {
  .grid-container {
    grid-template-columns: repeat(8, 1fr);
    gap: 30px;
  }
  h1 {
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
  .block {
    width: 120px;
    height: 120px;
  }
  .face {
    font-size: 1.8rem;
    font-weight: 600;
    padding: 0.3rem;
  }
  /* Face Positions (3D Transformations) */
  .face-0 {
    transform: rotateY(0deg) translateZ(60px);
  }
  .face-1 {
    transform: rotateY(90deg) translateZ(60px);
  }
  .face-2 {
    transform: rotateY(180deg) translateZ(60px);
  }
  .face-3 {
    transform: rotateY(-90deg) translateZ(60px);
  }
  .face-top {
    transform: rotateX(90deg) translateZ(60px);
  }
  .face-bottom {
    transform: rotateX(-90deg) translateZ(60px);
  }
}

/* medium screens */
@media (max-width: 1230px) {
  h1 {
    margin-bottom: 1.6rem;
  }
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
  }
  .block {
    width: 120px;
    height: 120px;
  }
  .face {
    font-size: 1.7rem;
    font-weight: 600;
    padding: 0.25rem;
  }
  /* Face Positions (3D Transformations) */
  .face-0 {
    transform: rotateY(0deg) translateZ(60px);
  }
  .face-1 {
    transform: rotateY(90deg) translateZ(60px);
  }
  .face-2 {
    transform: rotateY(180deg) translateZ(60px);
  }
  .face-3 {
    transform: rotateY(-90deg) translateZ(60px);
  }
  .face-top {
    transform: rotateX(90deg) translateZ(60px);
  }
  .face-bottom {
    transform: rotateX(-90deg) translateZ(60px);
  }
}

/* small screens */
@media (max-width: 915px) {
  #theme-toggle {
    top: 0.5rem;
    padding: calc(var(--golden-minor) * 0.8rem);
  }
  h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .grid-container {
    max-width: 99vw;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
  }
  .block {
    width: 80px;
    height: 80px;
  }
  .face {
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.2rem;
  }
  /* Face Positions (3D Transformations) */
  .face-0 {
    transform: rotateY(0deg) translateZ(40px);
  }
  .face-1 {
    transform: rotateY(90deg) translateZ(40px);
  }
  .face-2 {
    transform: rotateY(180deg) translateZ(40px);
  }
  .face-3 {
    transform: rotateY(-90deg) translateZ(40px);
  }
  .face-top {
    transform: rotateX(90deg) translateZ(40px);
  }
  .face-bottom {
    transform: rotateX(-90deg) translateZ(40px);
  }
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    gap: 13px;
  }
  .block {
    font-size: 1rem;
    width: 70px;
    height: 70px;
  }
  .face {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.15rem;
  }
  /* Face Positions (3D Transformations) */
  .face-0 {
    transform: rotateY(0deg) translateZ(35px);
  }
  .face-1 {
    transform: rotateY(90deg) translateZ(35px);
  }
  .face-2 {
    transform: rotateY(180deg) translateZ(35px);
  }
  .face-3 {
    transform: rotateY(-90deg) translateZ(35px);
  }
  .face-top {
    transform: rotateX(90deg) translateZ(35px);
  }
  .face-bottom {
    transform: rotateX(-90deg) translateZ(35px);
  }
}

@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
  .block {
    font-size: 1rem;
  }
}
@media (max-width: 404px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
  .block {
    font-size: 1rem;
  }
}

/*       ***************** reduced-motion  *****************       */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .block {
    transition: none !important;
    animation: none !important;
  }
  .selected-face {
    animation: none !important;
  }
}