@font-face {
  font-family: "KOMIKAX";
  src: url("assets/ui/KOMIKAX_.ttf") format("truetype");
  font-display: swap;
}

:root {
  --safe-header-h: 80px;
  --color-bg: #120f14;
  --color-surface: rgba(17, 20, 34, 0.72);
  --color-primary: #f4b000;
  --color-primary-press: #e09d00;
  --color-text: #fffaf0;
  --color-text-dark: #1c1c1c;
  --color-error: #ff6b6b;
  --shadow-strong: 0 12px 28px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "KOMIKAX", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

html {
  -webkit-text-size-adjust: 100%;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

body {
  position: fixed;
  inset: 0;
}

.app-header {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  height: var(--safe-header-h);
  z-index: 50;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

body:has(.screen-intro.is-active) .app-header,
body:has(.screen-post-form.is-active) .app-header {
  display: none;
}

.header-logo {
  height: 50px;
  object-fit: contain;
}

.logo-brand {
  max-width: 38%;
}

.logo-game {
  max-width: 40%;
}

.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
}

.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100dvh;
  padding: calc(var(--safe-header-h)) 16px 20px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.99);
  transition: opacity 220ms ease, transform 220ms ease;
 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top 0px;
}

.screen.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.screen-content {
  width: min(100%, 600px);
  max-height: calc(100dvh - var(--safe-header-h) - 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.centered-content {
  align-items: center;
  text-align: center;
  justify-content: center;
}

h1,
h2 {
  font-family: "KOMIKAX", sans-serif;
  margin: 0;
  letter-spacing: 0.4px;
}

h1 {
  font-size: clamp(1.8rem, 7vw, 2.3rem);
}

h2 {
  font-size: clamp(1.5rem, 6vw, 2rem);
}

p {
  margin: 0;
  line-height: 1.4;
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 700;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-strong);
}

.btn-primary {
  background: linear-gradient(135deg, #ffd86a 0%, var(--color-primary) 70%);
  color: var(--color-text-dark);
}

.btn-primary:active {
  transform: scale(0.98);
  background: var(--color-primary-press);
}

.form-layout {
  align-items: center;
  gap: 10px;
}

.form-title-img {
  width: min(88%, 360px);
  display: block;
  object-fit: contain;
}

.form-subtitle-img {
  width: min(82%, 320px);
  display: block;
  object-fit: contain;
}

.user-form {
  width: min(92%, 380px);
  background: transparent;
  border: 0;
  backdrop-filter: none;
  border-radius: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.field-wrap {
  display: grid;
  gap: 6px;
}

.field-label-img {
  /* width: min(74%, 250px); */
  height: auto;
  object-fit: contain;
}

.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="tel"] {
  width: 100%;
  border: 0;
  background: #7e60a2;
  color: #ffffff;
  font-size: 16px;
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
}

.user-form input[type="text"]::placeholder,
.user-form input[type="email"]::placeholder,
.user-form input[type="tel"]::placeholder {
  color: rgba(255, 255, 255, 0.82);
}

.user-form input[type="text"]:focus,
.user-form input[type="email"]:focus,
.user-form input[type="tel"]:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.terms-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.terms-row label {
  color: #fff;
}

.terms-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #7e60a2;
}

.terms-link {
  color: #ffffff;
  text-decoration: underline;
}

.form-submit {
  width: min(60%, 220px);
  max-height: none;
  justify-self: center;
}

.error-message {
  min-height: 1.2rem;
  color: var(--color-error);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Form loading spinner */
.form-spinner {
  display: block;
  width: 38px;
  height: 38px;
  margin: 4px auto 0;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: form-spin 0.75s linear infinite;
}

.form-spinner[hidden] {
  display: none;
}

@keyframes form-spin {
  to {
    transform: rotate(360deg);
  }
}

.form-submit[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.instructions-layout {
  align-items: center;
  justify-content: center;
}

.instructions-visual {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.instructions-title-img {
  width: min(86%, 360px);
  height: auto;
  object-fit: contain;
}

.instructions-illus-img {
  width: min(92%, 400px);
  height: auto;
  object-fit: contain;
}

.instructions-btn {
  width: min(58%, 240px);
  max-height: none;
}

.game-layout {
  position: relative;
  align-items: center;
  gap: 6px;
}

.game-title-wrap {
  width: min(62%, 260px);
  min-height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: -2px;
}

.game-title-img {
  width: 100%;
  height: auto;
  max-height: 70px;
  object-fit: contain;
}

.countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  font-family: "KOMIKAX", sans-serif;
  font-size: clamp(3.2rem, 18vw, 5.8rem);
  color: #fff5d8;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  background: transparent;
  pointer-events: none;
}

.countdown-image {
  width: min(30vw, 240px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6));
  transform: scale(0);
  will-change: transform;
}

.countdown-image.is-scale-in {
  transform: scale(1);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.countdown-image.is-scale-out {
  transform: scale(0);
  transition: transform 120ms ease-in;
}

.hud {
    display: flex;
    justify-content: center;
    align-items: center;
  gap: 30px;
  width: 80%;
  height: 90px;
}

.hud-item {
  height: 100%;
    position: relative;
  display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    width: 50%;
}

.hud-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hud-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "KOMIKAX", sans-serif;
  color: #fff;
  /* text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); */
  top: 39%;
}

.hud-score-text {
  transform: translateY(0%);
}

.hud-timer-text {
  gap: 2px;
  transform: translateY(0%);
}

.hud-score-value,
.hud-timer-prefix,
.hud-timer-value {
  font-size: clamp(1.2rem, 5.2vw, 1.55rem);
  line-height: 1;
}

.game-grid {
  background-image: url("assets/backgrounds/CtnMEMO.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: grid;
  width: 100%;
  max-width: 100%;
  padding: 0% 10% 5% 5%;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  perspective: 1000px;
}

.game-meta-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4%;
}

.help-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); */
}

