/* ============================================================
   components.css — reusable neo-brutal components
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn-primary, .btn-start-game, .btn-next-level, .feedback-btn,
.quiz-next-btn, .claim-daily-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700;
  border: var(--bd); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--ink); background: var(--color-green);
  transition: transform var(--transition), box-shadow var(--transition);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.btn-primary { font-size: var(--text-xl); padding: var(--space-4) var(--space-8); background: var(--color-green); }
.btn-start-game { width: 100%; font-size: var(--text-lg); padding: var(--space-4); margin-top: var(--space-2); background: var(--color-green); }
.btn-next-level { font-size: var(--text-lg); padding: var(--space-3) var(--space-6); background: var(--color-blue); color: #fff; }
.feedback-btn { font-size: var(--text-base); padding: var(--space-2) var(--space-6); background: var(--color-blue); color: #fff; }
.quiz-next-btn { width: 100%; font-size: var(--text-base); padding: var(--space-3); background: var(--color-blue); color: #fff; margin-top: var(--space-4); }
.claim-daily-btn { display: block; margin: var(--space-4) auto 0; font-size: var(--text-base); padding: var(--space-3) var(--space-8); background: var(--color-yellow); }

.btn-primary:hover, .btn-start-game:hover, .btn-next-level:hover, .feedback-btn:hover,
.quiz-next-btn:hover, .claim-daily-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px); box-shadow: var(--shadow-lg);
}
.btn-primary:active, .btn-start-game:active, .btn-next-level:active, .feedback-btn:active,
.quiz-next-btn:active, .claim-daily-btn:active:not(:disabled) {
  transform: translate(3px, 3px); box-shadow: var(--shadow-press);
}
.claim-daily-btn:disabled { opacity: 0.55; cursor: default; background: var(--color-surface-3); box-shadow: var(--shadow-sm); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-surface); border: var(--bd); border-radius: var(--radius-md);
  color: var(--ink); font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-base); padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-secondary:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.btn-secondary:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }

/* Small square icon buttons (pause / sound) */
.icon-btn, .sound-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 6px;
  background: var(--color-surface); border: var(--bd-thin); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform var(--transition), box-shadow var(--transition);
}
.icon-btn:active, .sound-toggle-btn:active { transform: translate(2px,2px); box-shadow: none; }

