/* Shoo Fly: a gingham cafe table, the rule pill and rule cards */

body.game {
  --bg-top: #2f7a4f;
  --bg-bottom: #245f3d;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .16);
}
body.game .stage { overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.subhud .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 28px; }
.subhud .chip b { font-size: 17px; font-variant-numeric: tabular-nums; }
.chip.sf-score { background: #1d5a36; }
.chip .sf-mult { font-style: normal; font-weight: 900; font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: #ffd23f; color: #5a2a00; }
.chip .sf-mult[hidden] { display: none; }
.chip.sf-lives { gap: 2px; padding-inline: 8px; }
.chip.sf-lives i { display: inline-grid; width: 20px; height: 20px; }
.chip.sf-lives svg { width: 100%; height: 100%; }
.chip.sf-lives i svg path { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.chip.sf-lives i.on svg path { fill: #9be86a; stroke: #f0ffe6; }
.chip.sf-lives.last i.on { animation: sf-beat .8s ease-in-out infinite; }
.chip.sf-lives.last i.on svg path { fill: #ffb13b; }
.chip.sf-lives.lose { animation: sf-lose .45s ease-out; }
.chip.sf-lives.gain { animation: sf-gain .6s ease-out; }
@keyframes sf-beat { 50% { transform: scale(1.2); } }
@keyframes sf-lose { 20% { transform: translateX(-5px); background: rgba(255, 60, 30, .6); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
@keyframes sf-gain { 30% { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(155, 232, 106, .8); } }
@media (max-width: 380px) { .subhud .chip { padding-inline: 9px; } .chip.sf-lives i { width: 17px; height: 17px; } }
@media (prefers-reduced-motion: reduce) { .chip.sf-lives.last i.on, .chip.sf-lives.lose, .chip.sf-lives.gain { animation: none; } }

/* what to shoo right now */
.sf-pill {
  position: absolute; z-index: 4; left: 50%; top: 6px; transform: translateX(-50%); pointer-events: none;
  padding: 5px 14px; border-radius: 999px; background: #fff; color: #2b1d14; font-weight: 800; font-size: 15px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15); white-space: nowrap;
}
.sf-pill[data-rule="bee"], .sf-pill[data-rule="butterfly"] { background: #ffd23f; animation: sf-pulse 1s ease-in-out infinite; }
@keyframes sf-pulse { 50% { transform: translateX(-50%) scale(1.06); } }

/* the rule card */
.sf-card {
  position: absolute; z-index: 7; left: 50%; top: 50%; width: min(300px, calc(100% - 40px));
  transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
  display: grid; justify-items: center; gap: 2px; padding: 16px 18px 18px; border-radius: 22px;
  background: #fffaf0; color: #2b1d14; text-align: center; box-shadow: 0 10px 0 rgba(0, 0, 0, .18), 0 0 0 4px #2f7a4f;
}
.sf-card.flip { box-shadow: 0 10px 0 rgba(0, 0, 0, .18), 0 0 0 4px #e8a20c; background: #fff6d6; }
.sf-card.show { animation: sf-card var(--dur, 1.5s) ease-out both; }
.sf-card small { font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--chili); }
.sf-card canvas { position: static; inset: auto; width: 72px; height: 72px; }
.sf-card canvas[hidden] { display: none; }
.sf-card b { font: 700 25px/1.15 var(--display); }
.sf-card span { font-weight: 700; font-size: 15px; color: #5a4a3a; }
html[lang="hi"] .sf-card small { letter-spacing: 0; }
@keyframes sf-card {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
  20% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-card.show { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .sf-pill[data-rule] { animation: none; }
}

.sf-hand { margin: 0; }
.sf-hand[hidden] { display: none; }

.sf-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 4px; border: 0;
  background: rgba(20, 40, 25, .62); color: #fff; font: inherit; text-align: center; cursor: pointer;
}
.sf-pause[hidden] { display: none; }
.sf-pause b { font: 700 34px/1.1 var(--display); }
.sf-pause span { font-weight: 700; font-size: 17px; padding: 10px 22px; margin-top: 10px; border-radius: 999px; background: var(--chili); box-shadow: 0 5px 0 var(--chili-2); }
.sf-stage .coach-line { top: 44px; }