:root {
  --bg: #eef4ff;
  --accent: #5b8def;
  --accent2: #ffb13b;
  --ink: #233;
  --card: #ffffff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(160deg, #eef4ff, #fdf0ff);
  color: var(--ink);
  overscroll-behavior: none;
  touch-action: manipulation;
}
#app { max-width: 720px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
}
.logo { font-size: 24px; font-weight: 800; color: var(--accent); }
.topbtns { display: flex; gap: 8px; }
.icon {
  font-size: 22px; width: 46px; height: 46px; border-radius: 14px; border: none;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); cursor: pointer;
}
.icon:active { transform: scale(.94); }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 12px 20px; }

/* HOME */
.home { width: 100%; max-width: 560px; text-align: center; margin-top: 6vh; }
.hello { font-size: 26px; font-weight: 800; margin-bottom: 24px; }
.bigrow { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 520px) { .bigrow { flex-direction: row; } }
.big {
  flex: 1; border: none; border-radius: 26px; padding: 30px 18px;
  font-size: 24px; font-weight: 800; color: #fff; cursor: pointer; line-height: 1.5;
  box-shadow: 0 8px 0 rgba(0,0,0,.12); transition: transform .06s;
}
.big.learn { background: linear-gradient(160deg, #4fc3a1, #2fa389); }
.big.play  { background: linear-gradient(160deg, #6aa0ff, #4f7ff0); }
.big:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,.12); }

/* GAME / LEARN */
.gamewrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; }
.bubble {
  width: 100%; background: var(--card); border-radius: 18px; padding: 14px 18px;
  font-size: 20px; font-weight: 700; min-height: 64px; display: flex; align-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.10); margin-bottom: 12px; line-height: 1.35;
}
.board {
  width: min(92vw, 560px); height: min(92vw, 560px); max-height: 70vh; max-width: 70vh;
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.star-ov {
  position: absolute; width: 12.5%; height: 12.5%; display: flex; align-items: center; justify-content: center;
  font-size: 7vw; pointer-events: none; z-index: 5; animation: twinkle 1s infinite alternate;
  filter: drop-shadow(0 0 4px gold);
}
@media (min-width: 560px) { .star-ov { font-size: 38px; } }
@keyframes twinkle { from { transform: scale(.85); } to { transform: scale(1.12); } }

.controls { width: 100%; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ctrl {
  border: none; border-radius: 16px; padding: 14px 18px; font-size: 18px; font-weight: 800;
  cursor: pointer; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); flex: 1 1 40%; min-width: 130px;
}
.ctrl:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.ctrl.hint { background: #f0a32e; }
.ctrl.back, .ctrl.restart, .ctrl.next { background: #7e8aa0; }
.ctrl.home { background: #9aa3b2; }

.diff { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.difflbl { font-weight: 700; }
.difbtn { width: 44px; height: 44px; border-radius: 12px; border: none; font-size: 24px; font-weight: 800; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.difval { font-size: 22px; font-weight: 800; min-width: 28px; text-align: center; }

/* bigger, friendlier piece move dots */
.cg-wrap piece { cursor: grab; }