@font-face {
  font-family: "LynkcoType";
  src: url("assets/font/LynkcoType-Light.woff2") format("woff2"), url("assets/font/LynkcoType-Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "LynkcoType";
  src: url("assets/font/LynkcoType-Regular.woff2") format("woff2"), url("assets/font/LynkcoType-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "LynkcoType";
  src: url("assets/font/LynkcoType-Medium.woff2") format("woff2"), url("assets/font/LynkcoType-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "LynkcoType";
  src: url("assets/font/LynkcoType-Bold.woff2") format("woff2"), url("assets/font/LynkcoType-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --pink: #ff2a6d;
  --violet: #8a4dff;
  --blue: #2fa8ff;
  --grad: linear-gradient(90deg, var(--pink), var(--violet) 55%, var(--blue));
  --grad-diag: linear-gradient(135deg, var(--pink), var(--violet) 50%, var(--blue));
  --text: #f5f5f7;
  --text-soft: rgba(245, 245, 247, .72);
  --text-dim: rgba(245, 245, 247, .45);
  --gap: 12px;
  --card-w: 90px;
  --card-h: 120px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--text);
  font-family: "LynkcoType", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

img { -webkit-user-drag: none; pointer-events: none; }

.screen {
  display: none;
  position: fixed;
  inset: 0;
  padding: calc(28px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  background: #000;
}
.screen.active { display: flex; animation: fade-in .6s ease both; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* El logo es negro: se invierte a blanco sobre fondo oscuro. */
.logo, .logo-small, .foot-logo { filter: invert(1); }
.logo { width: min(56vw, 300px); }

/* Tipografía espaciada en mayúsculas. El margin negativo compensa el espacio del último carácter. */
.title, .stat-label, .btn {
  text-transform: uppercase;
}
.title {
  margin: 0 -.3em 0 0;
  font-size: clamp(30px, 5.4vw, 48px);
  font-weight: 300;
  letter-spacing: .3em;
}
.copy {
  margin: 0;
  max-width: 460px;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: balance;
}
.error { color: var(--pink); font-weight: 500; }

/* Barra diagonal: acento de marca */
.slash {
  display: block;
  width: 2px;
  height: clamp(34px, 5vw, 48px);
  background: linear-gradient(to top, var(--pink), #ff6a95);
  transform: rotate(32deg);
  box-shadow: 0 0 12px rgba(255, 42, 109, .6);
}

/* Borde con degradé: capa enmascarada para que el relleno pueda ser translúcido. */
.btn::before,
.card .front::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-diag);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn {
  position: relative;
  width: min(100%, 420px);
  padding: 20px 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font: inherit;
  font-size: clamp(15px, 2.3vw, 19px);
  font-weight: 500;
  letter-spacing: .35em;
  cursor: pointer;
  box-shadow: -8px 0 24px -12px rgba(255, 42, 109, .7), 8px 0 24px -12px rgba(47, 168, 255, .7);
  transition: transform .15s ease, background .15s ease;
}
.btn:not(:disabled)::after { content: "\2192"; margin-left: 1.2em; letter-spacing: 0; }
.btn:active { transform: scale(.98); background: rgba(255, 255, 255, .06); }
.btn:disabled { opacity: .5; }

/* Pie: "////" + línea + logo */
.foot {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot-slashes {
  width: 44px;
  height: 8px;
  background: repeating-linear-gradient(115deg, transparent 0 5px, var(--pink) 5px 7px);
  -webkit-mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .5));
  mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .5));
}
.foot-line { flex: 1; height: 1px; background: rgba(255, 255, 255, .35); }
.foot-logo { height: 10px; opacity: .85; }

/* Inicio: logo arriba, texto arriba, sobre el cielo, botón abajo */
#screen-start { isolation: isolate; overflow: hidden; }
/* Fondo que respira: escala y opacidad (sobre negro), las dos se animan sin repintar la foto. */
#screen-start::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/intro.jpg") center bottom / cover no-repeat;
  transform-origin: 50% 60%;
  animation: breathe 12s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { transform: scale(1); opacity: .88; }
  to { transform: scale(1.04); opacity: 1; }
}
#screen-start.active {
  display: grid;
  grid-template-rows: 1fr auto 6fr;
  justify-items: center;
}
/* Lockup de marca: la palabra tiene la altura de mayúscula del logo (x); logo | palabra separados por x. */
.lockup {
  --x: clamp(18px, 4.2vw, 30px);
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: var(--x);
  margin-top: 3vh;
}
#screen-start .logo { width: auto; height: var(--x); }
.lockup-pipe {
  width: 1px;
  height: var(--x);
  background: linear-gradient(to top, var(--pink), #ff6a95);
  box-shadow: 0 0 12px rgba(255, 42, 109, .6);
}
.lockup-word {
  margin: 0;
  font-size: calc(var(--x) / .68); /* .68 = altura de mayúscula de LynkcoType */
  font-weight: 300;
  line-height: 1;
}
#screen-start .glow { align-self: end; margin-bottom: 3vh; }

/* Glow tipo Siri: halo difuso que gira y pulsa; el borde del botón gira con el mismo ángulo.
   Solo se anima cuando el botón está habilitado. */
@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.glow {
  --spin: conic-gradient(from var(--angle), var(--pink), var(--violet), var(--blue), var(--violet), var(--pink));
  position: relative;
  width: min(100%, 420px);
  isolation: isolate;
}
.glow .btn { width: 100%; box-shadow: none; }
.glow .btn::before { background: var(--spin); }
.glow::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 999px;
  background: var(--spin);
  filter: blur(22px);
  opacity: 0;
}
.glow:has(.btn:not(:disabled)) { animation: spin 6s linear infinite; }
.glow:has(.btn:not(:disabled))::before { animation: glow-pulse 3s ease-in-out infinite alternate; }
@keyframes spin { to { --angle: 360deg; } }
@keyframes glow-pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-start::before, .glow:has(.btn:not(:disabled)) { animation: none; }
  .glow:has(.btn:not(:disabled))::before { animation: none; opacity: .5; }
}
.intro-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.intro-body .copy { margin-top: 8px; font-weight: 400; color: var(--text); }

