@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap";:root{--wood-light:#a16a3f;--wood-dark:#6d411f;--wood-border:#4a2b14;--text-light:#ffeeb8;--primary-btn:#4caf50;--primary-btn-border:#2e7d32;--bg-color:#e8f5e9;--key-color:#efe6d5;--key-border:#cbb99e;--key-active:#4caf50;--key-error:#f44336}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);-webkit-user-select:none;user-select:none;height:100vh;font-family:Fredoka One,cursive;overflow:hidden}h1,h2,h3,h4,h5,h6{letter-spacing:1px}button{cursor:pointer;background-color:var(--primary-btn);color:#fff;box-shadow:0 6px 0 var(--primary-btn-border), 0 8px 10px #0003;text-transform:uppercase;border:none;border-radius:12px;padding:12px 24px;font-family:Fredoka One,cursive;font-size:1.2rem;transition:transform .1s}button:active{box-shadow:0 2px 0 var(--primary-btn-border), 0 4px 5px #0003;transform:translateY(4px)}.app-container{background-image:url(/jungle_bg.png);background-position:bottom;background-size:cover;flex-direction:column;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffd9;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.wood-board{background:linear-gradient(180deg, var(--wood-light) 0%, var(--wood-dark) 100%);border:4px solid var(--wood-border);color:#fff;box-shadow:0 6px 0 var(--wood-border), inset 0 2px 5px #fff3;text-shadow:2px 2px #00000080;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:15px 25px;display:flex}.header-boards{z-index:50;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:20px;left:20px;right:20px}.score-board{align-items:flex-start;padding:15px 30px;font-size:1.5rem}.score-board .score-val{color:#ffd54f;font-size:2rem}.level-board{flex-direction:row;align-items:center;gap:15px;font-size:1.2rem}.level-progress-bar{background:var(--wood-border);border:2px solid #333;border-radius:10px;width:150px;height:20px;position:relative;overflow:hidden}.level-progress-fill{background:#4caf50;height:100%;transition:width .3s}.game-area{flex-grow:1;position:relative;overflow:hidden}.floating-word{color:#fff;text-shadow:3px 3px #ff9800,-1px -1px #ff9800,1px -1px #ff9800,-1px 1px #ff9800,1px 1px #ff9800;border-radius:15px;padding:5px 15px;font-family:Fredoka One,cursive;font-size:2.5rem;font-weight:700;transition:top .1s linear,transform .1s;position:absolute}.floating-word .typed{color:#9c27b0;text-shadow:2px 2px #fff,-1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff}.floating-word.active-target{z-index:10;transform:scale(1.2)}.monkeys-container{z-index:20;justify-content:center;align-items:flex-end;gap:20px;width:100%;padding-bottom:20px;display:flex;position:absolute;bottom:0;left:0}.monkey{font-size:5rem;line-height:1;transition:transform .2s}.monkey.idle{transform:scale(1)}.monkey.happy{animation:.5s ease-in-out bounceMonkey}.monkey.sad{filter:grayscale(.8);animation:.5s ease-in-out shakeMonkey}@keyframes bounceMonkey{0%,to{transform:scale(1.2)translateY(-20px)}50%{transform:scale(1.2)translateY(0)}}@keyframes shakeMonkey{0%,to{transform:rotate(0)translateY(20px)}25%{transform:rotate(-20deg)translateY(20px)}75%{transform:rotate(20deg)translateY(20px)}}.level-up-alert{color:#ffeb3b;text-shadow:0 0 20px #ff9800,4px 4px #e65100;z-index:1000;pointer-events:none;text-align:center;font-size:4rem;animation:2s ease-out forwards explode;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes explode{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.2)}30%{opacity:1;transform:translate(-50%,-50%)scale(1)}80%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.keyboard-area-wrapper{z-index:50;flex-direction:column;flex-shrink:0;align-items:center;width:100%;padding-bottom:20px;display:flex}.keyboard-board{background:var(--wood-dark);border:6px solid var(--wood-border);box-shadow:0 10px 0 var(--wood-border), 0 15px 20px #00000080;border-radius:20px;margin-bottom:20px;padding:20px}.keyboard-row{justify-content:center;margin-bottom:10px;display:flex}.key{background:var(--key-color);color:#5d4037;border:2px solid #8d6e63;border-bottom:6px solid var(--key-border);border-radius:10px;justify-content:center;align-items:center;width:50px;height:50px;margin:0 5px;font-size:1.5rem;transition:all .1s;display:flex;box-shadow:0 4px 5px #0003}.key.active{background:var(--key-active);color:#fff;border-bottom:2px solid #388e3c;transform:translateY(4px);box-shadow:0 1px 2px #0003}.key.error{background:var(--key-error);color:#fff;border-bottom:2px solid #d32f2f;transform:translateY(4px)}.stats-plank{background:var(--wood-light);border:4px solid var(--wood-border);color:#fff;text-shadow:1px 1px #00000080;box-shadow:0 5px 0 var(--wood-border);border-radius:12px;gap:40px;padding:10px 40px;font-size:1.2rem;display:flex}.stats-plank span{align-items:center;gap:10px;display:flex}.affiliate-banner{text-align:center;cursor:pointer;color:#fff;text-shadow:1px 1px #0000004d;background:#ff9800;border:4px dashed #fff;border-radius:12px;margin-top:20px;padding:15px;font-family:Nunito,sans-serif;font-weight:800;transition:transform .2s}.affiliate-banner:hover{transform:scale(1.05)}.logo{color:#4caf50;text-shadow:3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 5px 5px 0 var(--wood-border);text-align:center;margin-bottom:20px;font-size:5rem}.leaderboard-table{border-collapse:collapse;color:#333;background:#fff;border-radius:8px;width:100%;margin-top:20px;font-family:Nunito,sans-serif;overflow:hidden}.leaderboard-table th,.leaderboard-table td{text-align:left;border-bottom:1px solid #eee;padding:12px}.leaderboard-table th{background:var(--primary-btn);color:#fff}@media (height<=800px){.key{width:40px;height:40px;font-size:1.2rem}.keyboard-board{border-width:4px;margin-bottom:10px;padding:10px}.score-board{padding:10px 20px;font-size:1.2rem}.score-board .score-val{font-size:1.5rem}.header-boards{top:10px}.stats-plank{gap:20px;padding:8px 20px;font-size:1rem}}@media (height<=600px){.key{border-bottom-width:3px;width:30px;height:30px;margin:0 3px;font-size:1rem}.keyboard-row{margin-bottom:5px}.keyboard-area-wrapper{padding-bottom:10px}.monkey{width:60px;height:60px;bottom:50px}.floating-word{padding:3px 10px;font-size:1.8rem}}