@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Fredoka:wght@500;600;700&display=swap');

/* Cartoon theme: thick ink outlines, hard offset shadows, flat bright colours, bouncy motion. */
:root {
  --ink: #1b1035;
  --bg1: #5b2bd6; --bg2: #2a0f6e;
  --pink: #ff4fa0; --yellow: #ffd93b; --cyan: #3de0ff;
  --green: #6ef06a; --purple: #a46bff; --orange: #ff9a3d;
  --display: 'Luckiest Guy', 'Chalkboard SE', 'Comic Sans MS', 'Comic Neue', Impact, sans-serif;
  --body: 'Fredoka', 'Chalkboard SE', 'Comic Sans MS', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--body); color: #fff; font-weight: 600;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,79,160,.55), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.07) 0deg 7deg, transparent 7deg 18deg),
    linear-gradient(170deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
}
/* halftone comic dots */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(var(--ink) 22%, transparent 24%); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent 40%, #000 100%); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 100%);
}
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.layer { position: relative; z-index: 1; height: 100%; }

/* chunky outlined lettering */
h1, h2, h3, .display {
  font-family: var(--display); font-weight: 400; letter-spacing: .03em; margin: 0;
  -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--ink);
}
.glow-text { color: var(--yellow); }

.btn {
  font-family: var(--display); font-size: 1.25rem; color: var(--ink); background: var(--yellow);
  border: 4px solid var(--ink); border-radius: 22px; padding: 12px 26px; cursor: pointer;
  box-shadow: 0 7px 0 var(--ink); transform: rotate(-1deg);
  transition: transform .1s, box-shadow .1s; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .04em;
}
.btn:hover { transform: rotate(1deg) scale(1.05); }
.btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--ink); }
.btn.pink { background: var(--pink); color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.btn.cyan { background: var(--cyan); }
.btn.ghost { background: #fff; color: var(--ink); }
.btn:disabled { opacity: .45; pointer-events: none; filter: grayscale(.6); }

@keyframes popIn { 0% { transform: scale(.2) rotate(-12deg); opacity: 0 } 55% { transform: scale(1.22) rotate(4deg); opacity: 1 } 75% { transform: scale(.94) rotate(-2deg) } 100% { transform: scale(1) rotate(0) } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-12px) rotate(1.5deg) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@keyframes wobble { 0%,100% { transform: rotate(-2.5deg) } 50% { transform: rotate(2.5deg) } }
@keyframes shake { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-14px) rotate(-1deg) } 40% { transform: translateX(14px) rotate(1deg) } 60% { transform: translateX(-8px) } 80% { transform: translateX(8px) } }
@keyframes slideUp { from { transform: translateY(40px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes emojiUp { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 0 } 15% { opacity: 1; transform: translate(0,-30px) scale(1.3) rotate(10deg) } 100% { transform: translate(var(--dx), -34vh) scale(1) rotate(var(--rot)); opacity: 0 } }

/* Generated cartoon avatars: sized from the surrounding font so they fit wherever the emoji used to. */
.avimg { width: 1.25em; height: 1.25em; object-fit: contain; display: inline-block; vertical-align: middle; pointer-events: none; }

/* Build tag (public/version.js): which version is live. Faint and out of the way. */
.build-tag { position: fixed; bottom: 4px; left: 8px; z-index: 40; pointer-events: none; font-family: var(--body); font-size: max(10px, .55vw); color: #fff; opacity: .4; letter-spacing: .02em; }