:root {
  --bg-1: #ffe6f1;
  --bg-2: #ffcfe4;
  --card: #fff7fb;
  --edge: #ffb3d4;
  --edge-deep: #f78fbd;
  --accent: #ff6fa8;
  --accent-deep: #e04d8f;
  --ink: #7a2e55;
  --ink-soft: #b0638a;
  --cell-a: #ffeaf3;
  --cell-b: #ffe0ee;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Fredoka', 'Comic Sans MS', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.7) 0 6px, transparent 7px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.5) 0 4px, transparent 5px) 0 0 / 46px 46px,
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  gap: 10px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
header { display: flex; flex-direction: column; gap: 8px; }
h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: 700;
  color: var(--accent-deep);
  text-shadow: 0 2px 0 #fff, 0 3px 8px rgba(224, 77, 143, 0.25);
  letter-spacing: 0.01em;
}
.paw { display: inline-block; transform: rotate(-15deg); }
.stats { display: flex; align-items: center; gap: 8px; justify-content: center; }
.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 2px 0 var(--edge);
}
.pill.level { flex: 1; max-width: 200px; }
.star { color: #f5b335; }
.heart { color: var(--accent); }
.xpbar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #ffe0ee;
  overflow: hidden;
  min-width: 40px;
}
#xpFill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff9cc6, var(--accent));
  border-radius: 999px;
  transition: width 0.4s ease;
}
button.round {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--edge);
  background: var(--card);
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--edge);
  padding: 0;
}
button.round:active { transform: translateY(2px); box-shadow: none; }
button.round.off { opacity: 0.45; }

/* ── Requests ────────────────────────────────────────────────────────── */
#requests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.req {
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 16px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 0 var(--edge);
  min-width: 0;
  position: relative;
}
.req.ready { border-color: var(--accent); box-shadow: 0 3px 0 var(--accent); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 3px 0 var(--accent), 0 0 14px rgba(255, 111, 168, 0.55); } }
.req .who { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.req .wants { display: flex; gap: 2px; justify-content: center; }
.req .want { width: 40px; height: 40px; position: relative; }
.req .want svg { width: 100%; height: 100%; }
.req .want.have::after {
  content: '✓';
  position: absolute;
  right: -2px; bottom: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #6fd39b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.req button {
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  background: #f3dbe7;
  color: var(--ink-soft);
  cursor: default;
  white-space: nowrap;
}
.req.ready button { background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 2px 0 var(--accent-deep); }
.req.ready button:active { transform: translateY(2px); box-shadow: none; }
.req.leaving { animation: leave 0.45s ease forwards; }
@keyframes leave { to { transform: translateY(-20px) scale(0.8); opacity: 0; } }
.req.arriving { animation: arrive 0.4s cubic-bezier(.3,1.6,.5,1); }
@keyframes arrive { from { transform: scale(0.6); opacity: 0; } }

/* ── Board ───────────────────────────────────────────────────────────── */
main { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#board {
  --cols: 6;
  --rows: 7;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 4px;
  padding: 8px;
  border-radius: 22px;
  background: #ffc2dc;
  border: 3px solid var(--edge-deep);
  box-shadow: 0 5px 0 var(--edge-deep), inset 0 0 0 3px rgba(255,255,255,0.5);
  /* Fit the 6×7 grid inside whatever space is left */
  width: min(100%, calc((100dvh - 330px) * 6 / 7));
  aspect-ratio: 6 / 7;
  touch-action: none;
}
.cell {
  border-radius: 12px;
  background: var(--cell-a);
  position: relative;
  min-width: 0;
  min-height: 0;
}
.cell:nth-child(odd) { background: var(--cell-b); }
.cell.match { background: #ffd0e5; box-shadow: inset 0 0 0 2px var(--accent); }
.cell.target { background: #ffbcd9; }

.item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.item svg { width: 100%; height: 100%; overflow: visible; transform: scale(1.12); filter: drop-shadow(0 2px 0 rgba(200, 80, 140, 0.25)); }
.item.lifted { opacity: 0.25; }
.item.selected svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 6px var(--accent)); }
.item .tier {
  position: absolute;
  right: -1px; bottom: -1px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}
.item.basket { animation: breathe 2.4s ease-in-out infinite; cursor: pointer; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.item.basket.tap { animation: squish 0.25s ease; }
@keyframes squish { 40% { transform: scale(1.15, 0.85); } }
.item.pop { animation: pop 0.35s cubic-bezier(.3,1.8,.5,1); }
@keyframes pop { from { transform: scale(0.2); } }
.item.wiggle { animation: wiggle 0.6s ease 2; }
@keyframes wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.item.poof { animation: poof 0.35s ease forwards; }
@keyframes poof { to { transform: scale(1.4); opacity: 0; } }

#ghost {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  transform: translate(-50%, -50%) scale(1.15);
}
#ghost svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgba(160, 50, 110, 0.3)); }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer { display: flex; flex-direction: column; gap: 8px; }
#info {
  min-height: 40px;
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 14px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.25;
}
#info b { color: var(--accent-deep); }
.actions { display: flex; gap: 8px; }
.action {
  flex: 1;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border-radius: 14px;
  padding: 8px 10px;
  border: 2px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--edge);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  min-height: 46px;
}
button.action:disabled { opacity: 0.55; cursor: default; }
button.action:not(:disabled):active { transform: translateY(2px); box-shadow: none; }
.bin { border-style: dashed; font-size: 18px; }
.newgame { flex: 0 0 auto; font-size: 16px; }
.newgame span { font-size: 13px; }
/* Phones: New game shrinks to just its icon so the other two labels fit. */
@media (max-width: 430px) {
  .newgame { padding: 8px 12px; }
  .newgame span { display: none; }
}
.big-btn.soft { margin-top: 8px; background: var(--card); color: var(--ink); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge); }
.bin.armed { border-style: solid; border-color: var(--accent); background: #ffe0ee; }
.bin span { font-size: 14px; }
.bin.hot { background: #ffd0e5; border-color: var(--accent); transform: scale(1.04); }

/* ── Modal ───────────────────────────────────────────────────────────── */
#modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(122, 46, 85, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sheet {
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--card);
  border: 3px solid var(--edge-deep);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--edge-deep);
  padding: 22px 18px 18px;
  text-align: center;
  animation: arrive 0.35s cubic-bezier(.3,1.6,.5,1);
}
.sheet h2 { margin: 0 0 4px; color: var(--accent-deep); font-size: 26px; }
.sheet p { margin: 0 0 12px; color: var(--ink-soft); }
.close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: #ffe0ee;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.album .slot {
  background: #ffeef6;
  border-radius: 14px;
  padding: 6px 4px 8px;
  font-size: 12px;
  font-weight: 600;
}
.album .slot svg { width: 64px; height: 64px; overflow: visible; }
.album .slot.unknown svg { filter: brightness(0) opacity(0.15); }
.album .slot.unknown { color: #d9a3bf; }
.hero svg { width: 150px; height: 150px; overflow: visible; animation: pop 0.5s cubic-bezier(.3,1.8,.5,1); }
.big-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  margin-top: 12px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 0 var(--accent-deep);
  cursor: pointer;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }

