/* Fartmas Choir. Palette: brief §1.4 "Fartmas Choir". */

body.game-page.fartmas { background: #0f2a4a; }

#title {
  background:
    /* low snowbank the choir stands on (a sized ellipse: the old auto-sized one was a tall white wedge) */
    radial-gradient(150% 25% at 50% 100%, #f4faff 0 62%, #dcecfb 63% 66%, transparent 67%),
    radial-gradient(circle at 50% 42%, #1e4f86 0, #0f2a4a 70%);
  --ray1: rgba(255,255,255,.08);
}
#title .poster-logo { --c1: #e3262b; --c2: #ffc21f; --c3: #2fa84f; }
#title .poster-logo .choir .l { color: #fff; }
#title .poster-logo .choir .l:nth-child(2n) { color: #8cf03c; }
#title .tagline { background: #fff; }
/* JS places one tap area over each drawn buddy every frame */
.buddy-hits { position: absolute; inset: 0; z-index: 3; }
.buddy-hits button { position: absolute; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 20px; touch-action: manipulation; }
.buddy-hits button:focus-visible { outline: 4px dashed var(--yellow); outline-offset: -6px; }

#howto { background: repeating-linear-gradient(-45deg, #0f2a4a 0 26px, #12345a 26px 52px); }
#howto .card { background: #fff8e8; margin-top: 30px; }
#howto h2 { --c1: #e3262b; --c2: #2fa84f; --c3: #ffc21f; }
#howto .steps { --step: #e3262b; --step2: #19c7ff; --step3: #2fa84f; }
.songs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.songs button {
  font-family: var(--logo); text-transform: uppercase; font-size: 14px; line-height: 1.05;
  border: 3px solid var(--ink); border-radius: 12px; background: #fff; padding: 8px 6px 6px;
  min-height: 48px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); color: var(--ink);
}
.songs button[aria-checked="true"] { background: var(--lime); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.songs button small { display: block; font: 400 12px var(--comic); letter-spacing: .5px; opacity: .75; margin-top: 2px; }
.best { font: 400 14px var(--comic); letter-spacing: 1px; text-transform: uppercase; opacity: .8; margin: 6px 0 0; min-height: 1em; }

#play { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 520px; background: #0f2a4a; }
#play .hud { --hud-bg: #0f2a4a; --hud-cell: #fff8e8; flex: none; }
#play .hud .cell.song { flex: 1.6 1 0; }
.meter.cane i { background: repeating-linear-gradient(-45deg, #e3262b 0 6px, #fff 6px 12px); }
#choir { flex: 1 1 auto; min-height: 0; width: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }

.end-screen.snowy { background: radial-gradient(circle at 50% 18%, #1e4f86, #0f2a4a 70%); }
.end-screen.snowy .end-title { --c1: #e3262b; --c2: #ffc21f; --c3: #2fa84f; }
.end-screen.snowy .end-card { background: #fff8e8; }
.end-screen.snowy .end-host .bubble { left: 50%; translate: -50% 0; top: -6px; max-width: 80%; }
.end-screen.snowy .end-host .bubble::after { right: auto; left: 50%; bottom: -14px; border: 9px solid transparent; border-top: 14px solid var(--ink); translate: -50% 0; }
.mvp-line { margin-top: 8px; font-size: 15px; }