/* playgrubble.com: the game's colours from apps/client/lib/theme/app_theme.dart
   and the wordmark from apps/client/lib/theme/wordmark.dart, by hand. */

@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/Fredoka-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-Variable.ttf') format('truetype');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --background: #10172b;
  --surface: #18223f;
  --brand: #7857f0;
  --brand-edge: #4f35c2;
  --brand-soft: #b3a2fa;
  --text: #dde6f8;
  --text-muted: #8fa3c9;
  --glass-top: #fbfaff;
  --glass-bottom: #e4dcff;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

main {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 112px;
  height: 112px;
  margin-bottom: 20px;
}

/* GRUBBLE: each letter tilted and lifted as in the app, a glass face over a
   solid edge in the dark violet. Edge and face are two copies of the letter
   laid over the invisible one that holds its place: a text-shadow would
   show through the clipped gradient. */
.wordmark {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.wordmark span {
  position: relative;
  display: inline-block;
  color: transparent;
}

.wordmark span::before,
.wordmark span::after {
  content: attr(data-l);
  position: absolute;
  left: 0;
  top: 0;
}

.wordmark span::before {
  top: 0.09em;
  color: var(--brand-edge);
}

.wordmark span::after {
  background: linear-gradient(
    to bottom,
    var(--glass-top) 10.5%,
    var(--glass-bottom) 80.5%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.wordmark span:nth-child(1) { transform: translateY(-0.03em) rotate(-5.4deg); }
.wordmark span:nth-child(2) { transform: translateY(0.03em); }
.wordmark span:nth-child(3) { transform: translateY(-0.02em) rotate(3deg); }
.wordmark span:nth-child(4) { transform: translateY(0.04em); }
.wordmark span:nth-child(5) { transform: translateY(-0.03em) rotate(-3deg); }
.wordmark span:nth-child(6) { transform: translateY(0.02em); }
.wordmark span:nth-child(7) { transform: translateY(-0.01em) rotate(4deg); }

h1 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px;
}

p {
  margin: 0 0 28px;
  color: var(--text-muted);
}

/* The app's brand button: violet on a solid underside, lit at the rim. */
.button {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--brand);
  box-shadow:
    inset 0 0 0 2px var(--brand-soft),
    0 5px 0 var(--brand-edge);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

.button:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 0 0 2px var(--brand-soft),
    0 1px 0 var(--brand-edge);
}

.secondary {
  margin-top: 28px;
  font-size: 16px;
  color: var(--text-muted);
}

.secondary a {
  color: var(--brand-soft);
  font-weight: 700;
  text-decoration: none;
}