/* The page's own pieces, the few the style guide's markup does not already have. Taken from
   css/site.css in the Arrow Lab repository. Tokens only, no raw colours (docs/README.md §2.2
   there), so every theme draws them in its own palette. Loaded after the theme files. */

/* ---------- home: the app list ---------- */
/* A status that failed is the one thing on the page that has to stand out. */
.game-status.down { color: var(--danger); }
[data-theme="horizon"] .game-status.down { background: var(--danger-soft); }
.offline-badge.down i { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }

/* The way to Arrow Lab: there for whoever looks, not competing with the apps. */
.quiet-link {
  color: var(--faint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  text-decoration: none; opacity: .8;
  transition: var(--fade), opacity var(--t-fast) var(--ease);
}
.quiet-link:hover, .quiet-link:focus-visible { color: var(--muted); opacity: 1; text-decoration: underline; }

/* ---------- theme-generated strings, with this site's noun (docs/README.md §2.8) ---------- */
[data-theme="arcade"] body[data-site="grombach"] .home-hero::after { content: "\25B8  Select an app"; }
[data-theme="arcade"]:lang(de) body[data-site="grombach"] .home-hero::after { content: "\25B8  App wählen"; }
/* Cyberpunk's vertical sign names the site in katakana. */
[data-theme="cyberpunk"] body[data-site="grombach"] .home-hero::after { content: "\30B0\30ED\30E0\30D0\30C3\30CF"; }