*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;touch-action:manipulation;overscroll-behavior:none;font-family:Nunito,Segoe UI,Arial,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent}#game-wrapper{position:relative;width:100%;height:100%}#game-container{width:100%;height:100%;background:#000}#ui-overlay{position:absolute;inset:0;z-index:100;pointer-events:none}.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto;background:transparent}.screen.active{display:flex}.menu-panel,.gameover-panel{--border-w: 5px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 24px;border-radius:28px;border:var(--border-w) solid transparent;background:linear-gradient(#1a1530,#221a3a) padding-box,linear-gradient(var(--border-angle, 135deg),#f4a0c8,#c9a0f4,#a0d4f4,#f4a0c8) border-box;box-shadow:0 0 40px #f4a0c81f,0 8px 32px #0006,inset 0 1px #ffffff0f;animation:spin-border 4s linear infinite}@property --border-angle{syntax: "<angle>"; initial-value: 135deg; inherits: false;}@keyframes spin-border{to{--border-angle: 495deg}}.menu-panel{gap:6px;max-width:360px;width:90%}.menu-title{display:flex;flex-direction:column;align-items:center;margin-bottom:-6px;animation:float 2.5s ease-in-out infinite}.title-word{font-weight:900;line-height:1}.title-flappy{font-size:56px;letter-spacing:16px;text-transform:uppercase;color:#c4b0f4;text-shadow:0 0 20px rgba(160,140,244,.5),0 2px 4px rgba(0,0,0,.3);transform:rotate(-3deg)}.title-niinoo{font-size:104px;letter-spacing:-1px;color:#f8b4d0;text-shadow:0 0 24px rgba(244,160,200,.5),0 0 60px rgba(244,160,200,.2),0 3px 6px rgba(0,0,0,.3);transform:rotate(1deg)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shimmer{0%,to{background-position:0% center}50%{background-position:100% center}}.mode-toggle{display:flex;width:100%;max-width:280px;background:#ffffff0f;border-radius:14px;overflow:hidden;margin-bottom:16px;border:2px solid rgba(255,255,255,.08)}.mode-btn{flex:1;padding:11px 0;border:none;background:transparent;color:#ffffff59;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:all .2s}.mode-btn.active{background:#f4a0c8;color:#2a1530}.section-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;color:#ffffff4d;margin-top:8px}.char-picker{display:flex;align-items:center;gap:12px;margin:4px 0}.arrow-btn{width:48px;height:48px;border-radius:14px;border:2px solid rgba(255,255,255,.1);background:#ffffff0d;color:#f4a0c8;font-family:inherit;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s;flex-shrink:0}.arrow-btn:active{background:#f4a0c826}.char-preview-box{position:relative;width:80px;height:80px;border-radius:18px;border:2px solid rgba(255,255,255,.1);background:#ffffff0d;display:flex;align-items:center;justify-content:center;overflow:hidden}.char-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.char-img img{max-width:90%;max-height:90%;image-rendering:pixelated;image-rendering:crisp-edges}.char-initial{font-size:36px;font-weight:900;color:#f4a0c8}.char-lock-badge{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff6;letter-spacing:1px}.char-name-label{font-size:16px;font-weight:800;color:#f8d0e4;margin-bottom:4px}.level-tiles{display:flex;gap:10px;margin:4px 0}.level-tile{position:relative;width:90px;height:80px;border-radius:14px;border:2px solid rgba(255,255,255,.1);background:#ffffff0d;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;color:#fff;font-family:inherit}.level-tile.selected{border-color:#a0d4f4;background:#a0d4f41a;box-shadow:0 0 16px #a0d4f433}.level-tile.locked{opacity:.35;cursor:default}.level-tile:active:not(.locked){transform:scale(.95)}.level-tile-name{font-size:13px;font-weight:800}.level-tile-lock{font-size:9px;font-weight:800;color:#ffffff4d;margin-top:4px;letter-spacing:1px}.level-tile-score{font-size:11px;color:#a0d4f4;font-weight:700;margin-top:2px}.play-btn{margin-top:20px;width:100%;max-width:280px;height:60px;border:none;border-radius:16px;background:linear-gradient(135deg,#f4a0c8,#c9a0f4);color:#fff;font-family:inherit;font-size:22px;font-weight:900;letter-spacing:4px;cursor:pointer;transition:transform .1s,opacity .15s;text-shadow:0 1px 4px rgba(0,0,0,.2)}.play-btn:active{transform:scale(.96)}.play-btn:disabled{opacity:.3;cursor:default;transform:none}.gameover-screen{background:#00000073;backdrop-filter:blur(3px)}.gameover-panel{gap:4px;max-width:340px;width:88%}.gameover-label{font-size:16px;color:#fff6;font-weight:700}.gameover-score{font-size:64px;font-weight:900;line-height:1;margin:4px 0;background:linear-gradient(135deg,#f8b4d0,#b4d8f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gameover-highscore{font-size:16px;color:#fff6;font-weight:700;margin-bottom:8px}.gameover-newhigh{font-size:18px;font-weight:800;color:#f4a0c8;animation:pulse .6s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.7}to{opacity:1}}.gameover-unlock{font-size:15px;font-weight:800;color:#7ddba3}.gameover-cleared{font-size:22px;font-weight:900;color:#7ddba3;margin-bottom:8px}.gameover-spacer{height:12px}.gameover-btns{display:flex;flex-direction:column;gap:12px;width:100%;max-width:240px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 24px;border:none;border-radius:14px;font-family:inherit;font-size:18px;font-weight:800;cursor:pointer;transition:transform .1s}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,#f4a0c8,#c9a0f4);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.15)}.btn-secondary{background:#ffffff0f;color:#f8d0e4;border:2px solid rgba(255,255,255,.1)}.unlock-screen{background:#0000008c;backdrop-filter:blur(6px)}.unlock-panel{--border-w: 5px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 28px;border-radius:28px;border:var(--border-w) solid transparent;background:linear-gradient(#1a1530,#221a3a) padding-box,linear-gradient(var(--border-angle, 135deg),#f4a0c8,#c9a0f4,#a0d4f4,#f4a0c8) border-box;box-shadow:0 0 60px #f4a0c833,0 8px 32px #0006;animation:spin-border 4s linear infinite;max-width:320px;width:85%;gap:8px}.unlock-stars{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:4px;color:#f4a0c8;animation:pulse .8s ease-in-out infinite alternate}.unlock-sprite-frame{width:160px;height:160px;border-radius:28px;border:3px solid rgba(244,160,200,.3);background:#ffffff0d;display:flex;align-items:center;justify-content:center;margin:12px 0;animation:float 2.5s ease-in-out infinite}.unlock-sprite{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.unlock-sprite img{max-width:85%;max-height:85%;image-rendering:pixelated;image-rendering:crisp-edges}.unlock-initial{font-size:72px;font-weight:900;color:#f4a0c8}.unlock-name{font-size:28px;font-weight:900;background:linear-gradient(135deg,#f8b4d0,#b4d8f8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.unlock-desc{font-size:15px;font-weight:700;color:#ffffff80}.audio-toggle{position:fixed;top:10px;right:10px;z-index:200;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:#ffffff59;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:color .15s}.audio-toggle svg{width:18px;height:18px}.audio-toggle:active{color:#fff9}