:root {
  --bg1: #2b1055; --bg2: #7597de; --ink: #fff; --muted: rgba(255,255,255,.72);
  --card: rgba(255,255,255,.12); --card-b: rgba(255,255,255,.22);
  --o0: #e63946; --o1: #1d6fe0; --o2: #e9a400; --o3: #0e9f6e;
  --good: #06d6a0; --bad: #ff4d6d; --gold: #ffd166; --silver: #d9e2ec; --bronze: #e29b6b;
  --radius: 18px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; color: var(--ink); }
body {
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  background: radial-gradient(1200px 800px at 10% -10%, #8e2de2 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 110%, #ff4d6d 0%, transparent 55%),
              linear-gradient(135deg, #1a0b3d, #2b1055 45%, #3a1c71);
  background-attachment: fixed;
}
body::before { /* floating bubbles */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.15) 0 2px, transparent 3px),
                    radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 2px, transparent 3px),
                    radial-gradient(circle at 40% 80%, rgba(255,255,255,.1) 0 3px, transparent 4px);
  background-size: 180px 180px, 240px 240px, 300px 300px;
  animation: drift 40s linear infinite;
}
@keyframes drift { to { background-position: 0 -1800px, 0 -2400px, 0 -3000px; } }
button { font: inherit; cursor: pointer; border: 0; color: inherit; }
input { font: inherit; }
.hidden { display: none !important; }

.logo { font-weight: 900; letter-spacing: -.02em; line-height: .95; margin: 0; }
.logo span { display: inline-block; background: linear-gradient(90deg, #ffd166, #ff4d6d, #c77dff, #3a86ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-b); font-weight: 700; font-size: .85rem; }
.card { background: var(--card); border: 1px solid var(--card-b); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.btn { padding: 14px 26px; border-radius: 14px; font-weight: 800; font-size: 1.05rem; background: #fff; color: #2b1055; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, opacity .2s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.go { background: linear-gradient(180deg, #2ee6a8, #06b383); color: #06281c; }
.btn.ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.btn.small { padding: 8px 14px; font-size: .9rem; border-radius: 10px; }
.btn.big { padding: 20px 40px; font-size: 1.4rem; border-radius: 18px; }

.o0 { background: var(--o0); } .o1 { background: var(--o1); } .o2 { background: var(--o2); } .o3 { background: var(--o3); }

.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.slide-up { animation: slideUp .5s cubic-bezier(.2,1,.3,1) both; }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.shake { animation: shake .5s; }
@keyframes shake { 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }
.bounce { animation: bounce 1.4s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-10px); } }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: #fff2; border: 3px solid currentColor; flex: none; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }

/* timer bar */
.tbar { height: 12px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.tbar > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #06d6a0, #ffd166); border-radius: inherit; transform-origin: left; }
.tbar.low > i { background: linear-gradient(90deg, #ff4d6d, #ff9f1c); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #000c; padding: 12px 18px; border-radius: 12px; font-weight: 700; z-index: 1000; max-width: 90vw; text-align: center; }