:root {
  --coral: #FF6F91;
  --coral-dark: #d1436a;
  --sun: #FFD23F;
  --sun-dark: #d1a800;
  --aqua: rgba(0,180,216,0.88);
  --navy: #012A4A;
  --deep: #004E92;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  min-height: 100vh;
  background: linear-gradient(180deg, #00C2FF 0%, #0086cf 45%, #004E92 100%);
  color: #fff;
  overflow-x: hidden;
}

/* ---- rising bubbles ---- */
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bubble {
  position: absolute; bottom: -60px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translateY(-112vh) scale(1.15); opacity: 0; }
}

#root { position: relative; z-index: 1; }

/* ---- title ---- */
.baby-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: 1;
  letter-spacing: 1px; color: #fff;
  text-shadow: 0 0 18px rgba(255,255,255,0.55), 0 4px 0 #004E92, 0 6px 12px rgba(0,0,0,0.25);
}
.tagline { color: rgba(255,255,255,0.95); text-shadow: 0 2px 6px rgba(0,0,0,0.3); font-weight: 600; }
.shark-logo { font-size: clamp(2.6rem, 8vw, 4rem); animation: swim 2.4s ease-in-out infinite; }
@keyframes swim {
  0%,100% { transform: translateX(-16px) rotate(-8deg); }
  50%     { transform: translateX(16px) rotate(8deg); }
}

/* ---- cards ---- */
.card {
  background: var(--aqua);
  box-shadow: 0 12px 34px rgba(0,40,80,0.35);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255,255,255,0.28);
}
.wave-top { position: relative; }
.section-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 14px rgba(255,255,255,0.3);
}

.step {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,0.9); border-radius: 14px; padding: 12px 14px;
}

/* ---- buttons ---- */
.btn {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; border: none; cursor: pointer;
  border-radius: 999px; transition: .15s; color: #fff; padding: 12px 26px;
}
.btn.coral { background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }
.btn.coral:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 var(--coral-dark), 0 0 22px rgba(255,111,145,0.6); }
.btn.coral:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-dark); }
.btn.sun { background: var(--sun); color: var(--navy); box-shadow: 0 6px 0 var(--sun-dark); }
.btn.sun:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 var(--sun-dark), 0 0 22px rgba(255,210,63,0.7); }
.btn.sun:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--sun-dark); }
.btn.ghost { background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.5); box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,0.28); }
.btn:disabled { background: #7c94a6; box-shadow: 0 6px 0 #566d7d; cursor: not-allowed; opacity: .75; transform: none; }
.bigbtn { display: inline-block; width: 100%; max-width: 560px; font-size: 1.4rem; padding: 20px; }

/* ---- drop zone ---- */
.drop-zone {
  border: 3px dashed rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.08);
  transition: all .2s ease;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--sun);
  background: rgba(255,255,255,0.2);
  transform: scale(1.01);
}

/* ---- aquarium frame ---- */
.aquarium {
  border: 6px solid rgba(255,255,255,0.35);
  border-radius: 18px; overflow: hidden;
  background: #001b33;
  box-shadow: inset 0 0 30px rgba(0,60,120,0.6);
}
.aquarium video { display: block; width: 100%; }

/* ---- effect cards ---- */
.fx {
  background: rgba(255,255,255,0.92); color: var(--navy);
  border: 3px solid transparent; cursor: pointer; transition: .15s; position: relative;
}
.fx:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
.fx.active { box-shadow: 0 0 24px rgba(255,210,63,0.9); animation: bob .6s ease; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fx .name { font-weight: 800; }
.fx .desc { font-size: .78rem; line-height: 1.25; color: #024; }
.fx .pitch {
  font-size: .72rem; font-weight: 800; border-radius: 9px;
  padding: 3px 8px; display: inline-block;
}
.fx .check {
  position: absolute; top: -10px; right: -8px; background: var(--sun); color: var(--navy);
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* ---- power pills ---- */
.pill {
  flex: 1; min-width: 84px; padding: 16px; border-radius: 999px;
  border: 3px solid #fff; background: transparent; color: #fff;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.4rem; cursor: pointer; transition: .15s;
}
.pill:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.pill.active {
  background: #fff; color: var(--navy);
  box-shadow: 0 0 20px rgba(255,255,255,0.85);
}

/* ---- progress ---- */
.progwrap {
  background: rgba(255,255,255,0.85); border-radius: 14px; height: 38px;
  overflow: hidden; position: relative;
}
.progbar {
  height: 100%; background: linear-gradient(90deg, var(--coral), var(--sun));
  transition: width .25s ease; display: flex; align-items: center; justify-content: flex-end;
  min-width: 40px;
}
.fin { font-size: 1.7rem; margin-right: 4px; animation: fin-swim .8s ease-in-out infinite; }
@keyframes fin-swim { 0%,100% { transform: translateY(-2px) rotate(-6deg); } 50% { transform: translateY(2px) rotate(6deg); } }

/* ---- meta chips ---- */
.meta { display: flex; gap: 12px; flex-wrap: wrap; }
.meta span {
  background: rgba(255,255,255,0.9); color: var(--navy);
  border-radius: 10px; padding: 8px 14px; font-weight: 800; font-size: .9rem;
}

/* ---- fade in ---- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeInUp .6s ease-out forwards; }
.fade-in-delay-1 { animation-delay: .1s; opacity: 0; }

/* ---- confetti bubbles on result ---- */
.confetti-bubbles { position: relative; height: 0; }

.hidden { display: none; }

/* scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); border-radius: 4px; }