* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { touch-action: manipulation; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f7f5ef;
  color: #2b2b2b;
  min-height: 100vh;
  user-select: none;
  -webkit-user-select: none;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* ===== Header ===== */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: #f7f5efee; backdrop-filter: blur(8px);
}
.topbar .brand { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; }
.topbar .brand span { font-size: 26px; margin-right: 6px; }
.starcount {
  font-size: 18px; font-weight: 800;
  background: #fff; border: 3px solid #f5c518; border-radius: 999px;
  padding: 6px 14px;
}
.backbtn {
  font-size: 17px; font-weight: 800;
  background: #fff; border: 3px solid #2b2b2b; border-radius: 999px;
  padding: 6px 16px;
}
.backbtn:active { transform: scale(0.95); }
.levelbtn {
  font-size: 14px; font-weight: 800;
  background: #fff; border: 3px solid #a06ae0; border-radius: 999px;
  padding: 6px 12px; color: #2b2b2b;
}
.levelbtn:active { transform: scale(0.95); }
.levelbtn.asbadge { pointer-events: none; }
.pllabel {
  text-align: center; font-size: 15px; font-weight: 800;
  color: #555; margin: 4px 0 2px;
}
.gdots { font-size: 13px; letter-spacing: 3px; color: #f5a518; margin-top: 5px; }
.ghost { opacity: 0.22; filter: grayscale(1); }

/* питомец */
.pet {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 3px solid #2b2b2b; border-radius: 22px;
  padding: 14px 18px; margin: 10px 0 4px;
  box-shadow: 0 3px 0 #2b2b2b;
}
.petemoji { font-size: 64px; line-height: 1; }
.petinfo { flex: 1; }
.petname { font-size: 18px; font-weight: 900; }
.petbar {
  height: 14px; background: #eee; border: 2px solid #2b2b2b;
  border-radius: 999px; margin: 6px 0 4px; overflow: hidden;
}
.petfill { height: 100%; background: #d2fa3c; transition: width 0.4s; }
.pethint { font-size: 13px; color: #666; font-weight: 700; }

/* стрик и музыка */
.streak {
  font-size: 16px; font-weight: 900;
  background: #fff; border: 3px solid #f08c2e; border-radius: 999px;
  padding: 6px 12px;
}
.musicbtn {
  font-size: 18px; background: #fff; border: 3px solid #2b2b2b;
  border-radius: 50%; width: 42px; height: 42px;
}
.musicbtn:active { transform: scale(0.92); }

/* кабинет */
.acct { max-width: 480px; margin: 0 auto; padding: 10px 16px 50px; }
.acctcard {
  background: #fff; border: 3px solid #2b2b2b; border-radius: 22px;
  padding: 26px 20px; text-align: center;
  box-shadow: 0 3px 0 #2b2b2b;
}
.acctcard h1 { font-size: 24px; font-weight: 900; margin: 8px 0 10px; }
.acctmail { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.accthint { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 14px; }
.acctfine { font-size: 12px; color: #999; margin-top: 12px; }
.acctinput {
  width: 100%; font-size: 17px; font-weight: 700; font-family: inherit;
  border: 3px solid #2b2b2b; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 12px; text-align: center;
  background: #f7f5ef; outline: none;
}
.acctinput:focus { background: #fff; }

/* карта */
.mapwrap { max-width: 640px; margin: 0 auto; padding: 6px 16px 50px; }
.mappath { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 10px 0; }
.mappath::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 4px dashed #cfcabc; transform: translateX(-2px);
}
.island {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 78%; background: #fff; border: 3px solid #cfcabc; border-radius: 20px;
  padding: 12px 14px; box-shadow: 0 3px 0 #cfcabc; text-align: left;
}
.island.left { align-self: flex-start; }
.island.right { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.island:active { transform: scale(0.97); }
.islemoji {
  font-size: 38px; width: 64px; height: 64px; flex-shrink: 0;
  border: 3px solid #ccc; border-radius: 50%; background: #f7f5ef;
  display: flex; align-items: center; justify-content: center;
}
.isltxt { flex: 1; }
.islname { font-size: 16px; font-weight: 900; }
.islbar {
  height: 10px; background: #eee; border: 2px solid #2b2b2b;
  border-radius: 999px; margin: 5px 0 3px; overflow: hidden;
}
.islfill { height: 100%; }
.islpct { font-size: 12px; color: #666; font-weight: 700; }
.unlockmsg {
  font-size: 20px; font-weight: 900; color: #2b2b2b;
  background: #d2fa3c; border: 3px solid #2b2b2b; border-radius: 999px;
  padding: 8px 22px; margin: 4px 0 10px;
  animation: pop 0.5s;
}

/* ===== Home ===== */
.home { max-width: 860px; margin: 0 auto; padding: 6px 16px 60px; }
.hero { text-align: center; padding: 10px 0 18px; }
.hero .big { font-size: 44px; }
.hero h1 { font-size: 26px; font-weight: 900; margin-top: 2px; }
.hero p { font-size: 15px; color: #666; margin-top: 4px; }

.cat { margin-top: 22px; }
.cat h2 {
  font-size: 19px; font-weight: 900; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.cat h2 .cemoji { font-size: 24px; }
.cardgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.gamecard {
  background: #fff;
  border: 3px solid var(--c, #ccc);
  border-radius: 20px;
  padding: 16px 12px 14px;
  text-align: center;
  box-shadow: 0 3px 0 var(--c, #ccc);
  transition: transform 0.08s;
}
.gamecard:active { transform: scale(0.96); }
.gamecard .gemoji { font-size: 44px; line-height: 1.1; }
.gamecard .gname { font-size: 15px; font-weight: 800; margin-top: 8px; }
.gamecard .gsub { font-size: 12px; color: #777; margin-top: 3px; }

/* ===== Game screen ===== */
.game { max-width: 640px; margin: 0 auto; padding: 4px 16px 40px; }
.progress { display: flex; justify-content: center; gap: 7px; margin: 8px 0 14px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; }
.dot.done { background: #f5c518; }
.dot.cur { background: #2b2b2b; }

.prompt {
  background: #fff; border: 3px solid #2b2b2b; border-radius: 22px;
  padding: 18px; text-align: center; margin-bottom: 16px;
  min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.prompt .ptask { font-size: 17px; font-weight: 800; color: #555; }
.prompt .pmain { font-size: 44px; font-weight: 900; line-height: 1.15; word-spacing: 6px; }
.prompt .pmain.small { font-size: 30px; }
.prompt .pemojis { font-size: 36px; line-height: 1.4; letter-spacing: 6px; }
.speakbtn {
  font-size: 26px; background: #fff; border: 3px solid #2b2b2b;
  border-radius: 50%; width: 52px; height: 52px; margin-top: 4px;
}
.speakbtn:active { transform: scale(0.92); }

.options { display: grid; gap: 12px; }
.options.g2 { grid-template-columns: 1fr 1fr; }
.options.g3 { grid-template-columns: repeat(3, 1fr); }
.options.g4 { grid-template-columns: repeat(4, 1fr); }
.opt {
  background: #fff; border: 3px solid #cfcabc; border-radius: 20px;
  font-size: 40px; font-weight: 900;
  min-height: 84px; display: flex; align-items: center; justify-content: center;
  padding: 10px; line-height: 1.3;
  box-shadow: 0 3px 0 #cfcabc;
}
.opt:active { transform: scale(0.96); }
.opt.textopt { font-size: 32px; }
.opt.bigemoji { font-size: 52px; min-height: 96px; }
.opt.correct { border-color: #4caf50; background: #e8f7e9; box-shadow: 0 3px 0 #4caf50; }
.opt.found { border-color: #4caf50; background: #e8f7e9; box-shadow: 0 3px 0 #4caf50; }
.opt.wrong { animation: shake 0.4s; border-color: #e05353; }
.opt.disabled { pointer-events: none; opacity: 0.9; }
.opt.faded { opacity: 0.35; pointer-events: none; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

/* colored swatch option */
.swatch { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #00000022; }

/* group box (где больше) */
.opt.groupbox { font-size: 30px; letter-spacing: 3px; min-height: 110px; flex-wrap: wrap; }

/* ===== memory ===== */
.memgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.memcard {
  aspect-ratio: 3/4; border-radius: 16px; border: 3px solid #cfcabc;
  background: #ffe9a8; font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 #cfcabc;
}
.memcard .face { display: none; }
.memcard.open, .memcard.matched { background: #fff; }
.memcard.open .face, .memcard.matched .face { display: block; }
.memcard.open .back, .memcard.matched .back { display: none; }
.memcard.matched { border-color: #4caf50; box-shadow: 0 3px 0 #4caf50; opacity: 0.85; pointer-events: none; }

/* ===== sort buckets ===== */
.sortitem { font-size: 84px; text-align: center; margin: 10px 0 20px; }
.buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bucket {
  background: #fff; border: 3px solid #cfcabc; border-radius: 22px;
  padding: 18px 10px; text-align: center;
  box-shadow: 0 3px 0 #cfcabc;
}
.bucket:active { transform: scale(0.96); }
.bucket .bemoji { font-size: 46px; }
.bucket .bname { font-size: 17px; font-weight: 800; margin-top: 6px; }
.bucket.correct { border-color: #4caf50; background: #e8f7e9; }
.bucket.wrong { animation: shake 0.4s; border-color: #e05353; }

/* ===== celebration ===== */
.celebrate {
  position: fixed; inset: 0; z-index: 50;
  background: #f7f5eff2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
}
.celebrate .cbig { font-size: 90px; animation: pop 0.5s; }
.celebrate h2 { font-size: 34px; font-weight: 900; margin: 8px 0 4px; }
.celebrate .cstars { font-size: 30px; letter-spacing: 4px; margin: 8px 0 22px; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bigbtn {
  font-size: 19px; font-weight: 900; color: #2b2b2b;
  background: #d2fa3c; border: 3px solid #2b2b2b; border-radius: 999px;
  padding: 14px 34px; margin: 6px;
  box-shadow: 0 3px 0 #2b2b2b;
}
.bigbtn.ghost { background: #fff; }
.bigbtn:active { transform: scale(0.96); }

/* star fly */
.flystar {
  position: fixed; z-index: 60; font-size: 34px; pointer-events: none;
  animation: fly 0.7s ease-in forwards;
}
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0.2; } }

/* print cards */
.printcard { text-decoration: none; color: inherit; display: block; }

@media (max-width: 480px) {
  .options.g4 { grid-template-columns: repeat(3, 1fr); }
  .cardgrid { grid-template-columns: repeat(2, 1fr); }
  .opt { font-size: 34px; min-height: 76px; }
  .prompt .pmain { font-size: 38px; }
}