@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;background:#ffd43b;color:#000;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{width:100vw;height:100vh;position:relative;background:#ffd43b}.audience-page{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;max-width:700px;margin:0 auto;position:relative}.header{position:fixed;top:0;left:0;right:0;padding:20px;background:#ff6b6b;border-bottom:4px solid #000000;z-index:100;text-align:center;box-shadow:6px 6px #000}.main-content{display:flex;flex-direction:column;align-items:center;gap:0;z-index:10;width:100%;background:beige;padding:40px 24px;border:5px solid #000000;border-radius:20px;box-shadow:12px 12px #000;position:relative}.main-content:before{content:"";position:absolute;top:-15px;left:30px;width:60px;height:60px;background:#ff6b6b;border:4px solid #000000;border-radius:50%;transform:rotate(-15deg)}.main-content:after{content:"";position:absolute;bottom:-20px;right:40px;width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-top:40px solid #4ECDC4;border-top-color:#4ecdc4;border-top-width:40px;filter:drop-shadow(3px 3px 0px #000000)}.instruction{font-size:28px;font-weight:700;color:#000;text-align:center;text-transform:uppercase;letter-spacing:.02em;margin-bottom:32px;background:#fff;padding:20px 32px;border:5px solid #000000;border-radius:20px;box-shadow:8px 8px #000;transform:rotate(-1deg);line-height:1.2;position:relative;z-index:5}@keyframes wiggle{0%,to{transform:rotate(-1deg)}25%{transform:rotate(1deg)}50%{transform:rotate(-1deg)}75%{transform:rotate(.5deg)}}@keyframes bounce-left{0%,to{transform:translateY(-50%) rotate(15deg) scale(1)}50%{transform:translateY(-60%) rotate(25deg) scale(1.2)}}@keyframes bounce-right{0%,to{transform:translateY(-50%) rotate(-15deg) scale(1)}50%{transform:translateY(-60%) rotate(-25deg) scale(1.2)}}@media (min-width: 640px){.instruction{font-size:48px;padding:28px 48px}.instruction:before,.instruction:after{font-size:56px;left:-40px}.instruction:after{right:-40px}}.emoji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;position:relative}@media (min-width: 640px){.emoji-grid{grid-template-columns:repeat(6,1fr);gap:20px}}.emoji-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.flying-emoji{position:absolute;font-size:100px;pointer-events:none;-webkit-user-select:none;user-select:none;filter:none;z-index:50}.flying-emoji.local-feedback{animation:localFeedback .7s ease-out forwards}@keyframes localFeedback{0%{transform:translate(-50%,-50%) scale(0);opacity:1}30%{transform:translate(-50%,-80%) scale(1.2);opacity:1}to{transform:translate(-50%,-150%) scale(.5);opacity:0}}.status{display:inline-flex;align-items:center;background:#fff;padding:10px 20px;border-radius:50px;border:3px solid #000000;font-size:13px;font-weight:700;color:#000;text-transform:uppercase;letter-spacing:.03em;box-shadow:4px 4px #000}.status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;border:2px solid #000000}.status-indicator.connected{background:#4ecdc4;animation:pulse 2s ease-in-out infinite}.status-indicator.disconnected{background:#ff6b6b}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.emoji-button{font-size:48px;width:90px;height:90px;border:4px solid #000000;background:#fff;border-radius:16px;cursor:pointer;transition:transform .1s ease-out,background .2s ease,box-shadow .1s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;box-shadow:6px 6px #000;transform:scale(1) rotate(-2deg)}.emoji-button:nth-child(2n){transform:scale(1) rotate(2deg)}.emoji-button:nth-child(3n){background:#ffe66d}.emoji-button:nth-child(3n+1){background:#ffddef}.emoji-button:nth-child(3n+2){background:#c7f0db}@media (min-width: 640px){.emoji-button{width:85px;height:85px;font-size:44px}}.emoji-button:hover:not(:disabled){transform:scale(1.05) rotate(-2deg)!important;box-shadow:8px 8px #000}.emoji-button:nth-child(2n):hover:not(:disabled){transform:scale(1.05) rotate(2deg)!important}.emoji-button:active:not(:disabled){transform:scale(.95) rotate(0)!important;box-shadow:3px 3px #000;transition:transform .05s ease-out}.emoji-button.button-active{animation:buttonPop .4s cubic-bezier(.34,1.56,.64,1) forwards;background:#ff6b6b!important;border-width:5px}@keyframes buttonPop{0%{transform:scale(.95) rotate(0);box-shadow:3px 3px #000}50%{transform:scale(1.15) rotate(-8deg);box-shadow:10px 10px #000}to{transform:scale(1) rotate(-2deg);box-shadow:6px 6px #000}}.emoji-button:disabled{opacity:.3;cursor:not-allowed}.button-ripple-effect{position:absolute;width:40px;height:40px;border-radius:50%;background:#ffd43b;border:3px solid #000000;transform:translate(-50%,-50%) scale(0);animation:rippleEffect .6s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:10}@keyframes rippleEffect{0%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:1}to{transform:translate(-50%,-50%) scale(6) rotate(180deg);opacity:0}}.custom-emoji-button{background:#b4a7ff!important}.custom-emoji-icon{font-size:40px;display:block}.emoji-picker-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.emoji-picker-content{background:#fff;border:5px solid #000000;border-radius:20px;padding:32px 28px;max-width:400px;width:100%;box-shadow:12px 12px #000;position:relative;animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modalSlideIn{0%{transform:scale(.8) rotate(-5deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.emoji-picker-content h2{font-size:28px;font-weight:700;color:#000;text-align:center;margin-bottom:12px;text-transform:uppercase;letter-spacing:.02em}.emoji-hint{font-size:14px;text-align:center;color:#666;margin-bottom:20px}.emoji-input-wrapper{position:relative;margin-bottom:12px}.emoji-input{width:100%;font-size:48px;text-align:center;padding:20px 60px 20px 20px;border:4px solid #000000;border-radius:12px;background:beige;font-family:inherit;box-shadow:4px 4px #000;transition:all .2s ease}.emoji-input:focus{outline:none;background:#ffe66d;transform:scale(1.02);box-shadow:6px 6px #000}.emoji-input.input-error{border-color:#ff6b6b;background:#ffe5e5}.emoji-input.input-error:focus{background:#ffd5d5}.emoji-input::placeholder{opacity:.4}.native-emoji-picker-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:32px;width:50px;height:50px;border:3px solid #000000;border-radius:8px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px #000;transition:all .1s ease}.native-emoji-picker-btn:hover{background:#f0f0f0;transform:translateY(-50%) scale(1.05);box-shadow:4px 4px #000}.native-emoji-picker-btn:active{transform:translateY(-50%) scale(.95);box-shadow:2px 2px #000}.error-message{font-size:13px;color:#ff6b6b;text-align:center;margin-bottom:16px;font-weight:600;padding:8px 12px;background:#ffe5e5;border:2px solid #FF6B6B;border-radius:8px;animation:errorShake .3s ease}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.emoji-picker-actions{display:flex;gap:12px;justify-content:stretch}.emoji-picker-actions button{flex:1;padding:14px 24px;font-size:16px;font-weight:700;text-transform:uppercase;border:4px solid #000000;border-radius:12px;cursor:pointer;font-family:inherit;letter-spacing:.02em;box-shadow:4px 4px #000;transition:all .1s ease}.cancel-button{background:#fff;color:#000}.cancel-button:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:6px 6px #000}.cancel-button:active{transform:translateY(2px);box-shadow:2px 2px #000}.send-button{background:#4ecdc4;color:#000}.send-button:hover:not(:disabled){background:#3dbdb5;transform:translateY(-2px);box-shadow:6px 6px #000}.send-button:active:not(:disabled){transform:translateY(2px);box-shadow:2px 2px #000}.send-button:disabled{opacity:.3;cursor:not-allowed}