*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #4a90d9;--primary-dark: #357abd;--secondary: #e74c3c;--background: #1a1a2e;--surface: #16213e;--text: #ffffff;--text-muted: #a0a0a0;--success: #27ae60;--warning: #f39c12}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--background);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{height:100%;display:flex;flex-direction:column}.screen{display:none;flex-direction:column;height:100%;padding:20px;animation:fadeIn .3s ease}.screen.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#selection-screen{justify-content:space-between;gap:10px}.sentence-card{flex:1;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:20px;padding:30px 20px;cursor:pointer;transition:all .3s ease;border:3px solid transparent}.sentence-card:active{transform:scale(.98)}.sentence-card.top{background:linear-gradient(135deg,#4a90d9,#357abd)}.sentence-card.bottom{background:linear-gradient(135deg,#e74c3c,#c0392b)}.sentence-card.selected{transform:scale(1.05);border-color:var(--success)}.sentence-card.fade-out{opacity:0;transform:scale(.9)}.sentence-text{font-size:1.4rem;text-align:center;line-height:1.5;font-weight:500}.vs-divider{text-align:center;font-size:1.5rem;font-weight:700;color:var(--text-muted);padding:10px 0}#game-screen{justify-content:space-between;align-items:center}.selected-sentence{background:var(--surface);border-radius:20px;padding:40px 25px;width:100%;text-align:center}.selected-sentence p{font-size:1.8rem;line-height:1.6;font-weight:600}.timer-display{flex:1;display:flex;align-items:center;justify-content:center}.timer-circle{width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--timer-color, var(--primary)) calc(var(--progress, 0) * 360deg),var(--surface) calc(var(--progress, 0) * 360deg));display:flex;align-items:center;justify-content:center;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 30px #4a90d94d;--timer-color: var(--primary)}.timer-circle:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:var(--background);transition:all .4s cubic-bezier(.4,0,.2,1)}.timer-circle:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:transparent;box-shadow:inset 0 0 20px #ffffff1a;pointer-events:none}.timer-circle.warning{--timer-color: #f1c40f;box-shadow:0 0 40px #f1c40f80,0 0 80px #f1c40f33;animation:warningPulse .6s ease-in-out infinite}.timer-circle.warning:before{box-shadow:inset 0 0 30px #f1c40f26}@keyframes warningPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.timer-circle.danger{--timer-color: #e74c3c;box-shadow:0 0 50px #e74c3c99,0 0 100px #e74c3c4d;animation:dangerPulse .3s ease-in-out infinite}.timer-circle.danger:before{box-shadow:inset 0 0 40px #e74c3c33}@keyframes dangerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.timer-circle.finished{--timer-color: var(--secondary);animation:finishedFlash .3s ease-out;box-shadow:0 0 60px #e74c3ccc}@keyframes finishedFlash{0%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}#timer-count{font-size:4rem;font-weight:700;z-index:1}.controls{display:flex;gap:10px;width:100%;padding:0}.control-btn{display:flex;align-items:center;justify-content:center;flex:1;height:80px;border:none;border-radius:16px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px #00000040}.control-btn:hover:not(:disabled){transform:scale(1.02);box-shadow:0 6px 25px #00000059}.control-btn:active:not(:disabled){transform:scale(.98);box-shadow:0 2px 10px #0003}.control-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.btn-icon{width:40px;height:40px}.btn-icon.hidden{display:none}.play-pause-btn{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;flex:1.5}.play-pause-btn:hover:not(:disabled){background:linear-gradient(135deg,#27ae60,#219a52)}.play-pause-btn.active{background:linear-gradient(135deg,#f39c12,#e67e22)}.play-pause-btn.active:hover:not(:disabled){background:linear-gradient(135deg,#e67e22,#d35400)}.play-pause-btn .btn-icon{width:44px;height:44px}.next-btn{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.next-btn:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#1f6dad)}#gameover-screen{justify-content:center;align-items:center;gap:30px;text-align:center}#gameover-screen h2{font-size:2.5rem}#gameover-screen p{font-size:1.2rem;color:var(--text-muted)}.restart-btn{background:var(--primary);color:#fff;padding:20px 40px;font-size:1.2rem}@media(max-width:400px){.sentence-text{font-size:1.2rem}.timer-circle{width:150px;height:150px}.timer-circle:before{width:120px;height:120px}#timer-count{font-size:3rem}.control-btn{padding:12px 18px;min-width:75px}}@supports (padding-top: env(safe-area-inset-top)){.screen{padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}}