:root {
  /* Theme tokens */
  --bg: #0b0f1a;
  --fg: #f6f7fb;
  --accent: #36d1dc;
}

@font-face {
  font-family: "FTBase";
  src: url("./font/FTBase-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galano Grotesque";
  src: url("./font/GalanoGrotesque-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: url("img/background.svg") center center no-repeat;
  background-size: cover;
  color: var(--fg);
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Galano Grotesque", "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 700;
}

[x-cloak] {
  display: none !important;
}

#game-root {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Orientation overlay: hidden by default; revealed in portrait via media query */
.orientation-overlay {
  position: fixed;
  inset: 0;
  display: none; /* default hidden; shown only in portrait */
  align-items: center;
  justify-content: center;
  background: #133543; /* deep teal backdrop similar to brand */
  color: #fff;
  z-index: 120; /* above modals and controls */
  text-align: center;
}

.orientation-overlay__inner {
  display: grid;
  grid-auto-rows: min-content;
  row-gap: 4vh;
  align-items: center;
  justify-items: center;
  padding: 4vh 6vw;
}

.orientation-overlay__icon {
  width: clamp(90px, 18vw, 220px);
  height: clamp(56px, 11vw, 140px);
}

.orientation-overlay__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: 50% 50%;
  animation: rotate-hint 2.6s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%, 18% { transform: rotate(0deg); }
  40% { transform: rotate(0deg) scale(1.02); }
  52% { transform: rotate(-90deg) scale(1.02); }
  64% { transform: rotate(-90deg); }
  82%, 100% { transform: rotate(0deg); }
}

.orientation-overlay__text {
  font-family: "Galano Grotesque", "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(18px, 2.4vw, 36px);
  line-height: 1.25;
  margin: 0;
  white-space: pre-line; /* allow \n from translations to break lines */
}

.orientation-overlay__brand { display: grid; row-gap: 3vh; }
.orientation-overlay__brand-main {
  width: min(72vw, 460px);
  height: clamp(120px, 18vh, 240px);
  border: 3px dashed rgba(255,255,255,0.5); /* placeholder */
  border-radius: 10px;
}
.orientation-overlay__brand-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: center;
}
.orientation-overlay__logo-left,
.orientation-overlay__logo-right {
  width: 20vw;
  height: auto;
}

.orientation-overlay__logo-left img,
.orientation-overlay__logo-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Show the overlay only when the viewport is in portrait orientation */
@media (orientation: portrait) {
  .orientation-overlay { display: flex; }

  /* Optionally dim underlying content interaction */
  body { overflow: hidden; }
}

.safe-area {
  position: absolute;
  inset: 0;
  padding: 2vh 2vw;
}

/* Generic full-screen section; future screens can reuse this */
.screen {
  width: 100vw;
  height: 100vh;
}
/* Game HUD */
.game-hud {
  position: fixed;
  top: 7.5vh;
  left: 6.25vw;
  right: 6.25vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--fg);
  z-index: 10;
}

.hud-left { justify-self: start; display: inline-flex; align-items: center; gap: 0.8vw; }
.hud-center { justify-self: center; display: inline-flex; align-items: center; gap: 0.8vw; }

.hud-level,
.hud-time,
.hud-pairs,
.hud-score {
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 40px);
}

/* Score uses FTBase */
.hud-score {
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
}

.icon-clock-spacer {
  display: inline-block;
  width: clamp(20px, 1.8vw, 42px);
  height: clamp(20px, 1.8vw, 42px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

.hud-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.6vw;
  padding: 0.4vh 1.2vw;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 9999px;
}

.hud-clock img {
  width: 2vw;
  height: auto;
}

/* Card grid */
.card-grid {
  position: fixed;
  left: 50vw;
  top: 54vh;
  transform: translate(-50%, -50%);
  width: auto; /* width set in JS for perfect centering */
  height: min(70vh, 800px);
  display: grid;
  gap: clamp(6px, 1vw, 18px);
  align-content: center; /* vertically center rows if fewer */
  justify-content: center; /* center items when last row is not full */
}

/* Default grid layout scales with pairs; adjusted via CSS vars */
.card-grid {
  --grid-cols: 4;
}

.card-grid.cols-2 { --grid-cols: 2; }
.card-grid.cols-4 { --grid-cols: 4; }
.card-grid.cols-8 { --grid-cols: 6; }
.card-grid.cols-16 { --grid-cols: 8; }
.card-grid.cols-32 { --grid-cols: 10; }

.card-grid { grid-template-columns: repeat(var(--grid-cols), 1fr); }

.card {
  aspect-ratio: 2 / 3;
  border-radius: 1.2vh;
  background: #0a0a0a;
  overflow: hidden;
  /* Make cards adapt height to fit available grid height */
  height: 100%;
  perspective: 1000px; /* enable 3D flip */
}

/* Flip animation layout */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 400ms ease;
  -webkit-transition: -webkit-transform 400ms ease;
}

