*{padding:0;margin:0;box-sizing:border-box}html{font-size:62.5%}body{font-family:Arial;font-size:1.6rem}button{letter-spacing:.1rem;outline:none;border:none;cursor:pointer;transition:background-color .5s,color .5s}button:active{transform:translateY(1.5px);transition:background-color .5s,color .5s}.App{display:flex;width:100vw;min-height:100vh;max-width:100%}.gameRules{width:25vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;border-right:.3rem solid #f15930;background:#f3b98e}.logoTitle{font-family:Anton,sans-serif;font-weight:400;font-size:7.5rem;min-height:20vh;width:100%;text-align:center;line-height:1;padding:1rem 0;gap:.5rem}.title{text-shadow:.2rem 0 0 rgb(255,255,255),.2rem 0 0 rgb(255,255,255),0 .2rem 0 rgb(255,255,255),0 -.2rem 0 rgb(255,255,255),.1rem .1rem rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem .1rem 0 rgb(255,255,255)}.letterM{color:#f15930}.letterB{color:#2858a1}.subtitle{font-size:3rem;font-family:Roboto Condensed,sans-serif;font-weight:800;text-align:center}.ref{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.6rem;font-weight:700;text-align:center;min-height:27vh;width:100%;padding:1rem 0}.children{width:5rem;height:5rem;margin-bottom:1rem}.ref p,.rules p{margin-bottom:1.5rem}.rules{min-height:53vh;display:flex;flex-direction:column;width:100%;padding:1rem;gap:1rem}.rules span{font-weight:700}.rules p:last-child{margin-bottom:0}.rules a{display:block;text-decoration:none}.start-msg{text-align:center;color:#2858a1;font-size:2.5rem;font-weight:700;margin-top:2rem}.players{margin-bottom:2rem!important}.separator{background:#2858a1;height:.3rem;width:70%}footer{text-align:center;margin-top:auto}footer a{color:#000;font-size:1.5rem}.titleAndBoard{position:relative;display:flex;flex-direction:column;align-items:center;width:75vw;min-height:100vh;max-width:100%;background:url(/assets/kidsroom-nfdUwhwp.jpg) no-repeat center / cover}.titleDiv,.boardAndButton{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.titleDiv{min-height:15vh}h1{font-size:6.5rem;font-family:Oleo Script,cursive;font-weight:700;color:#f15930;text-align:center;text-shadow:.2rem 0 0 rgb(255,255,255),-.2rem 0 0 rgb(255,255,255),0 .2rem 0 rgb(255,255,255),0 -.2rem 0 rgb(255,255,255),.1rem .1rem rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem .1rem 0 rgb(255,255,255)}.boardAndButton{min-height:85vh}.mode-selector{display:flex;gap:2rem;margin-bottom:1rem}.mode-selector button{background-color:teal;color:#fff;font-size:1.6rem;font-weight:700;border-radius:.5rem;height:40px;width:145px}.mode-selector button:hover{background-color:#2858a1;font-weight:400}.message{font-family:Oleo Script,cursive;font-weight:400;color:#f15930;text-align:center;font-size:3.5rem;margin:1rem auto 2rem;line-height:1;max-width:100%;text-shadow:.2rem 0 0 rgb(255,255,255),-.2rem 0 0 rgb(255,255,255),0 .2rem 0 rgb(255,255,255),0 -.2rem 0 rgb(255,255,255),.1rem .1rem rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem .1rem 0 rgb(255,255,255)}.animated-text{animation:2s message ease infinite}@keyframes message{0%{color:#fff;transform:scale(0);opacity:0;text-shadow:.2rem 0 0 #f15930,-.2rem 0 0 #f15930,0 .2rem 0 #f15930,0 -.2rem 0 #f15930,.1rem .1rem #f15930,-.1rem -.1rem 0 #f15930,-.1rem -.1rem 0 #f15930,-.1rem .1rem 0 #f15930}25%{color:#f15930;transform:scale(1.2);opacity:1;text-shadow:.2rem 0 0 rgb(255,255,255),-.2rem 0 0 rgb(255,255,255),0 .2rem 0 rgb(255,255,255),0 -.2rem 0 rgb(255,255,255),.1rem .1rem rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem -.1rem 0 rgb(255,255,255),-.1rem .1rem 0 rgb(255,255,255)}50%{color:#fff;transform:scale(1);opacity:1;text-shadow:.2rem 0 0 #f15930,-.2rem 0 0 #f15930,0 .2rem 0 #f15930,0 -.2rem 0 #f15930,.1rem .1rem #f15930,-.1rem -.1rem 0 #f15930,-.1rem -.1rem 0 #f15930,-.1rem .1rem 0 #f15930}75%{transform:scale(1.2);opacity:1;text-shadow:2px 0 0 #f15930,-2px 0 0 #f15930,0 2px 0 #f15930,0 -2px 0 #f15930,1px 1px #f15930,-1px -1px 0 #f15930,1px -1px 0 #f15930,-1px 1px 0 #f15930}to{color:#fff;transform:scale(0);opacity:0;text-shadow:.2rem 0 0 #f15930,-.2rem 0 0 #f15930,0 .2rem 0 #f15930,0 -.2rem 0 #f15930,.1rem .1rem #f15930,-.1rem -.1rem 0 #f15930,-.1rem -.1rem 0 #f15930,-.1rem .1rem 0 #f15930}}table{border-spacing:0}.cell{position:relative;height:7rem;width:7rem;background-color:#2858a1;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;opacity:.9;border:1px solid #1e3a66}.white,.red,.yellow{height:6rem;width:6rem;border-radius:50%}.white{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;background-color:#fff;z-index:1}.red{background-color:#f15930;transition:background-color .5s;z-index:5}.yellow{background-color:gold;transition:background-color .5s;z-index:5}.drop{animation:drop .5s ease-out;z-index:5}@keyframes drop{0%{transform:translateY(-500px);opacity:0}to{transform:translateY(0);opacity:1}}.orange{background-color:#ff9800!important;border:3px solid white;box-shadow:0 0 20px #ff9800;transform:scale(1.1);z-index:10;animation:win-pulse .8s infinite alternate}@keyframes win-pulse{0%{transform:scale(1.05);box-shadow:0 0 10px #ff9800}to{transform:scale(1.1);box-shadow:0 0 25px #ffcc80}}table:has(.orange) .cell:not(:has(.orange)){opacity:.6;filter:grayscale(30%)}.btn-group{display:flex;justify-content:center;align-items:center;gap:5rem;margin:2rem auto 1rem}.reset-btn{background-color:#f15930;color:#fff;letter-spacing:.1rem;height:45px;width:130px;font-weight:700;font-size:2rem;border-radius:.5rem}.reset-btn:hover{background-color:orange;color:#000;font-weight:400}.token-sound-btn{background-color:teal;color:#fff;letter-spacing:.1rem;font-weight:700;height:45px;border-radius:.5rem;padding:1rem 1.5rem;font-size:1.6rem;cursor:pointer}.token-sound-btn:hover{background-color:#2858a1}#toggle{position:absolute;top:15px;left:10px;cursor:pointer}#toggle-music{width:64px;height:64px}figcaption{font-size:1.6rem;font-weight:bolder;color:#2858a1}@media only screen and (max-width:992px){.App{flex-direction:column}.gameRules,.titleAndBoard{width:100vw}.gameRules{border-right:none}h1{font-size:5rem}.message{max-width:80%;font-size:3rem}.cell{height:5.5rem;width:5.5rem}.white,.red,.yellow{width:4.5rem;height:4.5rem}.btn-group{gap:3rem}}@media only screen and (max-width:500px){.btn-group{flex-direction:column;gap:2rem}.reset-btn,.token-sound-btn{height:45px}}@media only screen and (max-width:400px){.rules p{margin-bottom:.5rem}.cell{height:4.5rem;width:4.5rem}.white,.red,.yellow{width:3.5rem;height:3.5rem}.message{font-size:2.8rem}.btn-group{gap:3rem}}@media only screen and (max-width:320px){.cell{height:4.2rem;width:4.2rem}.white,.red,.yellow{width:3.2rem;height:3.2rem}.message{font-size:2.5rem}.btn-group{gap:1.5rem}#toggle{top:10px}#toggle-music{width:54px;height:54px}}