.help-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.level-text {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.5px;
  /* background: rgba(0, 0, 0, 0.4); */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 14px;
}

.borde,
.borde span,
.final-score-value,
.final-score-value span,
.final-locked-score,
.final-locked-score span {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 6.2px #ff8c00;
  paint-order: stroke fill;
  font-weight: 700;
}

.game-help-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(5, 8, 14, 0.877);
  display: none;
  place-items: center;
  padding: 14px;
}

.game-help-modal.is-open {
  display: grid;
}

.game-help-modal[hidden] {
  display: none !important;
}

.game-help-card {
  width: min(100%, 360px);
  border-radius: 14px;
  background: transparent;
  border: 0;
  padding: 6px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.game-help-card h3 {
  margin: 0;
  font-family: "KOMIKAX", sans-serif;
}

.card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.card-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 260ms ease;
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.card-back {
  transform: rotateY(0deg) translateZ(1px);
  /* background: radial-gradient(circle at 25% 20%, #ffe29c, #f5b100 58%, #bd7f00 100%); */
}

.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-front {
  transform: rotateY(180deg) translateZ(1px);
  /* background: #fff; */
}

.card-front img {
  width: 100%;
  height: 90%;
  object-fit: contain;
}

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

.card.is-matched {
  /* outline: 2px solid #67d463; */
  cursor: default;
}

.final-score {
  font-size: 1.2rem;
  font-weight: 700;
}

.screen-finish {
  background-image: url("assets/backgrounds/BgInstrucciones.png");
}

.screen-content.final-layout {
  /* overflow-x: hidden; */
}

.final-layout {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 8px;
}

.final-layout > * {
  max-width: 100%;
}

.final-layout-locked {
  justify-content: center;
}

.final-locked-score-wrap {
  position: relative;
  width: min(100%, 430px);
}

.final-locked-img {
  width: 100%;
}

.final-locked-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "KOMIKAX", sans-serif;
  font-size: clamp(1.35rem, 7.2vw, 2.05rem);
  color: #ffffff;
  /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); */
}

