/* The New flag (templates/_newflag.html) on a style that came out in the last two weeks. Each flag carries that style's
   theme-<key> class, so the tokens below are the style's own colours wherever it shows. Linked only while a style is New. */
.newflag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px solid var(--accent); background: var(--panel); color: var(--accent-2); font: 700 12px/1.2 var(--sans); font-style: normal; letter-spacing: .02em; white-space: nowrap; text-shadow: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 16px var(--glow-soft); }
.newflag .flame { width: 14px; height: 14px; fill: var(--accent); filter: drop-shadow(0 0 6px var(--glow)); animation: flicker 2.4s ease-in-out infinite; }
.tile .newflag, .mini .newflag { position: absolute; top: 12px; left: 12px; z-index: 1; }
.mini .newflag { top: 8px; left: 8px; padding: 3px 8px 3px 5px; font-size: 11px; }
.mini .newflag .flame { width: 12px; height: 12px; }
h1 .newflag { display: flex; width: fit-content; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .newflag .flame { animation: none; } }