/* Buttons: Firefly plates (armored scutes, dark steel and bright platinum) as a 9-slice frame behind the label; the label stays text.
   Light theme: primary steel, secondary platinum; dark theme the other way round. Danger buttons stay a plain outline. */
:root { --plate-primary: url(/static/icons/btn-steel.webp); --plate-secondary: url(/static/icons/btn-platinum.webp); }
@media (prefers-color-scheme: dark) {
  :root { --plate-primary: url(/static/icons/btn-platinum.webp); --plate-secondary: url(/static/icons/btn-steel.webp); }
}
.btn { position: relative; isolation: isolate; background: none; border: 0; box-shadow: none; padding: 9px 18px; border-radius: 10px; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-sizing: border-box;
  border: 14px solid transparent; border-image: var(--plate-secondary) 56 fill / 14px stretch;
}
.btn.primary::before { border-image-source: var(--plate-primary); }
.btn.danger { background: transparent; border: 1px solid var(--danger); padding: 8px 14px; box-shadow: none; }
.btn.danger::before { display: none; }
.btn:hover { filter: brightness(1.07); }
.btn:active { filter: brightness(.92); transform: translateY(1px); box-shadow: none; }

/* Tab bar: Firefly medallions (armored silver, embossed pictograms) instead of line icons; the active tab is lit, the others are calmer */
nav.tabbar img { width: 40px; height: 40px; border-radius: 50%; opacity: .72; filter: saturate(.85); transition: opacity .15s, box-shadow .15s; }
nav.tabbar a.active img { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--link), 0 0 12px rgba(120, 160, 230, .55); }
nav.tabbar a.add img { width: 52px; height: 52px; margin-top: -10px; opacity: 1; filter: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); }
nav.tabbar a.add.active img { box-shadow: 0 0 0 2px var(--link), 0 0 14px rgba(120, 160, 230, .6), 0 3px 10px rgba(0, 0, 0, .45); }

/* Brand font (Dazdranagon Display, capitals only, own letters from the mark): app name in the top bar and on the splash;
   a letter the font lacks falls back to the serif face */
@font-face { font-family: "Dazdranagon Display"; src: url(/static/fonts/Dazdranagon-Display.woff2) format("woff2"); font-display: swap; }
nav.top .brand, #splash .sp-name { font-family: "Dazdranagon Display", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .02em; }
nav.top .brand { font-size: 1.25rem; }
#splash .sp-name { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.05; }