:root{--mobile-touch-target: 56px;--mobile-padding: .75rem;--landscape-padding: .5rem;--mobile-timer-size: 120px;--landscape-timer-size: 100px;--mobile-mic-size: 70px;--landscape-mic-size: 60px;--mobile-container-padding: .75rem}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;overflow-x:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}#app{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}h1{font-size:clamp(2.5rem,8vw,4rem);margin-bottom:1rem}h2{font-size:clamp(1.8rem,6vw,2.5rem);margin-bottom:.8rem}h3{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:.6rem}p{line-height:1.6;font-size:clamp(1rem,3vw,1.2rem)}.container{max-width:400px;margin:0 auto;padding:1rem;flex:1;display:flex;flex-direction:column;width:100%;min-height:100vh;min-height:100dvh}@media (max-width: 480px){.container{padding:var(--mobile-container-padding);max-width:100%}}@media (max-height: 500px) and (orientation: landscape){.container{padding:.5rem}.screen{padding:1rem .5rem}}.screen{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1rem;animation:slideIn .3s ease-out}.card{background:#ffffff1a;backdrop-filter:blur(10px);border-radius:20px;padding:2rem;margin:1rem 0;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;width:100%;max-width:350px}.btn{background:linear-gradient(45deg,#ff6b6b,#feca57);border:none;border-radius:50px;color:#fff;padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 15px #0003;min-height:var(--mobile-touch-target);display:flex;align-items:center;justify-content:center;text-decoration:none;width:100%;margin:.5rem 0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s;pointer-events:none}.btn:active:before{width:300px;height:300px}@media (hover: hover){.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}}.btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.btn:active{transform:scale(.96);box-shadow:0 2px 10px #0000004d;transition:transform .1s ease}@media (max-width: 768px){.btn:active{transform:scale(.94);background:linear-gradient(45deg,#e55b5b,#e6b84f)}.btn.btn-secondary:active{background:#ffffff4d}.btn.btn-danger:active{background:linear-gradient(45deg,#c73e3a,#a93329)}}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn.btn-secondary{background:#fff3;color:#fff}.btn.btn-danger{background:linear-gradient(45deg,#e74c3c,#c0392b)}.btn.btn-success{background:linear-gradient(45deg,#2ecc71,#27ae60)}.form-group{margin:1rem 0;text-align:left;width:100%}.form-label{display:block;margin-bottom:.5rem;font-weight:600;font-size:1rem}.form-input{width:100%;padding:1rem;border:2px solid rgba(255,255,255,.3);border-radius:10px;background:#ffffff1a;color:#fff;font-size:1rem;backdrop-filter:blur(5px);transition:all .3s ease}.form-input::placeholder{color:#ffffffb3}.form-input:focus{outline:none;border-color:#feca57;box-shadow:0 0 0 3px #feca574d}.form-select{appearance:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNSA1TDkgMSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHN2Zz4K);background-repeat:no-repeat;background-position:right 1rem center;padding-right:3rem}.letter-display{font-size:clamp(4rem,15vw,8rem);font-weight:900;color:#feca57;text-shadow:0 4px 8px rgba(0,0,0,.3);margin:2rem 0;animation:pulse 2s infinite;-webkit-text-stroke:1px rgba(255,255,255,.1);letter-spacing:.1em}@media (max-width: 480px){.letter-display{font-size:clamp(3.5rem,12vw,6rem);margin:1.5rem 0}}@media (max-height: 500px) and (orientation: landscape){.letter-display{font-size:clamp(2.5rem,10vw,4rem);margin:1rem 0}}.countdown-container{display:flex;flex-direction:column;align-items:center;margin:2rem 0;padding:1rem;background:#ffffff0d;border-radius:20px;border:2px solid rgba(255,255,255,.1)}.countdown{font-size:clamp(4rem,12vw,8rem);font-weight:900;color:#fff;margin:1rem 0;text-shadow:0 4px 8px rgba(0,0,0,.3);animation:pulse 2s infinite;min-height:1.2em;display:flex;align-items:center;justify-content:center}.timer-container{display:flex;flex-direction:column;align-items:center;margin:2rem 0;padding:1.5rem;background:#ffffff0d;border-radius:20px;border:2px solid rgba(255,255,255,.1)}.timer-ring{width:140px;height:140px;border:8px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#feca57;margin:1rem auto;position:relative;overflow:hidden;box-shadow:0 4px 15px #0003}@media (max-width: 480px){.timer-container{margin:1.5rem 0;padding:1rem}.timer-ring{width:120px;height:120px}.timer-fill{width:136px!important;height:136px!important}}@media (max-height: 500px) and (orientation: landscape){.timer-container{margin:1rem 0;padding:.5rem}.timer-ring{width:100px;height:100px}}.timer-fill{position:absolute;top:-8px;left:-8px;width:156px;height:156px;border-radius:50%;border:8px solid transparent;border-top-color:#ff6b6b;transform-origin:center;transition:transform .1s linear}.microphone-indicator{width:80px;height:80px;background:#ff6b6b4d;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:2rem auto;animation:micPulse 1.5s infinite;transition:all .3s ease}.microphone-indicator.active{background:#2ecc714d;animation:micActive .8s infinite}.mic-icon{font-size:2rem;color:#fff}@media (max-width: 480px){.microphone-indicator{width:70px;height:70px;margin:1.5rem auto}.mic-icon{font-size:1.8rem}}@media (max-height: 500px) and (orientation: landscape){.microphone-indicator{width:60px;height:60px;margin:1rem auto}.mic-icon{font-size:1.5rem}}.scoreboard{background:#ffffff1a;border-radius:15px;padding:1.5rem;margin:1rem 0;backdrop-filter:blur(10px)}.player-score{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.player-score:last-child{border-bottom:none}.player-score.active{background:#feca5733;border-radius:10px;padding:.8rem 1rem;margin:.2rem 0}.player-name{font-weight:600;font-size:1.1rem}.player-points{font-weight:700;font-size:1.3rem;color:#feca57}.feedback{padding:1.5rem;border-radius:15px;margin:1rem 0;font-weight:600;font-size:1.2rem;text-align:center;animation:feedbackIn .5s ease-out}.feedback.success{background:linear-gradient(45deg,#2ecc714d,#27ae604d);border:2px solid rgba(46,204,113,.5)}.feedback.error{background:linear-gradient(45deg,#e74c3c4d,#c0392b4d);border:2px solid rgba(231,76,60,.5)}.feedback.timeout{background:linear-gradient(45deg,#f1c40f4d,#f39c124d);border:2px solid rgba(241,196,15,.5)}.turn-summary .feedback{min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.1rem;margin:2rem 0}.turn-summary .feedback .icon{font-size:4rem;margin-bottom:1rem;animation:bounceIn .6s ease-out}.turn-summary .feedback .user-input{background:#fff3;padding:.8rem 1.2rem;border-radius:20px;margin:1rem 0;font-style:italic;border:1px solid rgba(255,255,255,.3)}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.loading{display:flex;flex-direction:column;align-items:center;gap:1rem}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top-color:#feca57;border-radius:50%;animation:spin 1s linear infinite}.mobile-only{display:none}@media (max-width: 768px){.mobile-only{display:block}.desktop-only{display:none}}@media (display-mode: standalone){body{padding-top:max(env(safe-area-inset-top),20px)}}@media (max-height: 500px) and (orientation: landscape){h1{font-size:clamp(1.8rem,6vw,2.5rem);margin-bottom:.5rem}h2{font-size:clamp(1.4rem,4vw,1.8rem);margin-bottom:.4rem}.card{padding:1rem;margin:.5rem 0}.btn{min-height:48px;padding:.75rem 1.5rem;font-size:1rem;margin:.25rem 0}}@media (-webkit-min-device-pixel-ratio: 2){.btn{border:.5px solid rgba(255,255,255,.1)}.card{border:.5px solid rgba(255,255,255,.2)}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes countdownPulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes urgentPulse{0%{transform:scale(1);background:#ff6b6b1a}25%{transform:scale(1.05);background:#ff6b6b4d}50%{transform:scale(1.1);background:#ff6b6b33}75%{transform:scale(1.05);background:#ff6b6b4d}to{transform:scale(1);background:#ff6b6b1a}}@keyframes micPulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:1}}@keyframes micActive{0%,to{transform:scale(1);background:#2ecc714d}50%{transform:scale(1.05);background:#2ecc7180}}@keyframes feedbackIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 480px){.container{padding:.5rem}.card{padding:1.5rem;margin:.5rem 0}.btn{padding:.8rem 1.5rem;font-size:1rem}}@media (max-height: 600px){.screen{padding:1rem}.letter-display,.countdown{margin:1rem 0}}@media (display-mode: standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){.card,.btn{border:2px solid white}}