.final-score-wrap {
  position: relative;
  width: min(88%, 340px);
  display: grid;
  place-items: center;
}

.final-score-bg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.final-score-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "KOMIKAX", sans-serif;
  font-size: clamp(1.35rem, 6.2vw, 2.05rem);
  color: #ffffff;
  /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); */
}

.screen-finish-spin .final-score-value {
  top: -35%;
}

.screen-finish-locked .final-score-value {
  top: -58%;
}

.final-info-img {
  /* width: min(88%, 340px); */
  height: auto;
  display: block;
  object-fit: contain;
}

.final-btn {
  width: min(70%, 280px);
  max-height: none;
}

.roulette-layout {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.roulette-title-img {
  width: min(86%, 360px);
  height: auto;
  object-fit: contain;
}

.roulette-stage {
  position: relative;
  width: min(88vw, 360px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.roulette-wrap {
  width: min(76vw, 300px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}

.roulette-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 2400ms cubic-bezier(0.17, 0.84, 0.44, 1);
}

.roulette-image.is-spinning {
  transform: rotate(1620deg);
}

.roulette-indicator {
  position: absolute;
  /* inset: 0; */
  width: 100%;
  height: 40%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

.roulette-deco {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}

.roulette-deco-back {
  /* width: min(38vw, 150px); */
    top: 2%;
    left: 2%;
  z-index: 1;
}

.roulette-deco-front {
  /* width: min(38vw, 150px); */
  right: 14%;
  bottom: 0%;
  z-index: 4;
}

.roulette-spin-btn {
  width: min(56%, 240px);
  max-height: none;
}

.prize-result {
  min-height: 1.3rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.screen-intro {
  background-image: url("assets/backgrounds/BgGame.png");
  padding: 0;
}

.screen-post-form {
  background-image: url("assets/backgrounds/BgGame.png");
  padding: 0;
}

.intro-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  padding: 3dvh 0;
  height: 100dvh;
  overflow: hidden;
  max-height: 100dvh;
}

.intro-layout-header {
  height: calc(100dvh - var(--safe-header-h) - 28px);
  max-height: calc(100dvh - var(--safe-header-h) - 28px);
  padding: 0;
}

.screen-intro .intro-logo,
.screen-post-form .intro-logo {
  width: clamp(180px, 62vw, 320px);
  max-width: 100%;
  max-height: 10dvh;
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
}

.intro-personajes {
  width: auto;
  max-width: 100%;
  max-height: 30dvh;
  object-fit: contain;
  flex-shrink: 1;
  margin-bottom: -4dvh;
  position: relative;
  z-index: 1;
  top:   7%;
}

.intro-jugos {
  width: auto;
  max-width: 100%;
  max-height: 35dvh;
  object-fit: contain;
  flex-shrink: 1;
  position: relative;
  z-index: 0;
}

.intro-bienvenido {
  width: auto;
  max-width: 80%;
  max-height: 12dvh;
  object-fit: contain;
  flex-shrink: 1;
  margin-top: -3dvh;
  position: relative;
  z-index: 1;
  top: -7%;
}

.HolaDForm {
  width: auto;
  max-width: 82%;
  max-height: 12dvh;
  object-fit: contain;
  flex-shrink: 1;
  margin-top: -3dvh;
  position: relative;
  z-index: 1;
  top: -7%;
}

.btn-img {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 1;
  max-width: 70%;
  /* margin: 5%; */
  max-height: 12dvh;
}

@keyframes btnPressPop {
  0% {
    transform: scale(0.9);
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes idleFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(calc(-1 * var(--idle-y, 8px))) scale(var(--idle-scale, 1.01));
  }
}

.intro-logo,
.intro-personajes,
.intro-jugos,
.intro-bienvenido,
.HolaDForm,
.form-title-img,
/* .form-subtitle-img, */
.instructions-title-img,
.instructions-illus-img,
.final-score-wrap,
.final-locked-score-wrap,
.final-info-img,
.roulette-title-img,
.roulette-deco,
.win-title-img,
.win-pdf-preview,
.win-text-img,
.lose-title-img,
.lose-jugos-img,
.lose-text-img,
.btn-img img {
  animation-name: idleFloat;
  animation-duration: var(--idle-duration, 3.6s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--idle-delay, 0s);
  transform-origin: center;
  will-change: transform;
}

.intro-logo,
.form-title-img,
.instructions-title-img,
.roulette-title-img,
.win-title-img,
.lose-title-img {
  --idle-y: 6px;
  --idle-duration: 3.2s;
}

.intro-personajes,
.intro-jugos,
.instructions-illus-img,
.lose-jugos-img {
  --idle-y: 10px;
  --idle-duration: 4.2s;
  --idle-delay: 0.2s;
}

.final-score-wrap,
.final-locked-score-wrap,
.win-pdf-preview,
.lose-text-img,
.final-info-img {
  --idle-y: 7px;
  --idle-duration: 3.8s;
  --idle-delay: 0.1s;
}

.btn-img img {
  --idle-y: 5px;
  --idle-duration: 2.9s;
  --idle-scale: 1.015;
}

.roulette-image,
.countdown-image,
.card,
.card * {
  animation: none;
}

button:not(.card).is-press-anim {
  animation: btnPressPop 220ms ease-out;
  transform-origin: center;
}

.btn-img img {
    /* margin: 20px auto; */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.screen-form {
  background-image: url("assets/backgrounds/BgForm.png");
}

.screen-instructions {
  background-image: url("assets/backgrounds/BgInstrucciones.png");
}

.screen-game {
  background-image: url("assets/backgrounds/BgGame.png");
}

.screen-roulette {
  background-image: url("assets/backgrounds/BgGame.png");
}

.screen-roulette-win {
  background-image: url("assets/backgrounds/BgGame.png");
}

.screen-roulette-lose {
  background-image: url("assets/backgrounds/BgGame.png");
}

/* ── Roulette Win Screen ── */
.roulette-win-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* overflow-y: auto; */
  padding-bottom: 16px;
}

.win-title-img {
  width: min(80%, 320px);
  object-fit: contain;
}

.win-pdf-preview {
  width: min(70%, 360px);
  height: 38dvh;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.win-pdf-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  padding: 8px;
}

.win-text-img {
  width: min(80%, 300px);
  object-fit: contain;
}

.win-download-btn img,
.win-replay-btn img,
.win-discover-link img {
  /* width: min(70%, 260px); */
  object-fit: contain;
}

.win-discover-link {
  display: inline-flex;
}

.roulette-lose-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  overflow-y: auto;
  padding-bottom: 16px;
}

.lose-title-img {
  width: min(84%, 340px);
  object-fit: contain;
}

.lose-jugos-img {
  width: min(90%, 360px);
  object-fit: contain;
}

.lose-text-img {
  width: min(88%, 350px);
  object-fit: contain;
}

/* .lose-discover-img {
  width: min(88%, 340px);
} */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  :root {
    --safe-header-h: 90px;
  }

  .screen {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
  }

  /* .game-grid {
    gap: 10px;
  } */
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo,
  .intro-personajes,
  .intro-jugos,
  .intro-bienvenido,
  .HolaDForm,
  .form-title-img,
  .form-subtitle-img,
  .instructions-title-img,
  .instructions-illus-img,
  .final-score-wrap,
  .final-locked-score-wrap,
  .final-info-img,
  .roulette-title-img,
  .roulette-deco,
  .win-title-img,
  .win-pdf-preview,
  .win-text-img,
  .lose-title-img,
  .lose-jugos-img,
  .lose-text-img,
  .btn-img img {
    animation: none !important;
  }
}