*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,sans-serif;background:linear-gradient(-45deg,#ff6a00,#ee0979,#00c9ff,#92fe9d);background-size:400% 400%;animation:gradientMove 10s ease infinite;overflow-x:hidden}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:30px;position:relative}.screen{width:100%;max-width:480px;padding:40px;border-radius:30px;background:#fffffff2;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);box-shadow:0 25px 60px #0000004d,0 0 50px #ff00804d;text-align:center;animation:fadeIn .3s ease;transition:all .3s ease}h2{font-size:24px;font-weight:800;margin-bottom:10px;letter-spacing:1px}h3{font-size:20px;font-weight:700}p{font-size:14px;margin:6px 0}.choices{display:flex;justify-content:center;gap:35px;margin:30px 0}.choices button{width:95px;height:95px;font-size:34px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#fff,#f1f5f9);box-shadow:0 10px 25px #0003;transition:all .2s ease}.choices button:hover{transform:scale(1.25);box-shadow:0 15px 35px #ff008080,0 0 20px #00c8ff99}.choices button:active{transform:scale(.9)}button{padding:12px 26px;border-radius:999px;border:none;cursor:pointer;font-weight:700;font-size:14px;transition:all .2s ease}button.primary{background:linear-gradient(135deg,#ff512f,#dd2476);color:#fff;box-shadow:0 10px 25px #dd247666}button.primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px #dd247699}button.secondary{background:linear-gradient(135deg,#2193b0,#6dd5ed);color:#fff}button.secondary:hover{transform:translateY(-3px);box-shadow:0 10px 25px #2193b099}.win-text{color:#10b981;font-weight:800;text-shadow:0 0 12px rgba(16,185,129,.7);animation:pop .3s ease}.lose-text{color:#ef4444;font-weight:800;text-shadow:0 0 12px rgba(239,68,68,.7);animation:pop .3s ease}.draw-text{color:#f59e0b;font-weight:800;text-shadow:0 0 12px rgba(245,158,11,.7)}.winner-banner{margin-top:25px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#fff720,#3cd500);box-shadow:0 0 25px #3cd500b3;animation:bounceIn .5s ease}.progress-bar{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:10px 0}.progress-fill{height:100%;background:linear-gradient(90deg,#ff512f,#dd2476);transition:width .4s ease}.modal-overlay{position:fixed;inset:0;background:#00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center}.modal-box{background:#fff;padding:35px;border-radius:25px;width:340px;text-align:center;box-shadow:0 20px 50px #0006;animation:bounceIn .3s ease}.dark-mode{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#f9fafb}.dark-mode .screen{background:#141428f2;color:#f9fafb;box-shadow:0 25px 60px #000000b3,0 0 40px #9333ea66;border:1px solid rgba(255,255,255,.08)}.dark-mode h2,.dark-mode h3{color:#fff}.dark-mode p{color:#e5e7eb}.dark-mode .choices button{background:linear-gradient(135deg,#1f2937,#111827);color:#f3f4f6;box-shadow:0 10px 25px #00000080}.dark-mode .choices button:hover{transform:scale(1.25);box-shadow:0 15px 35px #9333eab3,0 0 25px #9333ea99}.dark-mode .win-text{color:#34d399;text-shadow:0 0 10px rgba(52,211,153,.8)}.dark-mode .lose-text{color:#f87171;text-shadow:0 0 10px rgba(248,113,113,.8)}.dark-mode .draw-text{color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.8)}.dark-mode .winner-banner{background:linear-gradient(135deg,#1e3a8a,#0f172a);box-shadow:0 0 30px #9333ea99;color:#fff}.dark-mode .progress-bar{background:#374151}.dark-mode .progress-fill{background:linear-gradient(90deg,#9333ea,#ec4899)}.dark-mode button.primary{background:linear-gradient(135deg,#ff512f,#dd2476);color:#fff;box-shadow:0 10px 25px #dd247680}.dark-mode button.secondary{background:#374151;color:#f9fafb}.dark-mode button.secondary:hover{box-shadow:0 10px 25px #9333ea66}.dark-mode .modal-overlay{background:#0009}.dark-mode .modal-box{background:linear-gradient(135deg,#1f2937,#111827);color:#f9fafb;box-shadow:0 25px 60px #000c,0 0 25px #9333ea80}.dark-mode .modal-box h3{color:#fff}.dark-mode .modal-box p{color:#e5e7eb}.dark-mode .modal-box button.secondary{background:#374151;color:#f9fafb}.dark-mode .modal-box button.primary{background:linear-gradient(135deg,#ff512f,#dd2476);color:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{transform:scale(.8)}to{transform:scale(1)}}@keyframes bounceIn{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}