/* Memory: a twilight storybook. Stitched card tiles over a dusky sky with fireflies; each
   theme swaps the sky colors and the scenery (a castle for princesses, a seaside tower for pups). */
:root {
  --ink: #3b2a5a;
  --ink-soft: #7a64a3;
  --cream: #fff8ec;
  --cream-deep: #f1e2c8;
  --gold: #ffc94d;
  --stitch: rgba(122, 100, 163, 0.35);
  --lift: 0 5px 0 rgba(40, 20, 80, 0.28), 0 12px 26px rgba(20, 10, 60, 0.28);
  --font: "Baloo 2", "Fredoka", "Comic Sans MS", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* scene colors (home) */
  --sky1: #3f3a8f;
  --sky2: #8f78d0;
  --sky3: #ffc2c9;
  --glow: #fff4c2;
  --hill-back: #4a3f96;
  --hill-front: #362d78;
  --sea: transparent;
  color-scheme: light;
}
body[data-scene="castle"] {
  --sky1: #6a4fc0;
  --sky2: #d98fc6;
  --sky3: #ffd9b8;
  --glow: #fff0d6;
  --hill-back: #9a68b8;
  --hill-front: #7a4f9e;
}
body[data-scene="bay"] {
  --sky1: #2f74c9;
  --sky2: #79b9ee;
  --sky3: #ffd59a;
  --glow: #fff1b0;
  --hill-back: #58a874;
  --hill-front: #3f8a5c;
  --sea: #4aa3d9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--sky1);
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }

/* ---------- scene ---------- */
#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--sky1), var(--sky2) 55%, var(--sky3));
  transition: background 1s ease;
}
#scene svg, #scene .glow { transition: opacity 0.8s ease; }
.glow {
  position: absolute;
  top: 7%;
  left: 8%;
  width: clamp(70px, 10vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--glow) 30%, transparent), 0 0 80px 40px color-mix(in srgb, var(--glow) 35%, transparent);
}
.land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; }
.land .sea { fill: var(--sea); }
.land .hill-back { fill: var(--hill-back); transition: fill 1s; }
.land .hill-front { fill: var(--hill-front); transition: fill 1s; }
.castle, .bay {
  position: absolute;
  right: 3vw;
  bottom: 9vh;
  width: min(42vw, 420px);
  height: auto;
  opacity: 0;
}
body[data-scene="castle"] .castle, body[data-scene="bay"] .bay { opacity: 1; }
.castle-wall, .castle-flag { fill: #8a5fb0; }
.castle-flag { fill: #ff9ccf; }
.castle-windows { fill: #ffe38a; }
.tower { fill: #fff6ea; }
.tower-stripe { fill: #ef5350; }
.tower-lamp { fill: #34495e; }
.tower-roof { fill: #ef5350; }
.tower-light { fill: #ffe38a; animation: beacon 3s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: 0.4; } }

.firefly {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff7b8;
  box-shadow: 0 0 10px 4px rgba(255, 240, 150, 0.7);
  animation: drift var(--t) ease-in-out infinite alternate, blink calc(var(--t) / 3) ease-in-out infinite alternate;
  animation-delay: var(--d);
}
@keyframes drift { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes blink { 0%, 40% { opacity: 0.15; } 100% { opacity: 1; } }

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  z-index: 5;
  top: calc(12px + var(--safe-top));
  left: max(14px, env(safe-area-inset-left, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
}
.bar-right { margin-left: auto; display: flex; gap: 10px; }

.tile-btn {
  position: relative;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 5px 0 var(--cream-deep), 0 10px 20px rgba(20, 10, 60, 0.25);
  font-size: 28px;
  display: grid;
  place-items: center;
  transition: transform 0.12s;
}
.tile-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cream-deep), 0 4px 10px rgba(20, 10, 60, 0.25); }
.tile-btn.off { opacity: 0.5; filter: grayscale(1); }
.tile-btn svg { width: 30px; height: 30px; }

.peek .peeks {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
}
.peeks i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--cream); }
.peek.used-up { opacity: 0.45; filter: grayscale(0.8); }

.tray {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.slot {
  --cw: var(--slot, 32px);
  width: var(--slot, 32px);
  height: var(--slot, 32px);
  border-radius: 50%;
  border: 2px dashed rgba(255, 248, 236, 0.55);
  overflow: hidden;
}
.slot.got {
  border: 2px solid var(--cream);
  box-shadow: 0 0 10px rgba(255, 230, 140, 0.8);
  animation: plop 0.5s cubic-bezier(.2, 1.8, .4, 1);
}
.slot .pic { height: 100%; border-radius: 0; }
.slot .pic .emblem { display: none; }
.slot .pic .emoji { font-size: calc(var(--slot, 32px) * 0.62); }

/* ---------- screens ---------- */
main { position: fixed; inset: 0; z-index: 2; }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 30px);
  padding: calc(84px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
}

.who {
  padding: 4px 18px;
  border-radius: 20px;
  background: rgba(255, 248, 236, 0.22);
  color: var(--cream);
  font-size: 20px;
  font-weight: 600;
}

/* "Memory" on little tiles that flip over now and then */
.title {
  margin: 0;
  display: flex;
  gap: clamp(6px, 1.4vw, 14px);
  perspective: 600px;
}
.title span {
  display: grid;
  place-items: center;
  width: clamp(54px, 10vw, 100px);
  aspect-ratio: 0.8;
  border-radius: 16px;
  background: var(--cream);
  box-shadow: 0 6px 0 var(--cream-deep), 0 14px 26px rgba(20, 10, 60, 0.3);
  color: var(--c);
  font-size: clamp(40px, 7.5vw, 76px);
  font-weight: 800;
  line-height: 1;
  outline: 3px dashed var(--stitch);
  outline-offset: -9px;
  animation: tileflip 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}
.title span:nth-child(odd) { transform: rotate(-3deg); }
.title span:nth-child(even) { transform: rotate(3deg) translateY(6px); }
@keyframes tileflip {
  0%, 82% { rotate: y 0deg; }
  92%, 100% { rotate: y 360deg; }
}

.heading {
  margin: 0;
  color: var(--cream);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 4px 0 rgba(40, 20, 80, 0.35);
}
.panel .heading { color: var(--ink); text-shadow: none; }
.heading.big { font-size: clamp(44px, 8vw, 72px); }

/* ---------- theme picker ---------- */
.themes { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 44px); }
.theme-btn {
  width: clamp(240px, 34vw, 330px);
  padding: 18px 18px 14px;
  border-radius: 30px;
  background: var(--cream);
  box-shadow: var(--lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s;
}
.theme-btn:active { transform: scale(0.96); }
.theme-btn .label { font-size: clamp(26px, 3.6vw, 34px); font-weight: 800; }
.fan { position: relative; height: clamp(140px, 19vw, 190px); width: 100%; }
.fan .mini-card {
  --cw: clamp(96px, 12vw, 124px);
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 120%;
  transition: transform 0.3s;
}
.fan .mini-card:nth-child(1) { transform: rotate(-16deg) translateX(-14px); }
.fan .mini-card:nth-child(3) { transform: rotate(16deg) translateX(14px); }
.theme-btn:hover .fan .mini-card:nth-child(1) { transform: rotate(-22deg) translateX(-20px); }
.theme-btn:hover .fan .mini-card:nth-child(3) { transform: rotate(22deg) translateX(20px); }

.soft-btn {
  padding: 10px 24px;
  border-radius: 26px;
  background: rgba(255, 248, 236, 0.92);
  box-shadow: var(--lift);
  font-size: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.soft-btn span { font-size: 22px; font-weight: 800; }
.soft-btn:active { transform: scale(0.95); }

/* ---------- board size picker ---------- */
.sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.6vw, 28px); }
.size-btn {
  width: clamp(150px, 20vw, 210px);
  padding: 16px 14px 12px;
  border-radius: 28px;
  background: var(--cream);
  box-shadow: var(--lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.size-btn:active { transform: scale(0.95); }
.size-btn.last { box-shadow: 0 0 0 5px var(--gold), var(--lift); }
.mini-grid {
  display: grid;
  gap: 3px;
  height: clamp(80px, 11vw, 110px);
  aspect-ratio: 4 / 3;
  align-content: center;
  justify-content: center;
}
.mini-grid i {
  border-radius: 3px;
  aspect-ratio: 0.8;
  background: linear-gradient(135deg, var(--b1), var(--b2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}
.size-btn b { font-size: 44px; font-weight: 800; line-height: 1; }
.size-btn small { font-size: 17px; color: var(--ink-soft); min-height: 1.4em; }

/* ---------- the board ---------- */
.play { padding: 0; }
.table {
  position: absolute;
  inset: calc(84px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  display: grid;
  place-items: center;
}
.board { display: grid; justify-content: center; align-content: center; }

.card { position: relative; width: 100%; height: 100%; perspective: 900px; }
.card.dealing { animation: deal 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes deal { from { transform: translateY(-40px) scale(0.3) rotate(-12deg); opacity: 0; } }
.flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(.3, 1.35, .5, 1);
}
.card.up .flipper { transform: rotateY(180deg); }
.card.peeking .flipper { transition-duration: 0.35s; }
.card:active:not(.up) .flipper { transform: scale(0.94); }

.side, .mini-card {
  border-radius: calc(var(--cw) * 0.12);
  box-shadow: 0 4px 0 rgba(40, 20, 80, 0.25), 0 8px 16px rgba(20, 10, 60, 0.25);
}
.side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.side.front { transform: rotateY(180deg); }

.back-tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.28) 18%, transparent 20%) 0 0 / calc(var(--cw) * 0.2) calc(var(--cw) * 0.2),
    linear-gradient(140deg, var(--b1), var(--b2));
}
.back-tile::before {
  content: "";
  position: absolute;
  inset: 6%;
  border: 2px dashed rgba(255, 255, 255, 0.75);
  border-radius: calc(var(--cw) * 0.08);
}
.back-tile .motif {
  display: grid;
  place-items: center;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 248, 236, 0.92);
  box-shadow: 0 3px 0 rgba(40, 20, 80, 0.2);
  font-size: calc(var(--cw) * 0.27);
}

.mini-card { position: relative; width: var(--cw); height: calc(var(--cw) * 1.25); }
.front, .mini-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--cw) * 0.03);
  padding: calc(var(--cw) * 0.06);
  background: var(--cream);
}
.pic {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: calc(var(--cw) * 0.08);
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.7), transparent 60%), linear-gradient(var(--bg1), var(--bg2));
}
.pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pic .emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cw) * 0.5);
  line-height: 1;
}
.pic .emblem {
  position: absolute;
  right: 4%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: calc(var(--cw) * 0.24);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 248, 236, 0.92);
  font-size: calc(var(--cw) * 0.14);
  line-height: 1;
}
.name {
  display: none;
  text-align: center;
  font-size: calc(var(--cw) * 0.11);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board.named .name, .mini-card .name { display: block; }

.card.matched .front { box-shadow: 0 0 0 3px var(--gold), 0 0 22px 4px rgba(255, 220, 120, 0.8); }
.card.matched .flipper { animation: joy 0.7s cubic-bezier(.2, 1.6, .4, 1); }
.card.matched .front::after {
  content: "⭐";
  position: absolute;
  top: 3%;
  left: 4%;
  font-size: calc(var(--cw) * 0.16);
  animation: plop 0.5s cubic-bezier(.2, 1.8, .4, 1);
}
@keyframes joy {
  0% { transform: rotateY(180deg) scale(1); }
  40% { transform: rotateY(180deg) scale(1.14) rotate(-4deg); }
  70% { transform: rotateY(180deg) scale(0.98) rotate(3deg); }
  100% { transform: rotateY(180deg) scale(1); }
}
.card.waving .flipper { animation: wave 0.7s ease-in-out both; animation-delay: var(--wave); }
@keyframes wave {
  0%, 100% { transform: rotateY(180deg) translateY(0); }
  45% { transform: rotateY(180deg) translateY(-18px) scale(1.06); }
}
.card.egg .flipper { animation: cluck 0.8s ease-in-out; }
@keyframes cluck {
  0%, 100% { transform: rotateY(180deg) rotate(0); }
  20%, 60% { transform: rotateY(180deg) rotate(-8deg) scale(1.08); }
  40%, 80% { transform: rotateY(180deg) rotate(8deg) scale(1.08); }
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background: rgba(30, 20, 70, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.panel {
  position: relative;
  width: min(94vw, 760px);
  max-height: 100%;
  overflow-y: auto;
  touch-action: pan-y;
  padding: 26px 26px 22px;
  border-radius: 36px;
  background: var(--cream);
  box-shadow: var(--lift);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: unfold 0.5s cubic-bezier(.2, 1.5, .4, 1);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px dashed var(--stitch);
  border-radius: 28px;
  pointer-events: none;
}
@keyframes unfold { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } }
.close { position: absolute; top: 18px; right: 18px; font-weight: 800; font-size: 24px; }

.win-stars { display: flex; gap: 10px; font-size: clamp(54px, 9vw, 76px); }
.win-stars span { animation: starpop 0.6s cubic-bezier(.2, 1.8, .4, 1) both; }
.win-stars span:nth-child(2) { animation-delay: 0.25s; font-size: 1.2em; }
.win-stars span:nth-child(3) { animation-delay: 0.5s; }
@keyframes starpop { from { transform: scale(0) rotate(-120deg); opacity: 0; } }

.new-friends p { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.friend-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.friend-row .mini-card { --cw: 92px; width: var(--cw); height: calc(var(--cw) * 1.25); animation: plop 0.5s cubic-bezier(.2, 1.8, .4, 1) both; }
.friend-row .more { align-self: center; font-size: 28px; font-weight: 800; color: var(--ink-soft); }
.actions { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.big-btn {
  width: 104px;
  height: 104px;
  border-radius: 34px;
  font-size: 52px;
  background: linear-gradient(#ffd977, var(--gold));
  box-shadow: 0 7px 0 #e0a52b, 0 14px 26px rgba(120, 70, 0, 0.3);
  animation: breathe 1.8s ease-in-out infinite;
}
.big-btn:active { transform: translateY(5px); }
@keyframes breathe { 50% { transform: scale(1.07); } }

.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tab {
  padding: 6px 20px;
  border-radius: 20px;
  background: var(--cream-deep);
  font-size: 20px;
  font-weight: 800;
}
.tab.on { background: var(--ink); color: var(--cream); }
.count { font-size: 20px; font-weight: 600; color: var(--ink-soft); }
.album-grid {
  --cw: clamp(84px, 13vw, 116px);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cw));
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.album-grid > * { width: var(--cw); height: calc(var(--cw) * 1.25); position: relative; }
.album-grid .mini-card.wiggle { animation: cluck-flat 0.6s ease-in-out; }
.album-grid .unknown {
  border-radius: calc(var(--cw) * 0.12);
  overflow: hidden;
  opacity: 0.6;
  filter: saturate(0.6);
}
.album-grid .unknown .motif::after { content: "?"; position: absolute; font-size: calc(var(--cw) * 0.3); font-weight: 800; color: var(--ink); }
.album-grid .unknown .motif { font-size: 0; position: relative; }
@keyframes cluck-flat { 25% { transform: rotate(-7deg) scale(1.05); } 75% { transform: rotate(7deg) scale(1.05); } }

.reset-btn {
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  color: var(--ink-soft);
  background: linear-gradient(90deg, rgba(255, 120, 160, 0.4) var(--p, 0%), rgba(122, 100, 163, 0.12) var(--p, 0%));
}

@keyframes plop { from { transform: scale(0); } }

#fx { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 700px) {
  .tile-btn { width: 50px; height: 50px; font-size: 24px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .title span, .firefly, .big-btn, .tower-light { animation: none; }
}