*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:linear-gradient(135deg,#f5f7fa,#e4e8ec)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.app h1{margin:0 0 1.5rem;color:#2c3e50;font-size:1.75rem}.tic-tac-toe{display:flex;flex-direction:column;align-items:center;gap:1rem}.status{font-weight:600;color:#34495e;min-height:1.5em}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#95a5a6;padding:4px;border-radius:8px;box-shadow:0 4px 12px #00000026}.square{width:90px;height:90px;background:#ecf0f1;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.square:hover:not(:disabled){background:#dfe6e9}.square:disabled{cursor:default}.fruit-mark{width:70px;height:70px}.game-header{margin-bottom:.5rem}.change-players{padding:.35rem .75rem;font-size:.9rem;color:#7f8c8d;background:transparent;border:1px solid #bdc3c7;border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.change-players:hover{background:#ecf0f1;color:#2c3e50}.scores{font-weight:600;color:#34495e;display:flex;gap:.5rem;align-items:center}.score-sep{color:#bdc3c7}.player-setup{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:420px}.player-setup h2{margin:0;font-size:1.25rem;color:#2c3e50}.setup-form{display:flex;flex-direction:column;gap:1.5rem;width:100%}.player-field{display:flex;flex-direction:column;gap:.5rem}.player-field label{font-weight:600;color:#34495e;font-size:.9rem}.player-field input[type=text]{padding:.5rem .75rem;font-size:1rem;border:1px solid #bdc3c7;border-radius:6px}.icon-label{margin-top:.5rem!important}.icon-picker{display:flex;flex-wrap:wrap;gap:.5rem}.icon-option{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;background:#ecf0f1;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s}.icon-option:hover:not(.disabled){background:#dfe6e9;border-color:#bdc3c7}.icon-option.selected{border-color:#3498db;background:#ecf9ff}.icon-option.disabled{opacity:.5;cursor:not-allowed}.icon-option .fruit-mark{width:40px;height:40px}.icon-option span{font-size:.75rem;color:#2c3e50}.start-game{padding:.6rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;background:#27ae60;border:none;border-radius:6px;cursor:pointer;transition:background .15s}.start-game:hover:not(:disabled){background:#219a52}.start-game:disabled{background:#bdc3c7;cursor:not-allowed}.reset{padding:.5rem 1.25rem;font-size:1rem;font-weight:600;color:#fff;background:#3498db;border:none;border-radius:6px;cursor:pointer;transition:background .15s}.reset:hover{background:#2980b9}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d1;display:flex;align-items:center;justify-content:center;z-index:100;overflow:hidden}.modal-card{background:linear-gradient(145deg,#1a1a2e,#16213e);border-radius:24px;padding:2.5rem 3rem;text-align:center;box-shadow:0 24px 64px #0009;display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:300px;position:relative;z-index:101;animation:card-in .35s cubic-bezier(.175,.885,.32,1.275) both}.modal-resolved{background:linear-gradient(145deg,#0d1b2a,#1b2838)}@keyframes card-in{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.roulette-label{font-size:1rem;color:#94a3b8;margin:0;text-transform:uppercase;letter-spacing:.12em}.roulette-icon-wrap{width:110px;height:110px;display:flex;align-items:center;justify-content:center}.roulette-icon-spinning{animation:icon-shake .18s ease-in-out infinite alternate}.roulette-icon-resolved{animation:icon-pop .55s cubic-bezier(.175,.885,.32,1.275) both;width:130px;height:130px}@keyframes icon-shake{0%{transform:rotate(-12deg) scale(1.08)}to{transform:rotate(12deg) scale(.93)}}@keyframes icon-pop{0%{transform:scale(.4) rotate(-15deg);opacity:0}70%{transform:scale(1.12) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}.roulette-name-spinning{font-size:1.4rem;font-weight:700;color:#cbd5e1;margin:0}.roulette-winner-name{font-size:3.2rem;font-weight:900;color:gold;margin:0;text-shadow:0 0 24px rgba(255,215,0,.55),0 2px 8px rgba(0,0,0,.4);animation:name-pop .65s cubic-bezier(.175,.885,.32,1.275) both;letter-spacing:-.01em}@keyframes name-pop{0%{transform:scale(.25);opacity:0}65%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.goes-first-text{font-size:1.2rem;color:#94a3b8;margin:0;animation:fade-in .4s ease .3s both}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes confetti-fall{0%{transform:translateY(-30px) translate(0) rotate(var(--r));opacity:1}to{transform:translateY(110vh) translate(var(--drift)) rotate(calc(var(--r) + 720deg));opacity:0}}.confetti-piece{position:fixed;top:0;border-radius:2px;animation:confetti-fall linear forwards;pointer-events:none;will-change:transform,opacity}.begin-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e0;display:flex;align-items:center;justify-content:center;z-index:200;animation:begin-fade 2s ease forwards}@keyframes begin-fade{0%{opacity:0}12%{opacity:1}78%{opacity:1}to{opacity:0}}.begin-text{font-size:clamp(4rem,14vw,10rem);font-weight:900;color:#fff;margin:0;letter-spacing:-.02em;text-shadow:0 0 40px rgba(255,255,255,.7),0 0 80px rgba(255,120,0,.45);animation:begin-pulse .28s ease-in-out infinite alternate}@keyframes begin-pulse{0%{transform:scale(1)}to{transform:scale(1.04)}}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e0;display:flex;align-items:center;justify-content:center;z-index:200;overflow:hidden;animation:begin-fade 3s ease forwards}.win-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;z-index:1}.win-player-name{font-size:clamp(3.5rem,12vw,9rem);font-weight:900;color:gold;margin:0;letter-spacing:-.02em;text-shadow:0 0 40px rgba(255,215,0,.65),0 2px 12px rgba(0,0,0,.5);animation:name-pop .55s cubic-bezier(.175,.885,.32,1.275) both}.win-subtitle{font-size:clamp(1.2rem,4vw,2rem);color:#e2e8f0;margin:0;animation:fade-in .4s ease .3s both}.game-over-card{gap:1.25rem;min-width:340px}.game-over-title{font-size:2rem;font-weight:900;color:#e2e8f0;margin:0;text-transform:uppercase;letter-spacing:.12em}.game-over-winner{font-size:1.8rem;font-weight:700;color:gold;margin:0;text-shadow:0 0 20px rgba(255,215,0,.4)}.game-over-score{font-size:1rem;color:#94a3b8;margin:0}.game-over-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.match-length-field{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.match-length-field>label{font-weight:600;color:#34495e;font-size:.9rem;white-space:nowrap}.match-length-picker{display:flex;gap:.4rem}.match-length-btn{width:38px;height:38px;border-radius:8px;border:2px solid #bdc3c7;background:#ecf0f1;font-size:1rem;font-weight:600;color:#2c3e50;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.match-length-btn:hover{border-color:#3498db;background:#ecf9ff}.match-length-btn.selected{background:#3498db;border-color:#3498db;color:#fff}.match-length-label{font-weight:600;color:#34495e;font-size:.9rem}