.back-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: var(--bd-thin); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4); font-weight: 700; font-size: var(--text-sm);
  color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.back-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.back-btn .icon { width: 1.1em; height: 1.1em; }

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); }
.form-group input, .form-group select {
  width: 100%; background: var(--color-surface); color: var(--ink);
  border: var(--bd-thin); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-size: var(--text-base);
  box-shadow: var(--shadow-press);
  transition: box-shadow var(--transition), transform var(--transition);
}
.form-group input:focus, .form-group select:focus { outline: none; transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.avatar-picker { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-4); }
.avatar-opt {
  width: 52px; height: 52px; border: var(--bd-thin); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.avatar-opt .icon { width: 100%; height: 100%; }
.avatar-opt:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.avatar-opt.selected { border-color: var(--ink); box-shadow: var(--shadow-sm); background: var(--color-yellow); }

/* ---------------- HUD ---------------- */
.game-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border-bottom: var(--bd);
  position: sticky; top: 0; z-index: 100; flex-wrap: wrap;
}
.hud-block { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.hud-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.hud-score { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-lives { display: flex; gap: 2px; }
.hud-life { width: 18px; height: 18px; }
.hud-life.lost { filter: grayscale(1); opacity: 0.3; }
.hud-level-badge {
  background: var(--color-purple); color: #fff; border: var(--bd-thin);
  border-radius: var(--radius-sm); padding: 2px var(--space-3);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; box-shadow: var(--shadow-press);
}
.hud-timer { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }
.hud-timer.urgent { color: var(--color-red); animation: blink 0.5s steps(1) infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
.hud-streak { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 700; color: var(--color-orange); }
.hud-streak .icon { width: 18px; height: 18px; }
.streak-flame { animation: flame 0.5s ease-in-out infinite alternate; display: inline-flex; }
@keyframes flame { 0%{transform:rotate(-4deg)} 100%{transform:rotate(4deg) scale(1.08)} }
.xp-bar-wrap { flex: 1; min-width: 70px; background: var(--color-surface-3); border: var(--bd-thin); border-radius: var(--radius-full); height: 12px; overflow: hidden; }
.xp-bar { height: 100%; background: var(--color-green); transition: width 0.5s ease; }

/* ---------------- Bins ---------------- */
.bins-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); width: 100%; max-width: 640px; }
.bin-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border: var(--bd); border-radius: var(--radius-md); background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  position: relative;
}
.bin-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.bin-btn:active { transform: translate(2px,2px); box-shadow: var(--shadow-press); }
.bin-btn.bin-green:hover  { background: #E8F9EE; }
.bin-btn.bin-blue:hover   { background: #E7F0FE; }
.bin-btn.bin-yellow:hover { background: #FEF7DC; }
.bin-btn.bin-red:hover    { background: #FDECEC; }
.bin-icon { width: 40px; height: 40px; }
.bin-icon .icon, .nav-icon .icon, .hud-life .icon,
.icon-btn .icon, .sound-toggle-btn .icon { width: 100%; height: 100%; }
.bin-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.bin-sublabel { font-size: 9px; color: var(--color-text-muted); text-align: center; line-height: 1.2; }
.bin-correct-flash { animation: bin-flash 0.5s ease; }
@keyframes bin-flash { 0%{transform:scale(1)} 40%{transform:scale(1.08) translate(-2px,-2px)} 100%{transform:scale(1)} }
.bin-wrong-flash { animation: bin-shake 0.4s ease; }
@keyframes bin-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ---------------- Waste items (falling) ---------------- */
.falling-waste-stage {
  position: relative; width: 100%; max-width: 620px;
  height: clamp(160px, 34dvh, 260px);
  overflow: hidden; border: var(--bd); border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(0,0,0,0.03) 14px, rgba(0,0,0,0.03) 28px),
    var(--color-surface-2);
}
.waste-item {
  position: absolute; left: 0; top: -20%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 76px; padding: 6px;
  background: var(--color-surface); border: var(--bd); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); cursor: pointer; user-select: none;
  animation: fall-down linear forwards;
}
.waste-item .icon { width: 44px; height: 44px; }
.waste-item .item-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  margin-top: 3px; text-align: center; line-height: 1.05;
}
.waste-item.size-small  { width: 62px; }
.waste-item.size-small .icon { width: 32px; height: 32px; }
.waste-item.size-small .item-label { font-size: 8px; }
.waste-item.size-medium { width: 76px; }
.waste-item.size-large  { width: 92px; }
.waste-item.size-large .icon { width: 54px; height: 54px; }
/* percentage-based fall so it scales with any stage height */
@keyframes fall-down {
  0%   { top: -22%; opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 108%; opacity: 0; }
}

/* ---------------- Feedback popup ---------------- */
.feedback-popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0);
  z-index: 200; text-align: center; pointer-events: none;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  background: var(--color-surface); border: var(--bd); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-lg);
  width: min(90vw, 340px);
}
.feedback-popup.show { transform: translate(-50%,-50%) scale(1); pointer-events: auto; }
.feedback-emoji { display: inline-flex; margin-bottom: var(--space-2); }
.feedback-emoji .icon { width: 56px; height: 56px; }
.feedback-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-2); }
.feedback-title.correct { color: var(--color-green-dark); }
.feedback-title.wrong { color: var(--color-red-dark); }
.feedback-fact { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; margin: 0 auto var(--space-3); }
.feedback-fact .icon, .feedback-policy .icon { width: 1.05em; height: 1.05em; }
.feedback-policy {
  font-size: var(--text-xs); background: var(--color-surface-2); border: var(--bd-thin);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  line-height: 1.4; margin-bottom: var(--space-3);
}

/* ---------------- Score popup / combo ---------------- */
.score-popup {
  position: fixed; pointer-events: none; z-index: 300;
  font-family: var(--font-display); font-weight: 700;
  padding: 2px 8px; border: var(--bd-thin); border-radius: var(--radius-sm); background: var(--color-surface);
  box-shadow: var(--shadow-press);
  animation: score-float 1.5s ease forwards;
}
@keyframes score-float {
  0% { opacity: 1; transform: translateY(0) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(-80px) rotate(3deg); }
}
.combo-display {
  position: fixed; top: 84px; right: var(--space-4); z-index: 150;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  color: var(--ink); background: var(--color-orange); border: var(--bd); border-radius: var(--radius-md);
  padding: 2px var(--space-3); box-shadow: var(--shadow-sm);
  animation: combo-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none;
}
@keyframes combo-pop { 0%{transform:scale(0) rotate(-8deg)} 60%{transform:scale(1.15) rotate(4deg)} 100%{transform:scale(1)} }

.combo-burst-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.combo-burst-text {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 8vw, 46px);
  text-align: center; color: var(--ink); background: var(--color-yellow);
  border: var(--bd-thick); border-radius: var(--radius-md); padding: var(--space-2) var(--space-5);
  box-shadow: var(--shadow-lg);
  animation: burst-text 1.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