/* ── Effects ─────────────────────────────────────────────────────────── */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.spark {
  position: absolute;
  font-size: 18px;
  animation: spark 0.8s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}
.floaty {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-deep);
  text-shadow: 0 2px 0 #fff;
  animation: floaty 1s ease-out forwards;
  white-space: nowrap;
}
@keyframes floaty { to { transform: translate(-50%, -150%); opacity: 0; } }
.req.ready button .heart { color: #fff; }

/* How to play */
.howto { list-style: none; margin: 0 0 4px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.howto li { display: flex; align-items: center; gap: 12px; background: #ffeef6; border-radius: 14px; padding: 8px 12px; font-size: 15px; line-height: 1.35; }
.howto .pic { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.howto .pic svg { width: 100%; height: 100%; overflow: visible; }
.howto .pair { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--accent-deep); width: 92px; }
.howto .pair svg { width: 30px; height: 30px; }
.howto b { color: var(--accent-deep); }

/* Buy Me a Coffee link at the bottom of the help and album sheets */
.support {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.support:hover { color: var(--accent-deep); text-decoration: underline; }

/* YouTube link sits first and a touch louder than the coffee link */
.links { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.links .support { margin: 0; }
.yt { font-size: 13px; font-weight: 700; color: #e0245e; text-decoration: none; }
.yt:hover { text-decoration: underline; }

/* Back to the landing page + version label */
/* Keep the round header buttons from being squeezed by the level pill */
.stats .round { flex: 0 0 38px; }
a.round.home-x {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--edge);
  background: var(--card);
  box-shadow: 0 2px 0 var(--edge);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.ver { margin: 10px 0 0; font-size: 11px; color: var(--ink-soft); opacity: 0.6; }
.ver:empty { display: none; }
a.round.home-x:active { transform: translateY(2px); box-shadow: none; }

/* Narrow phones: the header row (2 pills + 6 round buttons) was wider than
   the screen, cutting off both ends. Tighten it so everything fits. */
@media (max-width: 440px) {
  .stats { gap: 4px; }
  .stats .round, button.round, a.round.home-x { flex: 0 0 31px; width: 31px; height: 31px; font-size: 14px; }
  .pill { padding: 3px 8px; font-size: 14px; gap: 4px; }
  .pill.level { min-width: 0; }
  .xpbar { min-width: 22px; }
}