@font-face { font-family: 'Lilita'; src: url('/vendor/fonts/lilita.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-weight: 400; src: url('/vendor/fonts/fredoka-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-weight: 600; src: url('/vendor/fonts/fredoka-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Fredoka'; font-weight: 700; src: url('/vendor/fonts/fredoka-700.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #150833; --bg2: #24104f; --panel: #2c1562; --panel2: #3a1d7d; --line: #5a3aa8;
  --ink: #fff; --dim: #c5b5ef; --mute: #8f7cc4;
  --yellow: #ffe14d; --pink: #ff3d81; --cyan: #3de8ff; --green: #3dff9a; --orange: #ff9f1c; --purple: #b388ff; --red: #ff4b4b;
  --dark: #0c0420;
  --display: 'Lilita', 'Fredoka', system-ui, sans-serif;
  --body: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body); color: var(--ink); background: var(--bg);
  background-image: radial-gradient(1200px 700px at 12% -10%, #5a1fa8 0%, transparent 60%), radial-gradient(900px 600px at 100% 110%, #a3175f 0%, transparent 55%), radial-gradient(700px 500px at 90% 0%, #123a8a 0%, transparent 60%);
  background-attachment: fixed; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: .02em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--display); font-size: 1.1rem; letter-spacing: .03em;
  padding: .7em 1.2em; border-radius: 16px; color: var(--dark); background: var(--yellow);
  box-shadow: 0 6px 0 #b8960a, 0 10px 18px rgba(0,0,0,.35);
  transition: transform .08s, box-shadow .08s, filter .15s; user-select: none;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #b8960a, 0 3px 6px rgba(0,0,0,.35); }
.btn:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }
.btn.pink { background: var(--pink); color: #fff; box-shadow: 0 6px 0 #a3134a, 0 10px 18px rgba(0,0,0,.35); }
.btn.pink:active { box-shadow: 0 1px 0 #a3134a; }
.btn.cyan { background: var(--cyan); box-shadow: 0 6px 0 #1295a8, 0 10px 18px rgba(0,0,0,.35); }
.btn.cyan:active { box-shadow: 0 1px 0 #1295a8; }
.btn.green { background: var(--green); box-shadow: 0 6px 0 #14a35a, 0 10px 18px rgba(0,0,0,.35); }
.btn.green:active { box-shadow: 0 1px 0 #14a35a; }
.btn.ghost { background: var(--panel2); color: #fff; box-shadow: 0 6px 0 #1c0b45, 0 10px 18px rgba(0,0,0,.3); }
.btn.ghost:active { box-shadow: 0 1px 0 #1c0b45; }
.btn.red { background: var(--red); color: #fff; box-shadow: 0 6px 0 #9c1f1f, 0 10px 18px rgba(0,0,0,.35); }
.btn.red:active { box-shadow: 0 1px 0 #9c1f1f; }
.btn.small { font-size: .9rem; padding: .45em .8em; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.45); }
.btn.small:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.btn.big { font-size: 1.5rem; padding: .8em 1.4em; border-radius: 22px; }
.btn.block { display: flex; width: 100%; }

.avatar {
  --c: var(--purple); --s: 48px;
  width: var(--s); height: var(--s); border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: calc(var(--s) * .56); line-height: 1;
  background: var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.4);
}
.avatar.off { filter: grayscale(1) brightness(.6); }

.pill { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border-radius: 99px; background: var(--panel2); font-weight: 600; font-size: .85em; white-space: nowrap; }
.pill.yellow { background: var(--yellow); color: var(--dark); }
.pill.pink { background: var(--pink); }
.pill.red { background: var(--red); }
.pill.green { background: var(--green); color: var(--dark); }
.pill.cyan { background: var(--cyan); color: var(--dark); }

.logo { font-family: var(--display); line-height: .9; color: var(--yellow); text-shadow: 0 .06em 0 #b8960a, 0 .12em 0 #6a1456, 0 .2em .25em rgba(0,0,0,.5); letter-spacing: .04em; }
.logo small { display: block; font-family: var(--body); font-weight: 600; font-size: .2em; letter-spacing: .08em; color: #fff; text-shadow: none; margin-top: .8em; }

.plus { color: var(--green); } .minus { color: var(--red); }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-7px); } 80% { transform: translateX(7px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pop { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.rise { animation: rise .4s ease-out both; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.offline { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 100; background: var(--red); padding: .4em 1em; border-radius: 99px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.5); }