/* ------------- */
/* Reset / Base Styles */
/* ------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 1rem;
}

body,
h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  background-color: #fff4d6;
  color: #030303;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.25;
  font-family: "Jersey 25", "Press Start 2P", monospace;
}

img {
  display: block;
}

button {
  font-family: inherit;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;

  overflow: hidden;
  white-space: nowrap;

  clip-path: inset(50%);
}


/* ------------------ */
/* Game Screen System */
/* ------------------ */
.game {
  --game-scale: 1;

  width: 100vw;
  height: 100vh;
  background-color: #030303;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-screen,
.game-screen,
.win-screen,
.try-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Screens hidden by default */
.screen {
  display: none;
  width: 120rem;
  height: 67.5rem;

  flex: 0 0 auto;

  position: relative;
  overflow: hidden;
  transform: scale(var(--game-scale));
  transform-origin: center center;
}

/* Only the active screen shows */
.screen.is-active {
  display: block;
}

/* Media Queries - Responsive Scaling */
/* Height-based scaling */
@media (max-height: 56.25em) {
  .game {
    --game-scale: 0.83;
  }
}

@media (max-height: 48em) {
  .game {
    --game-scale: 0.71;
  }
}

@media (max-height: 37.5em) {
  .game {
    --game-scale: 0.53;
  }
}

/* Width-based scaling */
@media (max-width: 100em) {
  .game {
    --game-scale: 0.83;
  }
}

@media (max-width: 90em) {
  .game {
    --game-scale: 0.75;
  }
}

@media (max-width: 85.375em) {
  .game {
    --game-scale: 0.71;
  }
}

@media (max-width: 80em) {
  .game {
    --game-scale: 0.67;
  }
}

@media (max-width: 64em) {
  .game {
    --game-scale: 0.53;
  }
}

@media (max-width: 48em) {
  .game {
    --game-scale: 0.4;
  }
}

/* --------------------------- */
/* Intro Screen / Select Level */
/* --------------------------- */
.intro-screen {
  background-image: url("../images/intro-bg.png");
}

.intro-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.game-logo {
  width: auto;
  max-width: none;
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.level-select {
  position: absolute;
  top: 25rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;

  border: 0;
  padding: 0;
  margin: 0;

  z-index: 2;
}

.level-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.level-option {
  width: 100%;
  height: auto;
}

.level-btn span,
.level-btn strong,
.level-btn small {
  display: block;
}

.level-btn:hover,
.level-btn:focus {
  transform: translateY(-4px);
}

.level-btn.is-selected {
  outline: 4px solid #ffd13d;
}

.instruction-panel {
  position: absolute;
  left: 50%;
  bottom: 3.4375rem;
  transform: translateX(-50%);
  z-index: 2;
}

.instruction-panel > img {
  width: 100%;
  height: auto;
}

.instruction-content {
  position: absolute;
  inset: 1.5rem .5rem 1.5rem;
}

.instruction-content h2 {
  color: #840d0d;
  font-size: 2.5rem;
  text-transform: uppercase;
}

.instruction-content p {
  max-width: 52rem;
  margin: 0 auto;
  text-align: left;
}

.instruction-content p:last-of-type {
  margin-bottom: .5rem;
}

.instruction-content ul {
  max-width: 52rem;
  margin: 0 auto 1rem;
  text-align: left;
}

.instruction-content li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;

  margin-bottom: 0.25rem;
  line-height: 1.15;
}

.star {
  width: 1.36rem;
  flex: 0 0 1.36rem;
  margin-top: 0.1rem;
}

.btn-start {
  position: absolute;
  right: 1.5rem;
  bottom: .75rem;

  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}

.btn-start img {
  width: 100%;
}

.btn-start span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff4d6;
  font-family: "Jersey 15", "Press Start 2P", monospace;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
}

.btn-start:hover,
.btn-start:focus {
  transform: translateY(-3px);
} 

.btn-audio {
  position: absolute;
  right: 1.5rem;
  top: .75rem;

  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}

.btn-audio img {
  width: 100%;
}

.btn-audio:hover,
.btn-audio:focus {
  transform: scale(1.08);
}


/* --------- */
/* GAMEBOARD */
/* --------- */
.game-screen {
  background-image: url("../images/gameboard-bg.png");
}

/* Stats */
.game-topbar {
  position: absolute;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;

  z-index: 5;
}

.stat-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: #fff4d6;
}

.stat-box.timer {
  width: 24.7rem;
  height: 8.875rem;
  background-image: url("../images/frame_timer.png");
}

.stat-box.flip {
  width: 16.125rem;
  height: 8.875rem;
  background-image: url("../images/frame_flips.png");
}

.stat-box.level {
  width: 24.57rem;
  height: 8.875rem;
  background-image: url("../images/frame_level.png");
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.9;
}

