/* Festival Classics: bright shared shell for the arcade games that predate the
   bespoke Festival Toybox passes. Every rule is scoped to avoid recoloring the
   already enhanced games. */
body.festival-classic {
  --classic-accent: #1479ff;
  --classic-accent-2: #ffd52f;
  --classic-accent-3: #35c76f;
  --classic-shadow: #0b57b8;
  --classic-sky: #78d7ff;
  --classic-ground: #7adb73;
  --classic-ink: #17315b;
  --classic-paper: #fffdf4;
  --classic-soft: #eef8ff;
  isolation: isolate;
  color: var(--classic-ink) !important;
  background:
    radial-gradient(circle at 13% 14%, rgba(255,255,255,.92) 0 5%, transparent 5.2%),
    radial-gradient(circle at 86% 10%, rgba(255,255,255,.76) 0 7%, transparent 7.2%),
    linear-gradient(180deg, var(--classic-sky) 0 58%, var(--classic-ground) 58.2% 100%) !important;
}

body.theme-kungfu { --classic-accent:#f0444d; --classic-accent-2:#ffd43b; --classic-accent-3:#35bd72; --classic-shadow:#a91e2e; --classic-sky:#7fd8ff; --classic-ground:#f3c45d; --classic-soft:#fff4d1; }
body.theme-streetfighter { --classic-accent:#8d55e8; --classic-accent-2:#ff8a2b; --classic-accent-3:#1479ff; --classic-shadow:#5931a7; --classic-sky:#8bdcff; --classic-ground:#ffca58; --classic-soft:#f5edff; }
body.theme-pacman { --classic-accent:#ffd32f; --classic-accent-2:#1479ff; --classic-accent-3:#ff4057; --classic-shadow:#a77c00; --classic-sky:#8edcff; --classic-ground:#7cda72; --classic-soft:#fff9c8; }
body.theme-donkeykong { --classic-accent:#ff7a29; --classic-accent-2:#ffd32f; --classic-accent-3:#ef4055; --classic-shadow:#b34a0e; --classic-sky:#86d9ff; --classic-ground:#80d66f; --classic-soft:#fff0dc; }
body.theme-dino { --classic-accent:#35bd72; --classic-accent-2:#ff8a2b; --classic-accent-3:#8d55e8; --classic-shadow:#18884b; --classic-sky:#78d9ff; --classic-ground:#7ddd68; --classic-soft:#eaffef; }
body.theme-tetris { --classic-accent:#1479ff; --classic-accent-2:#8d55e8; --classic-accent-3:#ffd32f; --classic-shadow:#0a57b8; --classic-sky:#88dcff; --classic-ground:#ffcf57; --classic-soft:#eaf6ff; }
body.theme-bejeweled { --classic-accent:#ee4f91; --classic-accent-2:#8d55e8; --classic-accent-3:#35c76f; --classic-shadow:#a62560; --classic-sky:#9adfff; --classic-ground:#8ddd7a; --classic-soft:#fff0f7; }
body.theme-snake { --classic-accent:#35c76f; --classic-accent-2:#ffd32f; --classic-accent-3:#1479ff; --classic-shadow:#16894a; --classic-sky:#87ddff; --classic-ground:#72d966; --classic-soft:#edfff1; }
body.theme-breakout { --classic-accent:#1479ff; --classic-accent-2:#ff8a2b; --classic-accent-3:#ff4057; --classic-shadow:#0958bd; --classic-sky:#8bdcff; --classic-ground:#ffd45d; --classic-soft:#edf8ff; }
body.theme-pong { --classic-accent:#ff4057; --classic-accent-2:#1479ff; --classic-accent-3:#ffd32f; --classic-shadow:#b51e33; --classic-sky:#8edfff; --classic-ground:#7fdd72; --classic-soft:#fff0f2; }
body.theme-centipede { --classic-accent:#35c76f; --classic-accent-2:#8d55e8; --classic-accent-3:#ff8a2b; --classic-shadow:#16894a; --classic-sky:#82dbff; --classic-ground:#6fd365; --classic-soft:#ebfff0; }
body.theme-kaboom { --classic-accent:#ff4057; --classic-accent-2:#ffd32f; --classic-accent-3:#1479ff; --classic-shadow:#b51e33; --classic-sky:#8bdcff; --classic-ground:#79d96e; --classic-soft:#fff1d4; }

body.festival-classic #kenney-pastel-grade,
body.festival-classic #kenney-cloud-layer,
body.festival-classic #kenney-grade-layer {
  display: none !important;
}

body.festival-classic canvas#game {
  filter: saturate(1.22) contrast(1.08) brightness(1.04) !important;
  outline: 5px solid var(--classic-ink);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.2), 0 12px 0 rgba(23,49,91,.24) !important;
}

body.festival-classic #menu,
body.festival-classic #rotate-overlay {
  background:
    radial-gradient(circle at 15% 16%, rgba(255,255,255,.9), transparent 28%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--classic-accent-2) 34%, transparent), transparent 34%),
    linear-gradient(160deg, color-mix(in srgb, var(--classic-sky) 84%, white), color-mix(in srgb, var(--classic-ground) 66%, white)) !important;
}

body.festival-classic #menu .panel,
body.festival-classic #rotate-overlay .card,
body.festival-classic #dmg-pause-overlay .dmg-pause-card {
  width: min(920px, calc(100vw - 28px));
  color: var(--classic-ink) !important;
  border: 5px solid var(--classic-accent) !important;
  border-radius: 28px !important;
  background: rgba(255,253,244,.97) !important;
  box-shadow: 0 9px 0 var(--classic-shadow), 0 22px 46px rgba(23,49,91,.25) !important;
  text-shadow: none !important;
}

body.festival-classic #menu h1 {
  margin-top: 2px !important;
  color: var(--classic-accent) !important;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
  font-weight: 1000 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 3px 0 #fff, 0 6px 0 color-mix(in srgb, var(--classic-accent-2) 70%, transparent) !important;
}

body.festival-classic .classic-kicker {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 7px;
  padding: 6px 14px 5px;
  color: #fff;
  border: 3px solid var(--classic-ink);
  border-radius: 999px;
  background: var(--classic-accent);
  box-shadow: 0 4px 0 var(--classic-shadow);
  font: 900 clamp(10px,1.2vw,14px)/1 "Trebuchet MS", sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

body.festival-classic #hud,
body.festival-classic #hint {
  color: var(--classic-ink) !important;
  border-color: var(--classic-ink) !important;
  background: rgba(255,253,244,.94) !important;
  box-shadow: 0 5px 0 var(--classic-shadow), 0 10px 24px rgba(23,49,91,.18) !important;
  text-shadow: none !important;
}
body.festival-classic #hud { border-width: 3px !important; border-radius: 16px !important; }
body.festival-classic #hint { border: 3px solid var(--classic-accent) !important; border-radius: 999px !important; }

body.festival-classic #menu .chip,
body.festival-classic #menu button,
body.festival-classic #dmg-global-controls .dmg-ctl-btn {
  min-height: 44px;
  color: var(--classic-ink) !important;
  border: 3px solid var(--classic-ink) !important;
  border-radius: 999px !important;
  background: var(--classic-accent-2) !important;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--classic-ink) 72%, transparent) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
body.festival-classic #menu .chip:hover,
body.festival-classic #menu button:hover,
body.festival-classic #menu .chip:focus-visible,
body.festival-classic #menu button:focus-visible {
  transform: translateY(-3px) rotate(-1deg);
  filter: saturate(1.18);
  outline: 4px solid #fff !important;
  outline-offset: 3px !important;
}

body.festival-classic #character-grid .char-card {
  color: var(--classic-ink) !important;
  border: 3px solid var(--classic-accent) !important;
  border-radius: 18px !important;
  background: var(--classic-soft) !important;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--classic-accent) 55%, white) !important;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.25), box-shadow .16s ease !important;
}
body.festival-classic #character-grid .char-card:nth-child(3n + 2) { border-color: var(--classic-accent-2) !important; }
body.festival-classic #character-grid .char-card:nth-child(3n) { border-color: var(--classic-accent-3) !important; }
body.festival-classic #character-grid .char-card:hover,
body.festival-classic #character-grid .char-card:focus-visible {
  position: relative;
  z-index: 5;
  transform: translateY(-5px) scale(1.1) rotate(-1deg) !important;
  box-shadow: 0 9px 0 color-mix(in srgb, var(--classic-accent) 55%, white), 0 17px 28px rgba(23,49,91,.22) !important;
}
body.festival-classic #character-grid .char-card img {
  filter: drop-shadow(0 5px 6px rgba(23,49,91,.24)) !important;
}

