/* hoooii, ik heb bij (bijna) elke chunk code een comment gezet met wat het doet! 
om duidelijk te maken wat het is/doet en zodat ik het ook zelf nog kan terugvinden :D */

/* ==================================================
   * MARK: BASIS
   ================================================== */

/* light-dark colour scheme */
:root {
  color-scheme: light dark;

  --color-background: light-dark(#d6b8ed, #16002a);
  --color-text: light-dark(#892a6f, #a4a4ef);
  --color-muted: light-dark(#8355b4, #a0a0c8);
  --color-content: light-dark(#010101, #ccc);
  --color-cookie: light-dark(#f5f5f5, #3a2849);
  --color-subtle: light-dark(#8355b4, #888);
  --color-border: light-dark(#872020, #a569c9);
  --color-footer: light-dark(#ca326a, #971fe6);
  --color-focus: light-dark(#010101, #f5f5f5);
  --color-button: light-dark(#710bcc, #f5f5f5);
  --color-crt: light-dark(#0004, #3338);
  --color-disabled: light-dark(#ac71a7, #4b4b70);
}

/* fonts die gebruikt worden */

@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/type/PressStart2P-Regular.ttf");
}

@font-face {
  font-family: "Silkscreen";
  src: url(/assets/type/Silkscreen-Regular.ttf);
}
@font-face {
  font-family: "HennyPenny";
  src: url(/assets/type/HennyPenny-Regular.ttf);
}

/* algemene styling van de pagina */
* {
  box-sizing: border-box;
}

html {
  background: var(--color-backgrou nd);
}

body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ". header ."
    ". main   ."
    ". footer .";

  margin: 0;

  min-block-size: 100svh;

  background: var(--color-background);
  color: var(--color-text);

  font-family: "Press Start 2P", monospace;

  line-height: 1.6;
}

/* De CRT lines die over de pagina heen gaan.
door body::after te gebruiken (en een z-index van 9999) is het een soort overlay over de body heen.*/
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  background: repeating-linear-gradient(
    to bottom,
    var(--color-crt) 0px,
    var(--color-crt) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ==================================================
     * MARK:TYPOGRAFIE
   ================================================== */
/* font sizing en waar nodig andere font families (font die standaard gebruikt wordt staat hierboven onder body*/
h1 {
  font-family: "HennyPenny", serif, system-ui;
  font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(0.8rem, 4vw, 1.2rem);
  color: var(--color-muted);
}

h3 {
  font-size: 0.7rem;
}

p {
  font-family: "Press Start 2P", serif, system-ui;
}

p,
li,
button,
a {
  font-size: clamp(0.65rem, 3vw, 0.8rem);
}

.hoofdletters {
  text-transform: uppercase;
}

#playsite {
  text-transform: uppercase;
}
/* ==================================================
     * MARK: MAIN
   ================================================== */

main {
  grid-area: main;

  inline-size: min(100% - 2rem, 60ch);
  justify-self: center;

  min-block-size: 60svh;

  margin-inline: auto;
  padding-block: 2rem;

  gap: 1.5rem;
}

/* ==================================================
     * MARK: HEADER
   ================================================== */

header {
  padding: 0.5em;
  grid-area: header;
  text-align: center;
}

header p {
  margin-block-end: 0.5rem;

  color: var(--color-muted);

  font-size: 0.55rem;
}

/* spacing zodat de content niet te ver van de header staat */
header h1 {
  margin-block-end: 0;
}
/* ==================================================
     * MARK: NAVIGATIE
   ================================================== */

nav li + li {
  margin-block-start: 0.5rem;
}

/* styling van de "play" knop, wanneer cookies niet geaccepteerd zijn.*/
.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* styling van de link-elementen */
a {
  display: block;

  inline-size: 100%;

  padding: 0.75rem 0;

  border: 0;

  background: transparent;
  color: var(--color-focus);

  font: inherit;

  text-align: left;
  text-decoration: none;

  cursor: pointer;
}

a::before {
  display: inline-block;

  inline-size: 1.5em;
}

a:hover::before,
a:focus-visible::before {
  animation: blink 1.8s infinite;
  content: "▶";
}

.back:hover::before,
.back:focus-visible::before {
  content: none;
}

.back:hover,
.back:focus-visible {
  outline: 0.15rem solid var(--color-focus);
  outline-offset: 0.3rem;
}

a:focus-visible,
summary:hover,
summary:focus-visible {
  outline: 0.15rem solid var(--color-focus);
  outline-offset: 0.3rem;
}

/* ==================================================
     * MARK: CONTENT
   ================================================== */

article {
  max-inline-size: 55ch;
}

article p {
  color: var(--color-content);

  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

button {
  inline-size: fit-content;

  margin-block-end: 2rem;

  color: var(--color-button);

  font-size: 0.6rem;
}

button:hover,
button:focus-visible {
  color: var(--color-button);
}

ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

ul li {
  padding-block: 1rem;
}

.stats {
  outline: 0.15rem solid var(--color-focus);
  outline-offset: 0.3rem;
}

/* ==================================================
   * MARK: COOKIES
   ================================================== */

#cookieModal {
  background-color: var(--color-cookie);
  font-family: Tahoma, serif, system-ui;
}
form > p {
  font-family: Tahoma, serif, system-ui;
  font-size: 1em;
}

button {
  background-color: var(--color-cookie);
  font-size: 0.7em;
}

/* ==================================================
     * MARK: FOOTER
   ================================================== */

footer {
  grid-area: footer;
  color: var(--color-footer);
  padding: 0.5em;
  text-align: center;
}

footer p {
  margin: 0;
  animation: blink 1.8s infinite;

  font-size: 0.5rem;
}

/* ==================================================
     * MARK: CHARACTER STATS
   ================================================== */

main > section {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
  align-items: start;

  margin-block: 2rem;
}

main > section figure {
  inline-size: 100%;
  margin: 0;
}

main > section figure img {
  display: block;

  inline-size: 100%;
  block-size: auto;

  aspect-ratio: 1;
  object-fit: contain;

  image-rendering: pixelated;
}

main > section figcaption {
  margin-block-start: 0.75rem;

  color: var(--color-muted);
  text-align: center;
}

main > section dl {
  margin: 0;
}

main > section dt {
  margin-block-start: 0.5rem;

  color: var(--color-muted);

  font-size: 0.55rem;
}

main > section dd {
  margin: 0.4rem 0 1.5rem;

  color: var(--color-text);

  font-size: 0.7rem;
}

article dl {
  margin: 0;
}

article dt {
  margin-block-start: 1rem;

  color: var(--color-text);

  font-size: 0.65rem;
}

article dd {
  margin: 0.35rem 0 0;

  color: var(--color-content);

  font-family: "Press Start 2P", monospace;
  font-size: 0.6rem;
}

progress {
  inline-size: min(100%, 18rem);
  block-size: 1rem;

  margin-inline-end: 0.5rem;

  accent-color: var(--color-text);
}
summary {
  color: var(--color-focus);
  cursor: pointer;
}

details p {
  font-family: "Silkscreen", system-ui;
}
#childhood {
  inline-size: 100%;
  block-size: auto;
  padding-top: 1vw;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}
/* ==================================================
     * MARK: INVENTORY 
   ================================================== */
/* nieuwe look voor de inventory pagina, op basis van deze site:https://chrome.dev/carousel/horizontal/tabs/ */
.inventory-page {
  inline-size: min(100% - 2rem, 70rem);
}

.inventory-content {
  display: grid;
  gap: 2rem;
  min-inline-size: 0;
}

/* ik heb max-inline-size: none gedaan zodat de panelen niet te smal worden! */
.inventory-panel {
  max-inline-size: none;

  min-inline-size: 0;
  min-block-size: 30rem;

  padding: clamp(1.5rem, 5vw, 3rem);

  border: 0.1rem solid var(--color-border);
}

.inventory-panel h2 {
  margin-block-end: 3rem;
}

.inventory-panel p {
  max-inline-size: 55ch;
  overflow-wrap: break-word;

  color: var(--color-content);

  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
/* dit zet de panelen naast elkaar in een scrollbare rij en laat de browser er tabs boven maken (alleen Chrome :( ) */
@supports selector(::scroll-marker) {
  .inventory-content {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    scroll-marker-group: before;
  }
}

.inventory-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;

  container-type: scroll-state;
}

/* de tabs :) */
.inventory-content::scroll-marker-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;

  margin-block-end: 1.5rem;
}

.inventory-panel::scroll-marker {
  padding-block: 0.75rem;

  color: var(--color-text);

  font-size: clamp(0.65rem, 3vw, 0.8rem);

  cursor: pointer;
  opacity: 0.55;
}

.ned::scroll-marker {
  content: "NEDGAMES";
}
.secondhand::scroll-marker {
  content: "2ND HAND SHOPS";
}
.vault::scroll-marker {
  content: "THE VAULT";
}

.inventory-panel::scroll-marker:hover,
.inventory-panel::scroll-marker:target-current {
  opacity: 1;
}

.inventory-panel::scroll-marker:target-current {
  text-decoration: underline;
}

.inventory-panel::scroll-marker:focus-visible {
  outline: 0.15rem solid var(--color-focus);
  outline-offset: 0.3rem;
}

.inventory-content p {
  font-family: "Silkscreen", system-ui;
}

/* ==================================================
     * MARK: ANIMATIE 
   ================================================== */
/* animatie voor de hover */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ==================================================
     * MARK: MEDIA QUERIES 
   ================================================== */

@media (min-width: 50rem) {
  main {
    padding-block: 2rem;
  }

  main > section {
    grid-template-columns: 6rem 1fr;
  }

  main > section figure {
    inline-size: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  footer p,
  a:hover::before,
  a:focus-visible::before {
    animation: none;
  }
}