/* granstrm games: the front door. Same dark, glassy look as the games behind it. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #08080d;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f4f4f8;
  --muted: #a1a1b3;
  --faint: #6c6c7e;
  --lime: #b9ff3b;
  --pink: #ff5fa2;
  --radius: 26px;
  --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pad: clamp(16px, 3vw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; touch-action: manipulation;
}
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
::selection { background: var(--lime); color: #0b0d05; }

.sprite { position: absolute; width: 0; height: 0; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- backdrop -------------------------------------------------------------- */

.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.backdrop i { position: absolute; border-radius: 50%; will-change: transform; }
.backdrop i:nth-child(1) {
  width: 90vmax; height: 90vmax; left: -35vmax; top: -45vmax;
  background: radial-gradient(closest-side, rgba(139, 108, 255, 0.34), transparent);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.backdrop i:nth-child(2) {
  width: 80vmax; height: 80vmax; right: -35vmax; bottom: -45vmax;
  background: radial-gradient(closest-side, rgba(255, 95, 162, 0.22), transparent);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.backdrop i:nth-child(3) {
  width: 60vmax; height: 60vmax; right: -10vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(79, 216, 255, 0.16), transparent);
  animation: drift-a 38s ease-in-out infinite alternate-reverse;
}
.backdrop::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%);
}
@keyframes drift-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-10vmax, -8vmax, 0) scale(1.1); } }

/* ---- page ------------------------------------------------------------------ */

.hub {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(36px, 8vh, 88px) max(var(--pad), env(safe-area-inset-right)) 48px max(var(--pad), env(safe-area-inset-left));
  display: grid; gap: clamp(28px, 5vh, 44px); justify-items: center;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
}

