:root{color-scheme:light;font-family:Segoe UI,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#ffecd2,#fcb69f,#ff9a9e);color:#3a3a3a;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.menu-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.menu-title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite;margin-bottom:.25rem;letter-spacing:-.02em}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.menu-subtitle{font-size:1.1rem;color:#503c2899;margin-bottom:2rem;font-weight:500}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:380px;width:100%}.game-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem;border:none;border-radius:1.25rem;font-size:1rem;font-weight:700;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #00000026;min-height:120px}.game-btn:active{transform:scale(.95)}.game-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.game-btn .emoji{font-size:2.5rem;line-height:1}.btn-bubbles{background:linear-gradient(135deg,#74b9ff,#0984e3)}.btn-colors{background:linear-gradient(135deg,#55efc4,#00b894)}.btn-stars{background:linear-gradient(135deg,#fdcb6e,#e17055)}.btn-shapes{background:linear-gradient(135deg,#a29bfe,#6c5ce7)}.btn-grow{background:linear-gradient(135deg,#fd79a8,#e84393)}.btn-draw{background:linear-gradient(135deg,#81ecec,#00cec9)}.game-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}.game-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;z-index:10}.back-btn{background:#ffffffd9;border:none;border-radius:1rem;padding:.5rem 1rem;font-size:1rem;font-weight:700;color:#555;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .15s}.back-btn:active{transform:scale(.95)}.game-score{background:#ffffffd9;border-radius:1rem;padding:.5rem 1rem;font-size:1rem;font-weight:700;color:#555;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-area{flex:1;position:relative;overflow:hidden}.bubble{position:absolute;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;animation:bubbleFloat 3s ease-in-out infinite;transition:transform .1s;border:3px solid rgba(255,255,255,.6);box-shadow:inset 0 -5px 15px #0000001a,0 4px 10px #0000001a}.bubble:active{transform:scale(.8)}@keyframes bubbleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.pop-effect{position:absolute;pointer-events:none;font-size:2rem;animation:popUp .6s ease-out forwards}@keyframes popUp{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(1.5) translateY(-40px)}}.color-board{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:1.5rem;max-width:350px;margin:0 auto;align-content:center;height:100%}.color-tile{aspect-ratio:1;border-radius:1.25rem;border:4px solid rgba(255,255,255,.7);cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 12px #00000026}.color-tile:active{transform:scale(.9)}.color-tile.matched{animation:matchPop .4s ease}@keyframes matchPop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.color-target{text-align:center;padding:1rem;font-size:1.3rem;font-weight:700;color:#3c2814cc}.color-target-swatch{display:inline-block;width:2rem;height:2rem;border-radius:.5rem;vertical-align:middle;margin-left:.5rem;border:3px solid rgba(255,255,255,.8);box-shadow:0 2px 8px #00000026}.star{position:absolute;cursor:pointer;font-size:2.5rem;animation:starAppear .3s ease-out,starTwinkle 2s ease-in-out infinite .3s;transition:transform .1s;filter:drop-shadow(0 2px 6px rgba(255,200,0,.5))}.star:active{transform:scale(.7)}@keyframes starAppear{0%{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes starTwinkle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.shapes-area{position:relative;width:100%;height:100%}.shape-target{position:absolute;border:3px dashed rgba(100,80,200,.4);border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:2.5rem;opacity:.5}.shape-piece{position:absolute;cursor:grab;font-size:3rem;display:flex;align-items:center;justify-content:center;transition:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.2));z-index:5;touch-action:none}.shape-piece.placed{animation:shapeSnap .3s ease;cursor:default}@keyframes shapeSnap{0%{transform:scale(1.1)}50%{transform:scale(.95)}to{transform:scale(1)}}.grow-area{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:2rem;padding:2rem}.grow-target{width:200px;height:200px;border-radius:50%;border:4px dashed rgba(232,67,147,.4);display:flex;align-items:center;justify-content:center;position:relative}.grow-circle{border-radius:50%;background:linear-gradient(135deg,#fd79a8,#e84393);transition:width .05s,height .05s;box-shadow:0 4px 20px #e843934d}.grow-instruction{font-size:1.2rem;font-weight:700;color:#50283cb3;text-align:center}.grow-perfect{animation:growPerfect .5s ease}@keyframes growPerfect{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.draw-area{width:100%;height:100%;cursor:crosshair}.draw-canvas{width:100%;height:100%;display:block}.draw-colors{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;gap:.75rem;background:#ffffffd9;padding:.75rem 1.25rem;border-radius:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000001a}.draw-color-btn{width:2.5rem;height:2.5rem;border-radius:50%;border:3px solid rgba(255,255,255,.9);cursor:pointer;transition:transform .15s;box-shadow:0 2px 8px #00000026}.draw-color-btn:active,.draw-color-btn.active{transform:scale(1.15);border-color:#333}.celebration{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);pointer-events:none;animation:celebPop 1s ease forwards;z-index:100}@keyframes celebPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(1)}}.confetti-piece{position:fixed;pointer-events:none;z-index:99;animation:confettiFall 1.5s ease-out forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}