/* Fihi — memory pairs on an indigo mat. Card backs wear bogolan. */

:root {
  --mat: #29457c;
  --mat-deep: #1d3560;
  --cream: #f5ebd8;
  --ink: #33261a;
  --gold: #e8a13d;
  --gold-deep: #c87f2b;
  --laterite: #9c3b22;
  --leaf: #6b8f3d;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

body {
  min-height: 100dvh;
  background: radial-gradient(120% 90% at 50% -20%, #35548f, var(--mat) 55%, var(--mat-deep));
  color: var(--cream);
  font-family: "Baloo 2", system-ui, sans-serif;
  padding-bottom: 54px;
}

[lang^="dux"] { font-family: "Andika", sans-serif; }

#top {
  display: flex;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 18px 4px;
}

#top h1 { font-size: 1.8rem; font-weight: 800; color: var(--cream); line-height: 1.05; }
#top h1 [lang] { color: var(--gold); }
#top h1 .sub { display: block; font-size: 0.78rem; font-weight: 700; color: #b9c6e2; }

#moves {
  margin-left: auto;
  background: rgba(29, 53, 96, 0.7);
  border: 1.5px solid #3f5c99;
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--gold);
}

#levels {
  display: flex;
  gap: 8px;
  padding: 10px 18px 6px;
  justify-content: center;
}

#levels button {
  border: 1.5px solid #3f5c99;
  background: rgba(29, 53, 96, 0.55);
  color: #b9c6e2;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s;
}

#levels button:active { transform: scale(0.93); }
#levels button.active { background: var(--gold); border-color: var(--gold); color: var(--mat-deep); }

/* ---------- board ---------- */

#board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 10px;
  padding: 12px 16px 24px;
  max-width: 560px;
  margin: 0 auto;
}

.tile {
  position: relative;
  aspect-ratio: 3 / 3.6;
  perspective: 700px;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

.tile-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--bounce);
}

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

.face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* back: bogolan-ish weave */
.face.back {
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(245, 235, 216, 0.14) 9px 11px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(245, 235, 216, 0.1) 9px 11px),
    linear-gradient(160deg, #b4642d, #9c3b22);
  border: 2px solid rgba(245, 235, 216, 0.35);
  display: grid;
  place-items: center;
}

.face.back::after {
  content: "";
  width: 26%;
  aspect-ratio: 1;
  border: 2.5px solid rgba(245, 235, 216, 0.7);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(156, 59, 34, 0.6), inset 0 0 0 6px rgba(245, 235, 216, 0.6);
}

.face.front {
  transform: rotateY(180deg);
  background: var(--cream);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  padding: 6px;
}

.face.front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.face.front .word {
  font-size: clamp(0.95rem, 4.6vw, 1.4rem);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.face.front .fr { font-size: 0.62rem; font-weight: 700; color: #8a7357; text-align: center; margin-top: 3px; }

.tile.matched .face.front { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf), 0 0 18px rgba(107, 143, 61, 0.7); }
.tile.matched { pointer-events: none; }

.tile.wrong .tile-inner { animation: wobble 0.4s ease; }

@keyframes wobble {
  25% { transform: rotateY(180deg) rotate(4deg); }
  60% { transform: rotateY(180deg) rotate(-4deg); }
}

/* win overlay */
#win {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(13, 21, 38, 0.7);
  animation: fadein 0.3s ease;
}

@keyframes fadein { from { opacity: 0; } }

.win-box {
  background: var(--cream);
  color: var(--ink);
  border-radius: 26px;
  padding: 30px 26px;
  text-align: center;
  max-width: 320px;
  animation: popin 0.45s var(--bounce);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

@keyframes popin { from { transform: scale(0.7); opacity: 0; } }

.win-box h2 { font-size: 1.6rem; font-weight: 800; color: var(--laterite); }
.win-box p { font-weight: 700; color: #6b5540; margin: 6px 0 16px; }

.win-box button {
  border: 0;
  border-radius: 16px;
  background: var(--gold);
  color: var(--mat-deep);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 13px 26px;
  box-shadow: 0 5px 0 var(--gold-deep);
  cursor: pointer;
  margin: 4px;
}

#foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 9px 18px calc(9px + env(safe-area-inset-bottom));
  background: rgba(29, 53, 96, 0.94);
  border-top: 1px solid #3f5c99;
  font-size: 0.78rem;
  font-weight: 800;
  color: #b9c6e2;
}

#foot a { color: var(--gold); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}