.card-inner.is-flipped {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}


.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-front { transform: rotateY(180deg); }

.screen-placeholder {
  position: absolute;
  left: 5vw;
  top: 5vh;
  font-size: 3vh;
  letter-spacing: 0.1vh;
}

/* Utility for centered content using viewport units */
.centered {
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
}

.progress {
  width: 80vw;
  height: 2vh;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1vh;
  overflow: hidden;
  margin: 2vh auto 0;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 200ms linear;
}

.preload-status {
  text-align: center;
  font-size: 2vh;
  margin-top: 1vh;
}


/* Splash screen */
.splash-logos {
  position: fixed;
  left: 6.25vw;
  top: 7.5vh;
  display: flex;
  align-items: center;
  gap: 2vw;
}

.splash-logos .logo {
  height: auto;
}

.splash-logos .edp-logo {
  width: 8.711vw;
}

.splash-logos .ede-logo {
  width: 6.71vw;
}

/* Center splash main illustration */
.splash-main {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* allow buttons to sit above later */
  z-index: 1;
}

.splash-main img {
  height: 100vh;
  width: auto;
  display: block;
}

/* Splash CTA bar: left how-to, centered start, right age */
.splash-cta {
  position: fixed;
  left: 6.25vw; /* align with logos */
  right: 6.25vw; /* align with top controls */
  bottom: 7.18vh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; /* vertically center to start button */
  z-index: 2;
}

.splash-howto {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.splash-howto img {
  height: 1.1em; /* icon slightly bigger than text */
  width: auto;
}

.splash-start {
  position: static;
  left: auto;
  transform: none;
  justify-self: center;
}

.splash-age {
  justify-self: end; /* align to right edge */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  pointer-events: none; /* ensure not clickable */
}

.splash-age img {
  height: 1.15em; /* slightly bigger than text, responsive */
  width: auto;
}

/* How-to modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; /* above controls */
}

.modal {
  position: relative;
  width: min(90vw, 1120px);
  max-height: 90vh;
  overflow: visible;
  background: #0ed1dc; /* default teal */
  color: #001b1d;
  border-radius: 3.5vh;
  padding: 4vh 2vw;
  box-shadow: 0 2vh 6vh rgba(0, 0, 0, 0.35);
}

.modal.small {
  width: min(75vw, 800px);
}

.modal-body { padding-bottom: clamp(70px, 12vh, 180px); }
.modal-level-complete.is-game-over { background: #e0cb50; }

.modal.small .modal-body {
  padding-bottom: 2vh;
}

.modal .modal-level-complete, .modal .is-game-over, .modal .is-game-completed {
  overflow: visible;
}

/* Bigger modal when the game is completed to fit text and cards */
.modal-level-complete.is-game-completed {
  width: min(94vw, 1400px);
  max-height: 90vh;
}
/* Slightly larger content spacing inside completed modal */
.modal-level-complete.is-game-completed .modal-intro {
  max-width: 68ch;
}
.modal-level-complete.is-game-completed .matched-list {
  gap: 2.5vw 3vh;
}

.modal hr {
  border: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
  margin: 3vh 0;
}

.modal-close {
  position: absolute;
  top: 2.5vh;
  right: 2.5vw;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: clamp(24px, 2.5vw, 44px);
  height: clamp(24px, 2.5vw, 44px);
}

.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-body h2, .modal-body h3 {
  margin: 0 0 1vh 0;
}

.modal-body h3 img {
  width: 2vw;
  height: auto;
  vertical-align: middle;
  margin-right: 0.1em;
}

.modal-body ol {
  margin: 0 0 2.5vh 0;
}

/* Modal layout: intro centered, content left-aligned but centered block */
.modal-intro {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 3vh auto; /* centered with modest bottom gap */
  font-size: clamp(18px, 1.6vw, 28px);
}

.modal-content {
  text-align: left;
  max-width: 50ch; /* wider than intro */
  margin: 3.5vh auto 0 auto; /* larger top margin than intro */
  font-size: clamp(18px, 1.4vw, 26px);
}

.modal-content ol {
  padding-left: 1.25em;
}

.modal-outro {
  text-align: center;
  font-family: "Galano Grotesque", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(20px, 1.8vw, 32px);
}

/* Level complete modal */
.modal-level-complete .modal-intro h2 {
  font-family: "Galano Grotesque", "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(22px, 2.4vw, 52px);
  text-align: center;
}

.modal-level-complete .modal-intro .score {
  text-align: center;
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(18px, 1.6vw, 32px);
  margin: 0.5vh 0 3vh 0;
  color: #fff;
}

.modal-level-complete .modal-intro .completed-text {
  white-space: pre-line;
  text-align: center;
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(16px, 1.4vw, 28px);
  margin: 0 0 2.5vh 0;
  color: #001b1d;
}

.matched-list {
  display: grid;
  grid-template-columns: repeat(var(--page-size, 4), 1fr);
  gap: 2.5vw 2.5vh;
  align-items: stretch; /* stretch items to the tallest in the row */
  justify-items: center;
}
.matched-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1vw;
}

