/* ============================================================
   24. Cuddle Puddle — daily Arcade game
   ============================================================
   Chrome for the drop-and-merge game (see merge-pen.js). One daily game,
   alternating Barnyard / Jellies themes; the theme changes the roster, the
   gravity sign and the canvas scenery, never this layout.

   Three rules matter:
     • The board is sized by HEIGHT, not width. --mp-h is set on the section by
       the S/M/L buttons, and .mp-pen caps it against the viewport too, so the
       board can never be taller than the window on any screen. Width follows
       from aspect-ratio.
     • .mp-pen owns the aspect ratio. The canvas fills it and merge-pen.js
       derives its design->screen scale from the measured size, so changing the
       ratio here changes the playfield shape, not the physics. Size is purely
       presentational — the sim always runs in the same 460×620 design space.
     • .mp-canvas is `touch-action: pan-y` on purpose — a horizontal drag aims,
       a vertical swipe still scrolls the page past the game on a phone.
   ------------------------------------------------------------ */
.merge-pen {
  --mp-h: 470px;              /* overridden inline by the S/M/L buttons */
  max-width: 620px;
  margin: 0 auto;
}
.arc-card-body .merge-pen { width: 100%; }
.mp-daily .mp-themes { display: none; }
.mp-daily-badge {
  margin: 0; color: var(--ink-soft); font-size: .72rem; font-weight: 800;
  letter-spacing: .035em; text-align: center;
}

.mp-head { text-align: center; margin-bottom: 14px; }
.mp-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--purple-deep);
}
.mp-stage {
  width: fit-content;         /* hug the board rather than stretching past it */
  max-width: 100%;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 40px -18px rgba(0,0,0,.6);
}

/* ---- Theme + size switchers (buttons are built by merge-pen.js) ---- */
.mp-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mp-themes, .mp-sizes {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
}
.mp-theme-btn, .mp-size-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.mp-theme-btn { padding: 6px 13px; font-size: 0.82rem; }
.mp-size-btn  { padding: 6px 11px; font-size: 0.76rem; }
.mp-theme-btn:hover, .mp-size-btn:hover { color: var(--ink); }
.mp-theme-btn.active, .mp-size-btn.active {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 12px -5px rgba(124,58,237,.95);
}
.mp-theme-btn:focus-visible, .mp-size-btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 1px;
}

/* ---- Scoreboard ---- */
.mp-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mp-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 6px;
  border-radius: 12px;
  background: rgba(124,58,237,.14);
  border: 1px solid rgba(196,181,253,.16);
}
.mp-stat-k {
  font-size: 0.66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mp-stat-v {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mp-stat-next { background: rgba(94,234,212,.13); border-color: rgba(94,234,212,.2); }
.mp-next-emoji {
  font-size: 1.3rem;
  line-height: 1.15;
  min-width: 1.3rem;
  min-height: 1.3rem;
  border-radius: 50%;   /* a jelly has no glyph — it shows as its own colour */
}

/* ---- The pen ----
   Height-driven so it always fits the window: the S/M/L choice competes with
   70vh and the smaller wins. Width is derived from aspect-ratio, and max-width
   keeps it inside narrow phones (where the height shrinks to match). The
   canvas paints its own scenery, so the background here is only what shows
   through before the first paint. */
.mp-pen {
  position: relative;
  aspect-ratio: 460 / 620;
  height: min(var(--mp-h), 70vh);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #1d1630 0%, #171128 100%);
}
.mp-pen.mp-pen-flip { background: linear-gradient(180deg, #12496e 0%, #071427 100%); }
.mp-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;       /* horizontal drag aims, vertical swipe scrolls */
  cursor: pointer;
  outline: none;
}
.mp-canvas:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

/* ---- One-off "you reached the top tier" banner ---- */
.mp-banner {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(37,28,58,.94);
  border: 1px solid rgba(94,234,212,.45);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: mpBanner .3s var(--ease-out, ease-out) both;
}
@keyframes mpBanner {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- Game-over overlay ---- */
.mp-over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  background: rgba(23,17,40,.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mp-over[hidden] { display: none; }
.mp-over-msg {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.mp-over-sub {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 30ch;
}
.mp-again {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), #9f67f5);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(124,58,237,.9);
}
.mp-again:hover { filter: brightness(1.08); }
.mp-again:active { transform: translateY(1px); }

/* ---- Hint line: one phrasing for pointers, one for touch ---- */
.mp-hint {
  margin: 9px 0 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.mp-hint-m { display: none; }
@media (hover: none) and (pointer: coarse) {
  .mp-hint-d { display: none; }
  .mp-hint-m { display: inline; }
}

/* ---- The merge ladder ---- */
.mp-chain-wrap { margin-top: 14px; }
.mp-chain-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mp-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
}
.mp-chain-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 5px;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
}
.mp-chain-emoji { font-size: 1.05rem; line-height: 1.1; }
.mp-chain-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.12);
}
.mp-chain-name {
  font-size: 0.55rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mp-chain-arrow { color: rgba(179,164,212,.45); font-size: 0.8rem; }

/* Second ladder row: the rare jellies. Same chips as the tier ladder, dimmer
   heading, so it reads as a footnote to it rather than a second ladder. */
.mp-rares { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 4px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.06); }
.mp-rares:empty { display: none; }

@media (max-width: 560px) {
  .mp-title { font-size: 1.3rem; }
  .mp-stage { padding: 10px; }
  .mp-chain-name { display: none; }
  .mp-chain-emoji { font-size: 1rem; }
  .mp-chain-dot { width: 13px; height: 13px; }
  /* Stack the switchers so neither set of buttons has to shrink or wrap. */
  .mp-controls { flex-direction: column; gap: 7px; }
  .mp-themes, .mp-sizes { width: 100%; justify-content: center; }
  .mp-theme-btn { flex: 1 1 0; padding: 7px 8px; }
  .mp-size-btn { flex: 1 1 0; }
  /* Leave room for the phone tab bar as well as the window. */
  .mp-pen { height: min(var(--mp-h), 58vh); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-banner { animation: none; }
  .mp-again:active { transform: none; }
}