/* joldi.in's own pages (the list of games, sign-in, privacy, not found), in
   the look of the Joldi logo. Each game carries its own styles in its own
   folder, so it keeps working offline.

   Lilita One and Nunito are served from here rather than from Google, so the
   pages need no other site. Both are under the SIL Open Font License 1.1;
   each file is the Latin part of the font as Google Fonts serves it, and
   Nunito is one variable file for every weight. */
@font-face { font-family: "Lilita One"; src: url("fonts/lilita-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --bg: #FFF4CF; --glow: #FFFFFF; --streak: rgba(255, 190, 40, 0.16);
  --chip: #FFFCF2; --well: #F3E2A8; --sheet: #FFFCF2;
  --line: #1B1446; --text: #1B1446; --muted: #5B518F;
  --bad: #C0203F; --good: #1E8A3A;
  /* The same in both looks: the logo's navy, cream and yellow. */
  --navy: #1B1446; --cream: #FFFCF2; --yellow: #FFD21F;
  --yellow-3d: linear-gradient(180deg, #FFF08A 0%, #FFD21F 55%, #F5A300 100%);
  --display: "Lilita One", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #16104A; --glow: #3B2FA8; --streak: rgba(255, 255, 255, 0.035);
  --chip: #2A2275; --well: #2A2275; --sheet: #221A63;
  --line: #07051C; --text: #FFF6E0; --muted: #B9B0E8;
  --bad: #FF8FA3; --good: #7EE08F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font); font-weight: 800; color: var(--text); -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* A glow at the top and faint diagonal speed streaks, as in the logo. */
  background:
    radial-gradient(120% 60% at 50% -5%, var(--glow) 0%, transparent 60%) top center / 100% 100vh no-repeat,
    repeating-linear-gradient(-62deg, transparent 0 34px, var(--streak) 34px 36px),
    var(--bg);
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--sat) + 20px) calc(var(--sar) + 18px) calc(var(--sab) + 28px) calc(var(--sal) + 18px);
}
a { color: inherit; }
:focus-visible { outline: 4px solid rgba(255, 210, 31, 0.85); outline-offset: 3px; }

.home { display: block; width: min(100%, 240px); margin: 0 auto 16px; }
.home img { display: block; width: 100%; height: auto; }

.card {
  margin: 0 auto; max-width: 440px; padding: clamp(16px, 5vw, 22px); display: flex; flex-direction: column; gap: 14px;
  background: var(--chip); border: 3px solid var(--line); border-radius: 22px; box-shadow: 0 6px 0 var(--line);
}
.card h2 { margin: 0; font: 28px/1.1 var(--display); letter-spacing: 0.01em; }
.card p { margin: 0; font-size: 17px; line-height: 1.4; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 14px;
  border-radius: 16px; border: 3px solid var(--line); font: 900 17px/1 var(--font); text-decoration: none; cursor: pointer;
  color: var(--text); background: var(--chip); box-shadow: 0 4px 0 var(--line); touch-action: manipulation;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn.go { font: 19px/1 var(--display); letter-spacing: 0.01em; color: var(--navy); background: var(--yellow-3d); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn svg { width: 20px; height: 20px; flex: none; }

.links { margin: 24px auto 0; max-width: 440px; text-align: center; font-size: 15px; color: var(--muted); }