.hero { text-align: center; animation: rise 0.6s var(--ease) both; }
.eyebrow { font: 600 13px/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.wordmark {
  position: relative; display: inline-block; padding: 0 0.04em 0.12em;
  font: 800 clamp(84px, 20vw, 184px)/0.9 var(--display); letter-spacing: -0.055em;
  background: linear-gradient(180deg, #fff 30%, #b9b9d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark svg { position: absolute; left: 2%; bottom: -0.03em; width: 96%; height: auto; overflow: visible; }
.wordmark path {
  fill: none; stroke: url(#squiggle); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: scribble 1.1s 0.35s var(--ease) forwards;
  filter: drop-shadow(0 0 14px rgba(79, 216, 255, 0.4));
}
@keyframes scribble { to { stroke-dashoffset: 0; } }
.tagline { margin-top: 22px; color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; }

/* ---- who you are ----------------------------------------------------------- */

.me {
  width: min(100%, 520px); padding: 16px 20px 16px 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px;
  animation: rise 0.6s 0.08s var(--ease) both;
}
.avatar-picker { position: relative; width: 68px; height: 68px; grid-row: span 2; transition: transform 0.3s var(--spring); }
.avatar-picker:hover { transform: rotate(-4deg) scale(1.06); }
.avatar-picker:active { transform: scale(0.94); }
.avatar-picker.spin #avatar-preview { animation: spin-in 0.4s var(--spring); }
#avatar-preview, .avatar { display: block; width: 100%; height: 100%; }
@keyframes spin-in { from { transform: rotate(-120deg) scale(0.6); opacity: 0.4; } }
.avatar-badge {
  position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: #1b1b26; border: 1px solid var(--line-strong);
}
.avatar-badge .icon { width: 13px; height: 13px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field span { font: 600 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
input {
  height: 46px; width: 100%; min-width: 0; padding: 0 14px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line); outline: none; font-size: 16px; font-weight: 550;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input::placeholder { color: var(--faint); font-weight: 400; }
input:focus { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.45); }
.me-note { color: var(--faint); font-size: 13px; transition: color 0.3s; }
.me-note.saved { color: var(--lime); }

/* ---- games ----------------------------------------------------------------- */

.games { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.game {
  --accent: #fff; --ink: #0b0d05; --glow: 255, 255, 255;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.35s var(--spring), border-color 0.3s, box-shadow 0.35s;
  animation: rise 0.6s var(--ease) both;
}
.game:nth-child(1) { animation-delay: 0.14s; }
.game:nth-child(2) { animation-delay: 0.2s; }
.game:nth-child(3) { animation-delay: 0.26s; }
.game[data-game='sketch'] { --accent: #b9ff3b; --ink: #0b0d05; --glow: 185, 255, 59; }
.game[data-game='hangman'] { --accent: #ff5fa2; --ink: #1d0611; --glow: 255, 95, 162; }
a.game:hover, a.game:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(var(--glow), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 70px -30px rgba(0, 0, 0, 0.8), 0 0 80px -24px rgba(var(--glow), 0.55);
}
a.game:active { transform: translateY(-2px) scale(0.99); }

.art { position: relative; aspect-ratio: 320 / 190; overflow: hidden; border-bottom: 1px solid var(--line); }
.art svg { display: block; width: 100%; height: 100%; transition: transform 0.6s var(--ease); }
a.game:hover .art svg { transform: scale(1.05); }
.art-sketch { background: radial-gradient(120% 100% at 30% 0%, #2a2f1a, #14160f 70%); }
.art-hangman { background: radial-gradient(120% 90% at 72% 0%, #2d2670, #18153c 45%, #0d0c1f); }

/* Sketch: a drawing that keeps drawing itself. */
.paper { fill: #fff; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5)); }
/* Each stroke has its own slot in a seven second loop, then everything fades and starts over.
   A stroke stays invisible until its slot: a round cap would otherwise show as a dot. */
.doodle > * { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: 7s linear infinite; }
.doodle > :nth-child(1) { animation-name: doodle-1; }
.doodle > :nth-child(2) { animation-name: doodle-2; }
.doodle > :nth-child(3) { animation-name: doodle-3; }
.doodle > :nth-child(4) { animation-name: doodle-4; }
.doodle > :nth-child(5) { animation-name: doodle-5; }
.doodle > :nth-child(6) { animation-name: doodle-6; }
@keyframes doodle-1 { 0% { stroke-dashoffset: 1; opacity: 1; } 10%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes doodle-2 { 0%, 9.9% { stroke-dashoffset: 1; opacity: 0; } 10% { stroke-dashoffset: 1; opacity: 1; } 18%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes doodle-3 { 0%, 17.9% { stroke-dashoffset: 1; opacity: 0; } 18% { stroke-dashoffset: 1; opacity: 1; } 34%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes doodle-4 { 0%, 33.9% { stroke-dashoffset: 1; opacity: 0; } 34% { stroke-dashoffset: 1; opacity: 1; } 44%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes doodle-5 { 0%, 43.9% { stroke-dashoffset: 1; opacity: 0; } 44% { stroke-dashoffset: 1; opacity: 1; } 54%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes doodle-6 { 0%, 53.9% { stroke-dashoffset: 1; opacity: 0; } 54% { stroke-dashoffset: 1; opacity: 1; } 66%, 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.pencil { animation: pencil 7s ease-in-out infinite; }
@keyframes pencil {
  0% { transform: translate(239px, 62px); } 10% { transform: translate(205px, 62px); } 18% { transform: translate(192px, 38px); }
  34% { transform: translate(92px, 142px); } 44% { transform: translate(162px, 98px); } 54% { transform: translate(132px, 142px); }
  66% { transform: translate(260px, 144px); } 80%, 100% { transform: translate(286px, 176px); }
}

/* Hangman: he sways, blinks and hopes for the best. */
.art-hangman .star { fill: #fff; animation: twinkle 2.6s ease-in-out infinite alternate; }
.art-hangman .star:nth-child(2n) { animation-delay: -1.2s; }
.art-hangman .wood { fill: none; stroke: url(#wood); stroke-width: 9; stroke-linecap: round; }
.art-hangman .wood.thin { stroke-width: 6; }
.dangle { transform-origin: 172px 34px; animation: sway 3.2s ease-in-out infinite alternate; }
.blink { transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; }
@keyframes twinkle { from { opacity: 0.15; } to { opacity: 0.9; } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(0.08); } }

/* Little speech bubbles that pop up over the art. */
.guess {
  position: absolute; padding: 5px 11px; border-radius: 99px; background: #fff; color: #17142e;
  font: 650 12.5px/1.2 var(--body); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
  opacity: 0; animation: guess 7s var(--ease) infinite;
}
.art-sketch .g1 { right: 7%; top: 44%; animation-delay: 2.6s; }
.art-sketch .g2 { left: 6%; top: 16%; animation-delay: 4.6s; background: var(--lime); color: #0b0d05; }
.art-hangman .g1 { right: 12%; top: 42%; animation-delay: 1s; }
.art-hangman .g2 { left: 8%; top: 56%; animation-delay: 4.2s; }
@keyframes guess { 0% { opacity: 0; transform: translateY(8px) scale(0.7); } 5%, 26% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateY(-6px); } }

.game-body { padding: 20px 22px 22px; display: grid; gap: 12px; flex: 1; align-content: start; }
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game h2 { font: 800 clamp(30px, 4vw, 38px)/1 var(--display); letter-spacing: -0.04em; }
.game h2::after { content: '.'; color: var(--accent); }
.game p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.live {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; white-space: nowrap;
  font: 550 12px/1 var(--mono); color: var(--accent); background: rgba(var(--glow), 0.12); border: 1px solid rgba(var(--glow), 0.25);
}
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--glow), 0.6); } 100% { box-shadow: 0 0 0 9px rgba(var(--glow), 0); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px;
  font: 500 12px/1 var(--mono); color: var(--muted); background: var(--surface); border: 1px solid var(--line);
}
.chips .icon { width: 13px; height: 13px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; margin-top: 6px;
  border-radius: 15px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
  background: var(--accent); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 30px -12px rgba(var(--glow), 0.7);
  transition: box-shadow 0.25s, filter 0.2s;
}
.btn .icon { width: 18px; height: 18px; transition: transform 0.3s var(--spring); }
a.game:hover .btn { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 40px -10px rgba(var(--glow), 0.85); }
a.game:hover .btn .icon { transform: translateX(5px); }

/* A slim strip under the games, where the next one will go. */
.game.soon {
  grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center;
  gap: 8px 16px; padding: 22px 24px;
  background: none; border-style: dashed; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.game.soon h2 { font-size: 20px; letter-spacing: -0.02em; color: var(--muted); }
.game.soon h2::after { content: none; }
.game.soon p { color: var(--faint); font-size: 14px; }
.soon-dots { display: flex; gap: 8px; }
.soon-dots i { width: 12px; height: 12px; border-radius: 4px; animation: hop 1.4s var(--ease) infinite; }
.soon-dots i:nth-child(1) { background: var(--lime); }
.soon-dots i:nth-child(2) { background: #4fd8ff; animation-delay: 0.15s; }
.soon-dots i:nth-child(3) { background: var(--pink); animation-delay: 0.3s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px) rotate(12deg); } }

.foot { color: var(--faint); font-size: 13.5px; text-align: center; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 680px) {
  .games { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .me { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .me-note { grid-column: 1 / -1; margin-top: 6px; }
  .avatar-picker { grid-row: auto; width: 60px; height: 60px; }
  .tagline br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .doodle > * { stroke-dashoffset: 0; }
}