body.festival-classic #result {
  color: var(--classic-ink) !important;
  border: 4px solid var(--classic-accent-2) !important;
  border-radius: 16px !important;
  background: #fff9ca !important;
  box-shadow: 0 5px 0 #bd8d00 !important;
}

body.festival-classic .classic-stage-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
body.festival-classic .classic-stage-decor span {
  position: absolute;
  display: block;
  border: 6px solid rgba(255,255,255,.72);
  border-radius: 50%;
  opacity: .72;
}
body.festival-classic .classic-stage-decor span:nth-child(1) { width: 150px; height: 150px; left: -54px; bottom: 8%; background: var(--classic-accent-2); }
body.festival-classic .classic-stage-decor span:nth-child(2) { width: 96px; height: 96px; right: -31px; top: 18%; background: var(--classic-accent); }
body.festival-classic .classic-stage-decor span:nth-child(3) { width: 54px; height: 54px; left: 76%; bottom: 4%; background: var(--classic-accent-3); }

body.festival-classic .classic-hud-pop { animation: classicHudPop .28s cubic-bezier(.2,.9,.3,1.3); }
body.festival-classic #result.classic-result-pop { animation: classicResultPop .48s cubic-bezier(.2,.9,.3,1.2); }
@keyframes classicHudPop { 50% { transform: translateY(-2px) scale(1.035); filter: saturate(1.35); } }
@keyframes classicResultPop { 45% { transform: scale(1.045) rotate(-.5deg); } }

@media (max-width: 700px) {
  body.festival-classic #menu .panel { border-width: 4px !important; border-radius: 21px !important; }
  body.festival-classic .classic-stage-decor span { opacity: .48; }
}
@media (prefers-reduced-motion: reduce) {
  body.festival-classic *,
  body.festival-classic *::before,
  body.festival-classic *::after { animation: none !important; transition: none !important; }
}
