:root {
  color-scheme: light;
  --bg: #fbf1de;
  --bg-2: #f5e6c8;
  --ink: #4a3826;
  --ink-soft: #a08a6c;
  --card: #fffaf0;
  --accent: #f4a94c;
  --accent-dark: #c97f2e;
  --shadow: 0 0.35rem 0 rgba(74, 56, 38, 0.18);
}

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

html, body {
  width: 100%;
  min-height: 100%;
  background: radial-gradient(circle at 50% 0%, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--ink);
  overscroll-behavior: none;
}

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

button { font: inherit; color: inherit; cursor: pointer; }

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- topbar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem;
  background: rgba(255, 250, 240, 0.88);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(74, 56, 38, 0.08);
}
#topbarTitle {
  font-weight: 900; letter-spacing: 0.08em; font-size: 1.05rem;
  color: var(--accent-dark);
}
.iconbtn {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: none;
  background: #fff; box-shadow: 0 2px 0 rgba(74, 56, 38, 0.15);
  font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease;
}
.iconbtn:active { transform: scale(0.9); }
.iconbtn.muted { color: #b9ac97; }
.iconbtn.hidden { visibility: hidden; }

/* ---------- screens ---------- */
#screens { flex: 1; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1.2rem 1rem 2.2rem; }
.screen.hidden { display: none; }

/* ---------- buttons ---------- */
.cta {
  border: none; border-radius: 999px; padding: 0.85rem 2.2rem;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #3a2a18;
  background: linear-gradient(90deg, #ffd166, #f4a94c, #ef7fae, #f4a94c, #ffd166);
  background-size: 200% 100%;
  box-shadow: var(--shadow);
  animation: shimmer 4s linear infinite;
  transition: transform 0.12s ease;
}
.cta:active { transform: translateY(2px) scale(0.98); box-shadow: 0 0.15rem 0 rgba(74,56,38,0.18); }
.cta.ghost { background: #fff; color: var(--ink); box-shadow: 0 2px 0 rgba(74,56,38,0.12); animation: none; }
.cta:disabled { opacity: 0.4; cursor: not-allowed; animation: none; }
@keyframes shimmer { to { background-position: 200% 0; } }

/* ---------- menu ---------- */
.logo {
  margin-top: 0.6rem;
  font-size: clamp(2.6rem, 12vw, 4rem); font-weight: 900; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #f4a94c, #ef7fae 55%, #4fc0e8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(74,56,38,0.12));
}
.tagline { margin-top: 0.25rem; color: #a08a6c; font-size: 0.95rem; letter-spacing: 0.02em; }
.totalstars {
  margin-top: 0.9rem; font-weight: 800; color: #c9932e; background: #fff;
  padding: 0.35rem 0.9rem; border-radius: 999px; box-shadow: 0 2px 0 rgba(74,56,38,0.1);
  font-size: 0.85rem;
}
#btnPlay { margin-top: 1.2rem; }
#btnLevels { margin-top: 0.7rem; padding: 0.7rem 1.8rem; font-size: 0.85rem; }
.menu-info { margin-top: 1rem; color: #a08a6c; font-size: 0.82rem; }

/* ---------- level select ---------- */
.filter-row {
  width: 100%; max-width: 40rem; display: flex; gap: 0.5rem; overflow-x: auto;
  padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch;
}
.filter-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: none; border-radius: 999px; padding: 0.5rem 1rem;
  background: #fff; font-size: 0.82rem; font-weight: 700; color: #a08a6c;
  box-shadow: 0 2px 0 rgba(74,56,38,0.1); white-space: nowrap;
}
.chip.active { background: var(--accent, #f4a94c); color: #3a2a18; }

.level-grid {
  margin-top: 1rem; width: 100%; max-width: 40rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem;
}
.level-card {
  position: relative; background: var(--card); border: none; border-radius: 1rem;
  padding: 1rem 0.5rem 0.6rem; box-shadow: 0 3px 0 rgba(74,56,38,0.12);
  border-bottom: 0.3rem solid var(--accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  transition: transform 0.12s ease;
}
.level-card:active { transform: translateY(2px) scale(0.97); }
.level-num {
  font-size: 1.1rem; font-weight: 800; color: var(--ink);
}
.level-stars { font-size: 0.78rem; color: #d9b64a; letter-spacing: 0.05em; }

/* ---------- game screen ---------- */
#screen-game { padding-top: 0.6rem; }
#gameHeader {
  width: 100%; max-width: 40rem; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.4rem 1rem; padding: 0 0.2rem;
}
#gameLevelTitle { font-size: 1.15rem; font-weight: 900; color: var(--ink); }
#movesCounter { font-size: 0.82rem; color: #a08a6c; margin-left: auto; }
#movesCounter b { color: var(--ink); }

/* wooden shelf unit holding a row of stacks */
#board {
  --slot: clamp(2.3rem, 8.5vw, 3.1rem);
  flex: 1; width: 100%; max-width: 46rem; margin-top: 1.2rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: clamp(0.5rem, 2.5vw, 1rem) clamp(0.6rem, 3vw, 1.2rem);
  padding: 1rem 0.8rem 1.3rem;
  border-radius: 1rem;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 34px),
    linear-gradient(180deg, #c68b52, #a86a38);
  box-shadow: 0 5px 0 rgba(74,56,38,0.28), inset 0 0 0 3px rgba(74,56,38,0.25);
}

.shelf {
  border: none; border-radius: 0.7rem;
  background: linear-gradient(180deg, #fffaf0, #f4e6c9);
  box-shadow: inset 0 0 0 3px #9c6a3a, inset 0 -3px 4px rgba(74,56,38,0.18), 0 4px 0 rgba(74,56,38,0.28);
  padding: 0.35rem;
  display: flex; flex-direction: column-reverse; gap: 0.28rem;
  touch-action: none;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.shelf.dragging { transform: translateY(-0.3rem) scale(1.03); box-shadow: 0 8px 0 rgba(74,56,38,0.28), inset 0 0 0 3px #9c6a3a; }
.shelf.drop-ok {
  box-shadow: inset 0 0 0 3px #7bc95e, 0 4px 0 rgba(74,56,38,0.28), 0 0 16px rgba(123,201,94,0.55);
  transform: translateY(-0.15rem);
}
.shelf.drop-bad {
  box-shadow: inset 0 0 0 3px #e2664f, 0 4px 0 rgba(74,56,38,0.28), 0 0 14px rgba(226,102,79,0.5);
}
.shelf.settled { box-shadow: inset 0 0 0 3px #ffd166, 0 4px 0 rgba(74,56,38,0.28); }
.shelf.empty { opacity: 0.85; background: linear-gradient(180deg, #f4e9d4, #e9dab3); }
.shelf.shake { animation: shelfShake 0.35s ease; }
@keyframes shelfShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.3rem); }
  75% { transform: translateX(0.3rem); }
}

.slot {
  width: var(--slot); height: var(--slot);
  border-radius: 0.4rem;
  background: rgba(74, 56, 38, 0.06);
  display: flex; align-items: center; justify-content: center;
}
.slot.filled { background: transparent; }

.item {
  width: 92%; height: 92%;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 1px rgba(74,56,38,0.25));
}
.item.just-placed { animation: popIn 0.32s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn {
  0% { transform: translateY(-0.9rem) scale(0.5); opacity: 0; }
  60% { transform: translateY(0.05rem) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

/* floating stack that follows the pointer while dragging between shelves */
.drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
  display: flex; flex-direction: column-reverse; gap: 0.22rem;
  transform: translate(-50%, -115%);
  filter: drop-shadow(0 8px 10px rgba(74,56,38,0.4));
}
.drag-ghost .item {
  width: clamp(2.1rem, 7.8vw, 2.8rem); height: clamp(2.1rem, 7.8vw, 2.8rem);
  filter: none;
}

#gameControls { margin-top: 0.7rem; display: flex; gap: 0.8rem; }
.ctrlbtn {
  border: none; border-radius: 999px; padding: 0.6rem 1.3rem; font-weight: 700; font-size: 0.85rem;
  background: #fff; box-shadow: 0 2px 0 rgba(74,56,38,0.15);
}
.ctrlbtn:active { transform: translateY(2px); box-shadow: none; }
.ctrlbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- win modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(60, 44, 26, 0.55); backdrop-filter: blur(2px); padding: 1.2rem;
}
.modal.hidden { display: none; }
.modal-card {
  background: #fffaf0; border-radius: 1.4rem; padding: 1.8rem 2rem; text-align: center;
  box-shadow: 0 10px 0 rgba(74,56,38,0.18); max-width: 22rem; width: 100%;
  animation: modalPop 0.3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-title { font-size: 1.5rem; font-weight: 900; color: var(--accent-dark); }
.stars { margin-top: 0.9rem; font-size: 2.2rem; letter-spacing: 0.3rem; }
.winstar { color: #e6dcc6; display: inline-block; }
.winstar.lit { color: #ffd166; animation: starPop 0.4s cubic-bezier(.34,1.56,.64,1) both; text-shadow: 0 0 12px rgba(255,209,102,0.7); }
@keyframes starPop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
#winMoves { margin-top: 0.4rem; color: #a08a6c; font-size: 0.85rem; }
.modal-actions { margin-top: 1.4rem; display: flex; gap: 0.7rem; justify-content: center; }
.modal-actions .cta { padding: 0.75rem 1.6rem; font-size: 0.85rem; }

#flyerLayer { position: fixed; inset: 0; pointer-events: none; z-index: 25; }

@media (min-width: 36rem) {
  .level-grid { grid-template-columns: repeat(6, 1fr); }
}