:root {
  --bg: #0f1020;
  --card: #1a1b2e;
  --text: #eaeaf7;
  --muted: #b8bad4;
  --accent: #7c5cff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(1200px 800px at 10% -10%, #191a2e, #0f1020); color: var(--text); }
.container { max-width: 900px; margin: 0 auto; padding: 24px 16px 56px; }

.hero { text-align: center; margin: 24px 0 12px; }
.badge { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), #ff5da2); color: #fff; font-weight: 800; margin-bottom: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.subtitle { color: var(--muted); }

.section { margin: 20px 0; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.btn { padding: 10px 14px; border: 0; border-radius: 10px; background: #2a2b45; color: var(--text); cursor: pointer; transition: transform .08s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #ff5da2); color: #fff; }

.wish-box { min-height: 48px; display: flex; align-items: center; padding: 12px; border-radius: 12px; background: #141426; border: 1px solid #2a2b45; font-size: 18px; }

.footer { text-align: center; margin-top: 28px; color: var(--muted); }

#confetti { position: fixed; inset: 0; pointer-events: none; }

.progress-wrap { display: grid; gap: 8px; margin-top: 8px; }
.progress { height: 10px; background: #1b1c30; border: 1px solid #2a2b45; border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; background: linear-gradient(90deg, #30d158, #ffd166); width: 0%; transition: width .4s ease; }
.clock { color: var(--muted); font-size: 14px; }

.party .section, .party .wish-box { box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset; animation: hue 8s linear infinite; }
.party body, body.party { background: radial-gradient(1200px 800px at 10% -10%, #2a1a3a, #101025); }
@keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* Historia życzeń */
.history-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.history-list li { padding: 10px 12px; border-radius: 10px; background: #141426; border: 1px solid #2a2b45; color: var(--text); font-size: 15px; }

/* Motyw jasny */
body.light { background: radial-gradient(1200px 800px at 10% -10%, #ffffff, #e9ecff); color: #141426; }
body.light .section { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); }
body.light .btn { background: #eef0ff; color: #141426; }
body.light .wish-box, body.light .history-list li { background: #ffffff; border-color: #d7daf0; color: #141426; }
body.light .progress { background: #e7e9fb; border-color: #d7daf0; }

/* Flappy Bird */
#flappy { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 2/3; margin: 0 auto; background: linear-gradient(#5ad7ff, #e0f7ff); border: 1px solid #2a2b45; border-radius: 12px; }