@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap');

:root {
  --c-bg:          #fff9f0;
  --c-surface:     #ffffff;
  --c-border:      #e8ddd0;
  --c-text:        #2d1f0e;
  --c-muted:       #8a7060;
  --c-accent:      #ff6b35;
  --c-teal:        #4ecdc4;
  --c-success:     #52b788;
  --c-danger:      #e63946;
  --font-display:  'Fredoka One', cursive;
  --font-body:     'Nunito', sans-serif;
  --transition:    0.22s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: var(--font-body); background: var(--c-bg); color: var(--c-text); min-height: 100vh; overflow-x: hidden; }
button { font-family: var(--font-body); cursor: pointer; border: none; outline: none; transition: var(--transition); }
button:active { transform: scale(0.96); }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }

/* Burbujas de fondo */
.bg-bubbles { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.bubble { position:absolute;border-radius:50%;opacity:.15;animation:floatUp linear infinite; }
.bubble:nth-child(1){width:60px;height:60px;left:8%; background:var(--c-accent);  animation-duration:13s;animation-delay:0s;}
.bubble:nth-child(2){width:40px;height:40px;left:22%;background:var(--c-teal);   animation-duration:9s; animation-delay:2s;}
.bubble:nth-child(3){width:75px;height:75px;left:38%;background:#ffe66d;          animation-duration:16s;animation-delay:1s;}
.bubble:nth-child(4){width:50px;height:50px;left:58%;background:#9b5de5;          animation-duration:11s;animation-delay:3s;}
.bubble:nth-child(5){width:35px;height:35px;left:72%;background:var(--c-accent);  animation-duration:8s; animation-delay:.5s;}
.bubble:nth-child(6){width:65px;height:65px;left:86%;background:var(--c-teal);   animation-duration:14s;animation-delay:4s;}
.bubble:nth-child(7){width:45px;height:45px;left:4%; background:#a8e6cf;          animation-duration:10s;animation-delay:1.5s;}
.bubble:nth-child(8){width:55px;height:55px;left:50%;background:var(--c-accent);  animation-duration:12s;animation-delay:2.5s;}

@keyframes floatUp {
  0%   { transform:translateY(110vh); opacity:0; }
  10%  { opacity:.15; }
  90%  { opacity:.15; }
  100% { transform:translateY(-20vh); opacity:0; }
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn   { from{opacity:0;}to{opacity:1;} }
@keyframes popIn    { 0%{opacity:0;transform:scale(.75);}70%{transform:scale(1.06);}100%{opacity:1;transform:scale(1);} }
@keyframes shake    { 0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);} }
@keyframes matchBurst { 0%{transform:scale(1);}45%{transform:scale(1.2);}100%{transform:scale(1);} }
@keyframes confettiFall { 0%{transform:translateY(-10px) rotate(0);opacity:1;}100%{transform:translateY(110px) rotate(720deg);opacity:0;} }
@keyframes floatEmoji  { 0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(3deg);} }