:root {
  --bg: #fff7e6;
  --slot: #ffffff;
  --slot-border: #f0c419;
  --tile: #ff8a3d;
  --tile-text: #ffffff;
  --accent: #2ec4b6;
  --touch: 22vmin; /* big, toddler-sized targets */
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  touch-action: none; /* we own the gestures */
  user-select: none;
}

.game {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: flex-end;
  padding: 2vmin 4vmin;
}

.iconbtn {
  border: none;
  background: var(--slot);
  border-radius: 50%;
  width: 12vmin;
  height: 12vmin;
  font-size: 6vmin;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.slots {
  flex: 0 0 auto;
  display: flex;
  gap: 3vmin;
  justify-content: center;
  padding: 2vmin;
}

.slot {
  width: var(--touch);
  height: var(--touch);
  border: 0.7vmin dashed var(--slot-border);
  border-radius: 3vmin;
  background: var(--slot);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11vmin;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.12); /* faint guide glyph */
}

.slot.filled { border-style: solid; }

.tray {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4vmin;
  align-content: center;
  justify-content: center;
  padding: 4vmin;
}

.tile {
  width: var(--touch);
  height: var(--touch);
  border: none;
  border-radius: 3vmin;
  background: var(--tile);
  color: var(--tile-text);
  font-size: 11vmin;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  touch-action: none;
  cursor: grab;
  transition: transform 60ms linear;
}

.tile.dragging { z-index: 10; transition: none; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28); }
.tile.returning { transition: transform 220ms cubic-bezier(0.34, 1.4, 0.5, 1); }
.tile.placed { box-shadow: none; cursor: default; }

.slots.celebrate { animation: pop 0.5s ease; }
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .slots.celebrate { transition: none; animation: none; }
}