.stat-content span {
  color: #ffd13d;
  font-size: 2.5rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.stat-content strong {
  color: #fff4d6;
  font-size: 4rem;
}

.stat-box.timer img {
  position: absolute;
  left: 4rem;
  top: 50%;
  transform: translateY(-50%);
}

.stat-box.timer .stat-content {
  transform: translateX(2.25rem);
}

.level-content strong,
.level-content span {
  font-size: 2.5rem;
  text-transform: uppercase;
}

.level-stars {
  width: auto;
  height: auto;
  margin-top: 0.5rem;
}


/* Main Game Layout */
.game-layout {
  position: absolute;
  top: 15rem;
  left: 50%;
  transform: translateX(-50%);

  width: 101.4375rem;

  display: grid;
  grid-template-columns: 16.375rem 46.25rem 28.5625rem;
  gap: 5rem;
  align-items: start;

  z-index: 4;
}

.board-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Message Output */
.message-panel {
  position: relative;
  height: 48rem;
}

.speech-bubble {
  width: 12.3125rem;
  height: 12.9375rem;

  position: absolute;
  top: 8rem;
  left: 6rem;
  transform: translateX(-50%);

  background-image: url("../images/word_balloon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem 3rem;
  z-index: 3;
}

.message {
  font-size: 2.5rem;
  line-height: 0.9;
}

#message-twin-left {
  position: absolute;
  left: 50%;
  top: 22rem;
  transform: translateX(-50%);
  z-index: 2;
}

.message-box {
  width: 16.3125rem;
  height: 13.8125rem;

  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 4;

  padding: 1.5rem;

  background-image: url("../images/message-box.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: #fff4d6;
}

.message-box h3 {
  margin: 1rem 1rem 0.75rem;
  color: #ffd13d;
  font-size: 1.875rem;
  line-height: 1;
  text-transform: uppercase;

  border-bottom: 0.25rem solid #3F3128;
  padding-bottom: 1rem;
}

.message-box p {
  padding: 0.75rem 1rem 0;
  font-size: 1.875rem;
  line-height: 1;
}

/* Card Board */
.game-board {
  display: grid;
  grid-template-columns: repeat(4, 10.5rem);
  grid-template-rows: repeat(3, 12.1256rem);
  gap: 1rem;
  justify-content: center;
}

.card {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.card-back-design,
.card-image {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.card-back-design img,
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-image {
  display: none;
}

.card.open .card-back-design,
.card.matched .card-back-design {
  display: none;
}

.card.open .card-image,
.card.matched .card-image {
  display: flex;
}


/* Game Action Buttons */
.game-actions {
  margin-top: 3rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.game-btn {
  width: 24.5625rem;
  height: 6.75rem;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: 0;
  border: 0;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: #fff4d6;
  font-family: "Jersey 15", "Press Start 2P", monospace;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
  cursor: pointer;
}

.btn-reset {
  background-image: url("../images/button_reset.png");
}

.btn-back-to-bed {
  background-image: url("../images/button_back.png");
}

.game-btn span {
  transform: translateY(-0.05rem);
}

.game-btn:hover,
.game-btn:focus {
  transform: translateY(-0.2rem);
}


/* Checklist Output */
.checklist-panel {
  width: 24.24rem;
  height: 33rem;
  position: relative;

  margin-top: 0;
  padding: 2rem 1.25rem 1.25rem;

  background-image: url("../images/checklist-board.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.checklist-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0;
}

.message-twin-right {
  position: absolute;
  right: -5rem;
  bottom: -17rem;
}

.checklist-header h2 {
  font-size: 2rem;
  text-transform: uppercase;
  color: #840d0d;
}

.checklist {
  display: grid;
  font-size: 1.875rem;
  line-height: 1;
}

.checklist li {
  display: grid;
  grid-template-columns: 3.25rem 6.375rem 1fr 1fr;
  align-items: center;
  gap: 0.25rem;
}

.check-box {
  width: 1.75rem;
  height: 1.75rem;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 4px solid #030303;
  background-color: transparent;

  position: relative;
}

.checklist li.is-complete .check-box::after {
  content: "✓";

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);

  color: #030303;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
}


/* --------------------------------- */
/* You Win Screen & Try Again Screen */
/* --------------------------------- */
.win-screen {
  background-image: url("../images/win-bg.png");
}

.try-screen {
  background-image: url("../images/tryAgain-bg.png");
}

.end-screen-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.win-title-img,
.try-title-img {
  position: absolute;
  top: 6rem;
  left: 50%;
  transform: translateX(-50%);

  width: auto;
  height: auto;
}

.win-image,
.try-image {
  position: absolute;
  left: 50%;
  bottom: 15rem;
  transform: translateX(-50%);

  width: auto;
  height: auto;
}

.final-stats {
  position: absolute;
  left: 12rem;
  top: 17rem;

  width: 16.6875rem;
  height: 35.25rem;

  padding: 3rem 2rem 2rem;

  background-image: url("../images/final-stat-frame.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  color: #fff4d6;
  text-align: center;
}

.final-stats p {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 2rem;

  color: #ffd13d;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
}

.final-stats p span {
  margin-top: 0.35rem;

  color: #fff4d6;
  font-size: 2.5rem;
  line-height: 1;
}

.final-stats p:last-child {
  margin-bottom: 0;
}

.final-stats p:not(:last-child) {
  padding-bottom: 1.35rem;
  border-bottom: 0.25rem solid #3F3128;
}

.win-screen .game-btn,
.try-screen .game-btn {
  position: absolute;
  left: 50%;
  bottom: 7rem;
  transform: translateX(-50%);
}

.win-screen .game-btn:hover,
.win-screen .game-btn:focus,
.try-screen .game-btn:hover,
.try-screen .game-btn:focus {
  transform: translateX(-50%) translateY(-0.2rem);
}

.game-footer {
  position: fixed;
  left: 0;
  bottom: 0.75rem;
  width: 100%;

  text-align: center;
  pointer-events: none;
  z-index: 20;
}

.game-footer small {
  color: #fff4d659;
  font-size: 0.625rem;
  letter-spacing: 0.03em;
}