.carousel-nav {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  transition: opacity 160ms ease;
}

.carousel-nav[disabled] { opacity: 0.4; pointer-events: none; }
.carousel-nav img { width: clamp(28px, 4vw, 48px); height: auto; }

@media (max-width: 900px) {
  .matched-list { grid-template-columns: repeat(2, 1fr); }
}

.modal-actions.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.5vh;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.matched-card {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  align-items: center;
  justify-content: flex-start;
  height: 100%; /* fill track height so all equal within the row */
  background: #fff;
  border: 2px solid #000; /* thick black outer border */
  border-radius: 1.6vh;
  padding: clamp(10px, 1.2vw, 18px);
}

.matched-card__img {
  width: min(180px, 16vw); /* smaller image inside the framed card */
  aspect-ratio: 2/3;
  border-radius: 1.2vh;
  overflow: hidden;
}

.matched-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.matched-card__title {
  font-family: "Galano Grotesque", "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(14px, 1.2vw, 22px);
  text-align: center;
}

.matched-card__desc {
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: clamp(12px, 1vw, 18px);
  text-align: center;
}

.modal-actions { display: flex; justify-content: center; margin-top: 3vh; }
.modal-actions .btn { margin: 0 0.5rem; }

/* Persistent top-right controls */
.top-controls {
  position: fixed;
  right: 6.25vw;
  top: 7.5vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}

.top-controls .control-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.top-controls .control-btn img {
  width: 3vw;
  max-width: 100%;
  min-width: 20px;
  height: auto;
  display: block;
}

/* Buttons */
.btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 9999px;
  font-family: "FTBase", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn[disabled],
.btn.is-disabled {
  pointer-events: none;
  cursor: default;
}

.btn:hover {
  opacity: 0.8;
}

.btn--main {
  background: #22ff52;
  color: #000;
  border: 2px solid #000;
  font-size: clamp(18px, 2vw, 68px);
  padding: 1.5vh 5.137vw;
}

.btn--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  font-size: clamp(14px, 1.25vw, 45px);
  padding: 1.25vh 1.60vw;
}

.btn:active {
  transform: translateY(1px);
}

/* Mobile tweaks: tighter modal spacing and side-by-side matched cards */
@media (max-width: 900px) {
  /* Reduce spacing between title and text on level/game completed modals */
  .modal-level-complete .modal-intro { margin-bottom: 1.5vh; }
  .modal-level-complete .modal-intro h2 { margin-bottom: 0.5vh; }
  .modal-level-complete .modal-intro .score { margin: 0.25vh 0 1.5vh 0; }
  .modal-level-complete.is-game-completed .modal-intro .completed-text { margin-bottom: 1.25vh; }

  /* Matched cards: place text to the side of the image */
  .matched-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 3vw;
  }

  .matched-card__img {
    width: min(28vw, 140px);
    flex: 0 0 auto;
  }

  .matched-card__text {
    flex: 1 1 auto;
  }

  .matched-card__title,
  .matched-card__desc {
    text-align: left;
  }

  /* Game completed: split title+score (left) and text (right) */
  .modal-level-complete.is-game-completed .modal-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "title text"
      "score text";
    column-gap: 4vw;
    align-items: start;
    text-align: left;
    margin: 0 auto 1.5vh auto; /* center within modal */
    width: min(78vw, 650px); /* smaller container width */
  }
  .modal-level-complete.is-game-completed .modal-intro h2 {
    grid-area: title;
    margin-bottom: 0.4vh;
    text-align: left;
  }
  .modal-level-complete.is-game-completed .modal-intro .score {
    grid-area: score;
    margin: 0.25vh 0 0 0;
    text-align: left;
  }
  .modal-level-complete.is-game-completed .modal-intro .completed-text {
    grid-area: text;
    margin: 0;
    text-align: left;
    align-self: start; /* align with title top */
  }
}