.combo-burst-sub { font-size: var(--text-sm); font-weight: 700; text-align: center; margin-top: var(--space-3); opacity: 0; animation: burst-sub-fade 1.3s ease forwards; }
@keyframes burst-text {
  0%{transform:scale(0.2) rotate(-6deg);opacity:0} 25%{transform:scale(1.15) rotate(3deg);opacity:1}
  80%{transform:scale(1) rotate(0);opacity:1} 100%{transform:scale(0.9);opacity:0}
}
@keyframes burst-sub-fade { 0%,20%{opacity:0;transform:translateY(6px)} 35%,75%{opacity:1;transform:translateY(0)} 100%{opacity:0} }
.combo-burst-particle { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: var(--bd-thin); animation: burst-particle 1.1s ease-out forwards; }
@keyframes burst-particle { 0%{transform:rotate(var(--angle)) translate(0) scale(1);opacity:1} 100%{transform:rotate(var(--angle)) translate(150px) scale(0.4);opacity:0} }

/* ---------------- Achievement toast ---------------- */
.achievement-toast {
  position: fixed; top: 16px; right: 16px; left: 16px; margin: 0 auto; max-width: 360px; z-index: 450;
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-yellow); border: var(--bd); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-lg);
  animation: toast-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.achievement-toast.hide { animation: toast-out 0.35s ease forwards; }
@keyframes toast-in { 0%{transform:translateY(-70px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes toast-out { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-70px);opacity:0} }
.ach-toast-icon { width: 34px; height: 34px; flex-shrink: 0; }
.ach-toast-title { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ach-toast-label { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; }

/* ---------------- Quiz options ---------------- */
.quiz-opt {
  display: block; width: 100%; text-align: left;
  background: var(--color-surface); border: var(--bd); border-radius: var(--radius-md);
  padding: var(--space-4); font-size: var(--text-base); font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.quiz-opt:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); background: var(--color-surface-2); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct { background: #E8F9EE; border-color: var(--color-green-dark); }
.quiz-opt.wrong { background: #FDECEC; border-color: var(--color-red-dark); }
.quiz-explanation {
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--color-surface-2); border: var(--bd-thin); border-left: var(--bd-thick);
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5;
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
}
.quiz-policy-tag, .policy-card-tag {
  display: inline-flex; align-items: center; background: var(--color-yellow); border: var(--bd-thin);
  border-radius: var(--radius-sm); padding: 2px var(--space-3); font-size: var(--text-xs); font-weight: 800;
}

/* ---------------- Badges ---------------- */
.badge-item2 {
  position: relative; background: var(--color-surface); border: var(--bd);
  border-radius: var(--radius-md); padding: var(--space-3); text-align: center; box-shadow: var(--shadow-sm);
}
.badge-item2.earned { background: var(--color-surface-2); }
.badge-item2.unearned { opacity: 0.55; }
.badge-item2-icon { width: 34px; height: 34px; margin: 0 auto var(--space-1); }
.badge-item2-icon .icon { width: 100%; height: 100%; }
.badge-item2-label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; margin-bottom: 2px; }
.badge-item2-desc { font-size: 10px; color: var(--color-text-muted); line-height: 1.3; }
.badge-check, .badge-lock { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; }
.badge-item { display: inline-flex; align-items: center; gap: 4px; background: var(--color-surface); border: var(--bd-thin); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 700; box-shadow: var(--shadow-press); }
.badge-item .icon { width: 16px; height: 16px; }
.badge-item.earned { background: var(--color-yellow); }
.badge-item.unearned { opacity: 0.45; }

/* ---------------- Bottom nav ---------------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--color-surface); border-top: var(--bd);
  display: flex; padding-bottom: env(safe-area-inset-bottom); height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--space-1); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-muted); border-right: var(--bd-thin);
}
.nav-btn:last-child { border-right: none; }
.nav-icon { width: 24px; height: 24px; }
.nav-btn.active { color: var(--ink); background: var(--color-green); }
.nav-btn:active { transform: translateY(1px); }

/* ---------------- Confetti / particles ---------------- */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
.confetti-piece { position: absolute; width: 10px; height: 10px; border: var(--bd-thin); animation: confetti-fall linear forwards; }
@keyframes confetti-fall { 0%{transform:translateY(-20px) rotate(0);opacity:1} 100%{transform:translateY(102vh) rotate(720deg);opacity:0} }
.floating-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: 8px; height: 8px; border: var(--bd-thin); animation: float-up linear infinite; }
@keyframes float-up { 0%{transform:translateY(100dvh) rotate(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-15dvh) rotate(540deg);opacity:0} }

/* ---------------- Progress bars ---------------- */
.policy-progress-bar { width: 100%; background: var(--color-surface); border: var(--bd-thin); border-radius: var(--radius-full); height: 12px; overflow: hidden; }
.policy-progress-fill { height: 100%; background: var(--color-green); transition: width 0.8s ease; }