feat: Kinetic Text Tags {bt} {sc} {fi} {rotat} move letters; closing tags close their own tag

Letters of these custom tags animate one after another (CSS). A closing tag now closes the style that
it opened (with anything left open inside) instead of popping whatever was on top, and an unknown tag
that has a closing tag later shows its text plainly and stays balanced.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

frontend/src/player/player.css

@@ -369,3 +369,14 @@
 /* checkbox row of the settings screen */
 .pg-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; cursor: pointer; font-size: 14px; }
 .pg-check input { width: 18px; height: 18px; accent-color: var(--pg-accent, #f5a040); }
+
+/* Kinetic Text Tags: {bt}, {sc}, {fi}, {rotat} move each letter on its own */
+.pg-fx { display: inline-block; white-space: pre; }
+.pg-fx-bt { animation: pg-fx-bounce 0.9s ease-in-out infinite; }
+.pg-fx-sc { animation: pg-fx-scare 0.12s linear infinite; }
+.pg-fx-fi { animation: pg-fx-in 0.6s ease-out both; }
+.pg-fx-rotat { animation: pg-fx-spin 2s linear infinite; }
+@keyframes pg-fx-bounce { 50% { transform: translateY(calc(var(--fx, 6) * -1px)); } }
+@keyframes pg-fx-scare { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
+@keyframes pg-fx-in { from { opacity: 0; transform: translateY(8px); } }
+@keyframes pg-fx-spin { to { transform: rotate(360deg); } }