@font-face{font-family:"montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/921378c73e-montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/bb708d9541-montserrat-latin-800-normal.woff2) format("woff2")}
/* Omnidle look for the network pages (home, about, privacy, account, 404).
   Brand colours from the logo: red, amber and green tiles on near-black. Motion uses only
   transform and opacity (no layout shift) and switches off for prefers-reduced-motion. */

body.network {
  --primary: #3dbf62;
  --accent: #f2a531;
  --brand-red: #e24a5b;
  --brand-amber: #f2a531;
  --brand-green: #3dbf62;
  --headingFont: montserrat, system-ui, sans-serif;
  background:
    radial-gradient(900px 420px at 12% -10%, rgb(61 191 98 / 0.10), transparent 70%),
    radial-gradient(700px 380px at 95% 0%, rgb(226 74 91 / 0.08), transparent 70%),
    radial-gradient(800px 500px at 50% 110%, rgb(242 165 49 / 0.06), transparent 70%),
    var(--background);
  background-attachment: fixed;
}
.network .site-header { background: rgb(29 31 43 / 0.85); border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.network .site-brand { display: inline-flex; gap: 8px; align-items: center; font-family: var(--headingFont); font-weight: 800; font-size: 18px; color: var(--text); }
.network .site-brand .tile-logo { width: 22px; height: 22px; gap: 2px; }

/* Hero: big tile logo that flips in, Omni + green dle wordmark */
.hero { display: flex; gap: 20px; align-items: center; margin: 12px 0 18px; }
.hero-title { margin: 0 0 4px; font-size: clamp(34px, 7vw, 52px); font-weight: 800; letter-spacing: -0.02em; }
.hero .intro { margin: 0; font-size: 17px; color: var(--muted); }
.hero-tiles { width: clamp(64px, 14vw, 88px); height: clamp(64px, 14vw, 88px); gap: 5px; padding: 8px; border-radius: 18px; background: linear-gradient(145deg, #262838, #191a24); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); perspective: 400px; }
.hero-tiles i { border-radius: 4px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.18); animation: tile-flip 0.5s cubic-bezier(0.3, 1.4, 0.6, 1) both; }
.hero-tiles:hover i { animation: tile-wave 0.6s ease both; }
.hero-tiles i:nth-child(1) { animation-delay: 0.00s; } .hero-tiles i:nth-child(2) { animation-delay: 0.06s; } .hero-tiles i:nth-child(3) { animation-delay: 0.12s; }
.hero-tiles i:nth-child(4) { animation-delay: 0.18s; } .hero-tiles i:nth-child(5) { animation-delay: 0.24s; } .hero-tiles i:nth-child(6) { animation-delay: 0.30s; }
.hero-tiles i:nth-child(7) { animation-delay: 0.36s; } .hero-tiles i:nth-child(8) { animation-delay: 0.42s; } .hero-tiles i:nth-child(9) { animation-delay: 0.48s; }
@keyframes tile-flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tile-wave { 50% { transform: translateY(-4px) scale(1.08); } }

/* Search */
.network .search-box .guess-input { border-color: rgb(255 255 255 / 0.12); transition: border-color 0.2s, box-shadow 0.2s; }
.network .search-box .guess-input:focus { outline: none; border-color: var(--brand-green); box-shadow: 0 0 0 4px rgb(61 191 98 / 0.18); }

/* Category chips */
.network .category-nav a { border: 1px solid rgb(255 255 255 / 0.08); background: var(--surface); transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.network .category-nav a:hover { transform: translateY(-1px); border-color: var(--brand-green); background: rgb(61 191 98 / 0.12); }

/* Category headings: a coloured tile before each, cycling the brand colours */
.network .category h2 { font-weight: 800; }
.network .category-fold > summary h2::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.4em; border-radius: 3px; vertical-align: middle; background: var(--tile, var(--brand-green)); }
.network .category:nth-of-type(3n + 1) { --tile: var(--brand-red); }
.network .category:nth-of-type(3n + 2) { --tile: var(--brand-amber); }
.network .category:nth-of-type(3n) { --tile: var(--brand-green); }
.network .category-fold > summary:hover h2 { color: var(--text); }
.network .category-fold > summary:hover h2::before { color: var(--tile); }

/* Game cards: rise on hover with a coloured edge, fade up on load */
.network .card-list a { position: relative; border: 1px solid rgb(255 255 255 / 0.06); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s; }
.network .card-list a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tile, var(--brand-green)); opacity: 0; transition: opacity 0.18s; }
.network .card-list a:hover { transform: translateY(-3px); border-color: rgb(255 255 255 / 0.14); box-shadow: 0 10px 24px rgb(0 0 0 / 0.35); }
.network .card-list a:hover::before { opacity: 1; }
.network .card-list li { animation: card-in 0.4s ease both; }
.network .card-list li:nth-child(2) { animation-delay: 0.04s; } .network .card-list li:nth-child(3) { animation-delay: 0.08s; }
.network .card-list li:nth-child(4) { animation-delay: 0.12s; } .network .card-list li:nth-child(n + 5) { animation-delay: 0.16s; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.network .site-footer { border-top: 1px solid rgb(255 255 255 / 0.06); }

@media (max-width: 560px) {
  .hero { gap: 14px; }
  .hero .intro { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .network *, .network *::before, .network *::after { animation: none !important; transition: none !important; }
}