:root {
  --bg: #0b1e2d;
  --card: #0f2b40;
  --text: #d8f0ff;
  --muted: #a9c7db;
  --accent: #ffd166;
  --danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #123a57, var(--bg));
  color: var(--text);
}
.site-header, .site-footer {
  text-align: center;
  padding: 1rem;
}
.site-header h1 { margin: 0.2rem 0; }
.site-header .tag { color: var(--muted); margin: 0.2rem 0 0.6rem; }
.site-header nav a { color: var(--accent); text-decoration: none; }
.container { max-width: 880px; margin: 0 auto; padding: 1rem; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.card.center { text-align: center; }

.form-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: end; }
.form-row label { grid-column: 1 / -1; color: var(--muted); }
input {
  padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: #0b2032; color: var(--text);
}
button, .button {
  padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
  color: #0b2032; background: var(--accent); font-weight: 700; cursor: pointer; text-decoration: none;
}
.error { color: var(--danger); font-weight: 700; }

.riddle .prompt { color: var(--muted); margin-bottom: 0.2rem; }
blockquote { background: rgba(0,0,0,0.25); border-left: 4px solid var(--accent); margin: 0; padding: 0.8rem; border-radius: 6px; }

.puzzle { margin: 1rem 0; }
.puzzle img { max-width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); filter: blur(10px) grayscale(0.3) brightness(0.8); transition: filter 300ms ease; }
.puzzle.solved img { filter: none; }
.puzzle figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }

.success { color: #06d6a0; font-weight: 700; }