/* Festival Toybox treatment shared by the 2D merge games. */
body.puzzle-fun {
  --puzzle-ink: #17315b;
  --puzzle-blue: #1677ff;
  --puzzle-red: #ff4057;
  --puzzle-yellow: #ffd52f;
  --puzzle-green: #35c76f;
  --puzzle-orange: #ff8a2b;
  --puzzle-violet: #8d55e8;
  background: #4dbbff !important;
  color: var(--puzzle-ink) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
}

body.puzzle-fun canvas#game { filter: saturate(1.12) contrast(1.06); }
body.puzzle-fun #kenney-cloud-layer,
body.puzzle-fun #kenney-grade-layer { display: none !important; }

body.puzzle-fun #hud {
  min-width: 340px !important;
  border: 4px solid var(--puzzle-blue) !important;
  border-radius: 18px !important;
  color: var(--puzzle-ink) !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 7px 0 #0959be, 0 16px 30px rgba(23,49,91,.2) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}
body.puzzle-fun #hud .title {
  color: var(--puzzle-red) !important;
  background: #fff0f2 !important;
  text-shadow: none !important;
}
body.puzzle-fun .hud-row { gap: 5px !important; }
body.puzzle-fun .hud-row > span {
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--puzzle-ink);
  background: #edf8ff;
  font-weight: 900;
}
body.puzzle-fun .hud-row > span:nth-child(2) { background: #fff8c9; }
body.puzzle-fun .hud-row > span:nth-child(3) { background: #ecfff2; }

body.puzzle-fun #hint {
  border: 3px solid #e2ac00 !important;
  color: var(--puzzle-ink) !important;
  background: rgba(255,249,201,.97) !important;
  box-shadow: 0 5px 0 #a97f00 !important;
  backdrop-filter: none !important;
}

body.puzzle-fun #menu {
  background:
    radial-gradient(circle at 10% 13%, #fff 0 5%, transparent 5.2%),
    radial-gradient(circle at 86% 9%, rgba(255,255,255,.9) 0 7%, transparent 7.2%),
    linear-gradient(180deg, #4dbbff 0 64%, #35c76f 64.2% 100%) !important;
  backdrop-filter: none !important;
}
body.puzzle-fun #menu .panel {
  position: relative;
  border: 5px solid var(--puzzle-blue) !important;
  border-radius: 25px !important;
  color: var(--puzzle-ink) !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: 0 10px 0 #0959be, 0 26px 50px rgba(23,49,91,.24) !important;
}
body.puzzle-fun .menu-kicker {
  margin-bottom: 2px;
  color: var(--puzzle-violet);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}
body.puzzle-fun #menu h1 {
  margin: 0 0 11px !important;
  color: var(--puzzle-blue) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
  text-shadow: 0 4px 0 #a7d0ff !important;
}
body.puzzle-fun #menu h1 span { color: var(--puzzle-red) !important; }
body.puzzle-fun .menu-lead {
  max-width: 730px;
  margin: 0 auto 4px !important;
  color: #526783 !important;
  text-align: center;
}
body.puzzle-fun .menu-rule {
  max-width: 660px;
  margin: 0 auto 12px !important;
  color: #637894 !important;
  font-size: 13px;
  text-align: center;
}

body.puzzle-fun #character-grid .char-card {
  border: 3px solid var(--puzzle-blue) !important;
  border-radius: 16px !important;
  color: var(--puzzle-ink) !important;
  background: #edf8ff !important;
  box-shadow: 0 5px 0 #9ebed7 !important;
}
body.puzzle-fun #character-grid .char-card:nth-child(6n + 2) { border-color: var(--puzzle-red) !important; background: #fff0f2 !important; box-shadow: 0 5px 0 #e8a4ae !important; }
body.puzzle-fun #character-grid .char-card:nth-child(6n + 3) { border-color: #e2ac00 !important; background: #fff8c9 !important; box-shadow: 0 5px 0 #dfc76e !important; }
body.puzzle-fun #character-grid .char-card:nth-child(6n + 4) { border-color: var(--puzzle-green) !important; background: #ecfff2 !important; box-shadow: 0 5px 0 #9dd9b1 !important; }
body.puzzle-fun #character-grid .char-card:nth-child(6n + 5) { border-color: var(--puzzle-orange) !important; background: #fff0df !important; box-shadow: 0 5px 0 #e3b98f !important; }
body.puzzle-fun #character-grid .char-card:nth-child(6n) { border-color: var(--puzzle-violet) !important; background: #f3edff !important; box-shadow: 0 5px 0 #beace0 !important; }
body.puzzle-fun #character-grid .char-card:hover,
body.puzzle-fun #character-grid .char-card:focus-visible { outline: 4px solid var(--puzzle-yellow) !important; outline-offset: 2px !important; transform: translateY(-4px) rotate(-1deg) !important; }
body.puzzle-fun .char-card img { border: 0 !important; border-radius: 50%; filter: drop-shadow(0 5px 6px rgba(23,49,91,.22)) saturate(1.08) !important; }
body.puzzle-fun .char-card span { color: var(--puzzle-ink) !important; font-weight: 1000 !important; }

body.puzzle-fun .chip,
body.puzzle-fun button.chip,
body.puzzle-fun a.chip {
  min-height: 44px;
  border: 3px solid var(--puzzle-blue) !important;
  color: var(--puzzle-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 0 #9ebed7 !important;
  text-shadow: none !important;
}
body.puzzle-fun #toggle-sfx { border-color: #e2ac00 !important; background: #fff8c9 !important; }
body.puzzle-fun #toggle-music { border-color: var(--puzzle-green) !important; background: #ecfff2 !important; }
body.puzzle-fun #end-controls .chip-primary { border-color: var(--puzzle-red) !important; color: #fff !important; background: var(--puzzle-red) !important; box-shadow: 0 6px 0 #b51e33 !important; }
body.puzzle-fun #result { border: 3px solid var(--puzzle-red) !important; color: var(--puzzle-ink) !important; background: #fff0f2 !important; }

body.puzzle-fun #dmg-global-controls .dmg-ctl-btn,
body.puzzle-fun #dmg-top-actions .dmg-btn {
  border: 3px solid var(--puzzle-blue) !important;
  color: var(--puzzle-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 0 #0959be !important;
  text-shadow: none !important;
}
body.puzzle-fun #dmg-pause-overlay { background: rgba(77,187,255,.62) !important; backdrop-filter: blur(8px) !important; }

@media (max-width: 620px) {
  body.puzzle-fun #hud { min-width: 0 !important; right: 8px; }
  body.puzzle-fun #menu .panel { padding: 18px 14px !important; border-width: 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.puzzle-fun *, body.puzzle-fun *::before, body.puzzle-fun *::after { transition: none !important; animation-duration: .01ms !important; }
}