/* Juego */
#screen-game {
  justify-content: flex-start;
  gap: 0;
  background: url("assets/bg_ui.png") center bottom / cover no-repeat, #000;
}
.hud {
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
}
.logo-small { height: 20px; }
.stats {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .15);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; }
.stat-label { font-size: 10px; letter-spacing: .25em; color: var(--text-dim); }
.stat-value {
  font-size: 22px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.stat-value.low { color: var(--pink); }
.stat-slash {
  width: 1.5px;
  height: 32px;
  background: linear-gradient(to top, var(--pink), var(--violet));
  transform: rotate(32deg);
}
.bar {
  width: 100%;
  max-width: 900px;
  height: 2px;
  background: rgba(255, 255, 255, .08);
}
.bar-fill {
  height: 100%;
  width: 100%;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(138, 77, 255, .6);
  transform-origin: left;
}

.board {
  flex: 1;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols), var(--card-w));
  grid-auto-rows: var(--card-h);
  align-content: center;
  justify-content: center;
  min-height: 0;
  margin: 24px 0;
}

.card {
  width: var(--card-w);
  height: var(--card-h);
  perspective: 900px;
  cursor: pointer;
  transition: transform .15s ease;
}
.card:not(.flipped):not(.matched):active { transform: scale(.96); }
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}
.card.flipped .card-inner,
.card.matched .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.back {
  background: url("assets/coco.jpg") center / cover no-repeat, #15171b;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .5);
}
.front {
  background: radial-gradient(ellipse at 50% 60%, #2a2440 0%, #121218 60%, #0a0a0d 100%);
  transform: rotateY(180deg);
  box-shadow: 0 0 18px rgba(138, 77, 255, .35);
  transition: box-shadow .4s ease;
}
.front img { width: 100%; height: 100%; object-fit: cover; }

/* Par encontrado: queda de frente, con menos brillo. */
.card.matched { cursor: default; }
.card.matched .front { box-shadow: none; }
.card.matched .front::before { opacity: .5; }
.card.matched .front img { opacity: .7; }

/* Resultado */
#screen-result {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, .6)),
    url("assets/bg_ui.png") center bottom / cover no-repeat,
    #000;
}
#screen-result .title { font-size: clamp(26px, 4.6vw, 42px); text-wrap: balance; }
.result-coco {
  height: min(42vh, 460px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .6));
}