*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:#0a0a1a;color:#e0e0e0;min-height:100dvh;overflow-x:hidden;-webkit-user-select:none;user-select:none}.screen{min-height:100dvh;padding:20px}.screen.active{display:flex;align-items:center;justify-content:center}.menu-container{text-align:center;max-width:360px;width:100%}.title{font-size:4rem;font-weight:900;letter-spacing:.3em;background:linear-gradient(135deg,#ff6b35,#f7c948,#ff6b35);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.subtitle{color:#888;font-size:1rem;margin-bottom:48px;letter-spacing:.1em}.menu-buttons{display:flex;flex-direction:column;gap:12px}button{padding:14px 28px;font-size:1rem;font-weight:600;border:2px solid #333;border-radius:12px;background:#151525;color:#e0e0e0;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}button:hover{background:#1e1e35;border-color:#ff6b35;color:#fff}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default;transform:none}.how-to-play-container{max-width:500px;width:100%}.how-to-play-container h2{font-size:1.8rem;margin-bottom:20px;color:#f7c948}.rules{background:#151525;border-radius:12px;padding:24px;margin-bottom:24px;line-height:1.7}.rules h3{color:#ff6b35;margin:16px 0 8px}.rules ul{padding-left:20px}.rules li{margin:6px 0}.join-container{text-align:center;max-width:360px;width:100%}.join-container h2{margin-bottom:24px;color:#f7c948}.divider{color:#555;margin:16px 0;font-size:.9rem}#room-input{width:100%;padding:14px;font-size:1.4rem;text-align:center;letter-spacing:.4em;text-transform:uppercase;background:#151525;border:2px solid #333;border-radius:12px;color:#e0e0e0;margin-bottom:12px;outline:none}#room-input:focus{border-color:#ff6b35}.back-btn{margin-top:16px;background:transparent;border-color:#555;color:#888}.waiting-container{text-align:center}.waiting-container h2{margin-bottom:24px;color:#f7c948}.room-code-display{margin-bottom:24px}.room-code-display .code{display:block;font-size:3rem;font-weight:900;letter-spacing:.4em;color:#ff6b35;margin-top:8px}.copy-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:16px}.copy-link-btn,.copy-code-btn{padding:10px 20px;font-size:.9rem}.copy-link-btn{background:linear-gradient(135deg,#ff6b35,#e85d26);border-color:#ff6b35;color:#fff}.copy-status{color:#4ecdc4;font-size:.85rem;margin-bottom:12px;animation:fade-in-up .3s ease-out}@keyframes fade-in-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.spinner{width:40px;height:40px;border:3px solid #333;border-top-color:#ff6b35;border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}.spinner.small{width:20px;height:20px;border-width:2px;margin:0}@keyframes spin{to{transform:rotate(360deg)}}.handoff-container{text-align:center}.handoff-container h2{font-size:2rem;color:#f7c948;margin-bottom:12px}.handoff-container p{color:#888;margin-bottom:32px}.progress-bar{display:flex;gap:3px;margin-bottom:16px;height:8px;width:100%}.progress-segment{flex:1;border-radius:4px;background:#1a1a2e;transition:background .4s,box-shadow .4s}.seg-p1{background:#4ecdc4;box-shadow:0 0 6px #4ecdc466}.seg-p2{background:#ff6b6b;box-shadow:0 0 6px #ff6b6b66}.seg-tie{background:#555}.seg-current{background:#2a2a40;animation:pulse-segment 1.5s ease-in-out infinite}.seg-empty{background:#1a1a2e}@keyframes pulse-segment{0%,to{background:#2a2a40}50%{background:#3a3a55}}.game-container{max-width:440px;width:100%;margin:0 auto}.scoreboard{display:flex;align-items:center;justify-content:space-between;background:#151525;border-radius:12px;padding:16px;margin-bottom:24px}.score-side{text-align:center;min-width:70px}.score-label{display:block;font-size:.8rem;color:#888;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}.score-value{font-size:2.2rem;font-weight:900}.p1-side .score-value{color:#4ecdc4}.p2-side .score-value{color:#ff6b6b}.score-center{text-align:center}.round-number{display:block;font-size:.95rem;font-weight:700;color:#ccc}.cards-left{font-size:.75rem;color:#666}.selection-area{margin-bottom:20px}.select-group{margin-bottom:16px}.select-group h3{font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.number-row{display:flex;gap:8px}.num-btn{flex:1;aspect-ratio:1;font-size:1.5rem;font-weight:800;border:2px solid #2a2a40;border-radius:12px;background:#151525;color:#999;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}.num-btn .num-val{line-height:1}.num-btn .num-count{font-size:.6rem;font-weight:600;color:#555;line-height:1}.num-btn.exhausted{opacity:.25;cursor:default}.num-btn.exhausted:hover{border-color:#2a2a40;color:#999}.num-btn:hover:not(.exhausted){border-color:#444;color:#ccc}.num-btn.selected{border-color:#ff6b35;background:#2a1a10;color:#ff6b35}.num-btn-action.selected{border-color:#4ecdc4;background:#0a2520;color:#4ecdc4}.num-btn-call.selected{border-color:#f7c948;background:#2a2510;color:#f7c948}.submit-btn{width:100%;padding:16px;font-size:1.1rem;background:#1a1a30;border-color:#333;margin-bottom:16px}.submit-btn:not(:disabled){background:linear-gradient(135deg,#ff6b35,#e85d26);border-color:#ff6b35;color:#fff}.waiting-indicator{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;color:#888;font-size:.9rem}.round-history{margin-top:8px}.round-entry{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#12121f;border-radius:8px;margin-bottom:6px;font-size:.85rem}.round-entry .round-num{color:#555;font-weight:700;width:24px}.round-entry .round-moves{color:#888;flex:1;text-align:center}.round-entry .round-pts{font-weight:700;width:70px;text-align:right}.round-entry .pts-p1{color:#4ecdc4}.round-entry .pts-p2{color:#ff6b6b}.compact .round-entry{padding:6px 10px;font-size:.78rem}.result-screen-wrapper{width:100%;max-width:440px;position:relative}.result-container{text-align:center;width:100%;position:relative;padding:0 4px}.screen-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-8px) rotate(-1deg)}20%{transform:translate(8px) rotate(1deg)}30%{transform:translate(-6px) rotate(-.5deg)}40%{transform:translate(6px) rotate(.5deg)}50%{transform:translate(-4px)}60%{transform:translate(4px)}70%{transform:translate(-2px)}80%{transform:translate(2px)}}.result-round-label{font-size:.85rem;color:#555;text-transform:uppercase;letter-spacing:.15em;margin-bottom:20px;transition:opacity .3s}.fade-in{opacity:1}.fade-out{opacity:0}.result-matchup{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:32px}.result-card{background:#151525;border:2px solid #2a2a40;border-radius:16px;padding:20px 24px;min-width:130px;position:relative}.result-card-label{font-size:.75rem;color:#666;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}.result-card-action{font-size:3.2rem;font-weight:900;color:#e0e0e0;line-height:1;margin-bottom:8px}.result-card-call{display:flex;flex-direction:column;align-items:center;gap:2px}.call-label{font-size:.6rem;color:#444;text-transform:uppercase;letter-spacing:.1em}.call-value{font-size:1.2rem;font-weight:700;color:#f7c948}.card-pre{opacity:0;transform:scale(.3) translateY(30px)}.card-in{opacity:1;transform:scale(1) translateY(0)}.card-slam{animation:card-slam-in .4s cubic-bezier(.16,1.2,.3,1) forwards}@keyframes card-slam-in{0%{opacity:0;transform:scale(.3) translateY(40px)}60%{opacity:1;transform:scale(1.08) translateY(-4px)}80%{transform:scale(.97) translateY(1px)}to{opacity:1;transform:scale(1) translateY(0)}}.result-vs{font-size:1.1rem;font-weight:900;color:#333;letter-spacing:.1em;transition:opacity .3s}.vs-pre{opacity:0}.vs-in{opacity:1}.suspense-dots{display:flex;justify-content:center;gap:8px;margin:20px 0}.dot{width:10px;height:10px;border-radius:50%;background:#444;animation:dot-pulse .6s ease-in-out infinite}.dot2{animation-delay:.15s}.dot3{animation-delay:.3s}@keyframes dot-pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.catch-banner{font-size:3rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:24px 0;position:relative}.banner-p1{color:#4ecdc4;text-shadow:0 0 30px rgba(78,205,196,.8),0 0 60px rgba(78,205,196,.4),0 0 100px rgba(78,205,196,.2)}.banner-p2{color:#ff6b6b;text-shadow:0 0 30px rgba(255,107,107,.8),0 0 60px rgba(255,107,107,.4),0 0 100px rgba(255,107,107,.2)}.banner-double{color:#f7c948;text-shadow:0 0 30px rgba(247,201,72,.8),0 0 60px rgba(247,201,72,.4),0 0 100px rgba(247,201,72,.2)}.banner-slam{animation:banner-slam-in .5s cubic-bezier(.16,1.2,.3,1) forwards}.banner-idle{animation:banner-glow 2s ease-in-out infinite}@keyframes banner-slam-in{0%{opacity:0;transform:scale(2.5) translateY(-20px);filter:blur(8px)}40%{opacity:1;transform:scale(.9) translateY(3px);filter:blur(0)}60%{transform:scale(1.05) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}@keyframes banner-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.clash-text{font-size:1.1rem;font-weight:600;color:#666;margin:24px 0;animation:clash-fade-in .4s ease-out}@keyframes clash-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.result-points-row{display:flex;justify-content:center;gap:60px;margin-bottom:32px}.result-pts{font-size:1.5rem;font-weight:900}.result-pts-p1{color:#4ecdc4}.result-pts-p2{color:#ff6b6b}.pts-fade{animation:pts-simple .4s ease-out}@keyframes pts-simple{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.pts-slam{animation:pts-slam-in .6s cubic-bezier(.16,1.2,.3,1)}@keyframes pts-slam-in{0%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.6)}70%{transform:scale(.85)}to{opacity:1;transform:scale(1)}}.catch-flash{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:100;animation:flash-bang .7s ease-out forwards}.flash-p1{background:radial-gradient(circle at 50% 50%,rgba(78,205,196,.5) 0%,rgba(78,205,196,.15) 50%,transparent 80%)}.flash-p2{background:radial-gradient(circle at 50% 50%,rgba(255,107,107,.5) 0%,rgba(255,107,107,.15) 50%,transparent 80%)}.flash-double{background:radial-gradient(circle at 50% 50%,rgba(247,201,72,.5) 0%,rgba(247,201,72,.15) 50%,transparent 80%)}@keyframes flash-bang{0%{opacity:0}15%{opacity:1}to{opacity:0}}.particle-container{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:50}.particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:particle-burst 1s ease-out forwards;animation-delay:var(--delay)}.particle-p1{background:#4ecdc4;box-shadow:0 0 6px #4ecdc4}.particle-p2{background:#ff6b6b;box-shadow:0 0 6px #ff6b6b}.particle-double{background:#f7c948;box-shadow:0 0 6px #f7c948}@keyframes particle-burst{0%{opacity:1;transform:rotate(var(--angle)) translate(0) scale(1)}60%{opacity:.8}to{opacity:0;transform:rotate(var(--angle)) translate(120px) scale(.2)}}.next-round-btn{width:100%;padding:16px;font-size:1.1rem;margin-top:8px;transition:opacity .3s,transform .3s}.btn-hidden{opacity:0;transform:translateY(10px);pointer-events:none}.btn-visible{opacity:1;transform:translateY(0)}.gameover-container{text-align:center;max-width:440px;width:100%}.gameover-container h2{font-size:2rem;margin-bottom:16px}.final-score{font-size:3rem;font-weight:900;margin-bottom:24px}.final-score span:first-child{color:#4ecdc4}.final-score span:last-child{color:#ff6b6b}.gameover-buttons{display:flex;gap:12px;margin-top:20px}.gameover-buttons button{flex:1}.create-room-container{text-align:center;max-width:360px;width:100%}.create-room-container h2{margin-bottom:8px;color:#f7c948}.config-subtitle{color:#666;font-size:.85rem;margin-bottom:20px}.config-values-section{display:flex;gap:8px;align-items:center;margin-bottom:20px}.config-label{font-size:.8rem;color:#888;text-transform:uppercase;white-space:nowrap}#config-values-input{flex:1;padding:10px 12px;font-size:1rem;background:#151525;border:2px solid #333;border-radius:8px;color:#e0e0e0;outline:none;text-align:center}#config-values-input:focus{border-color:#ff6b35}.config-apply-btn{padding:10px 16px;font-size:.85rem}.hand-config{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.hand-config-row{display:flex;align-items:center;justify-content:center;gap:12px}.config-card{font-size:1.4rem;font-weight:800;color:#4ecdc4;width:36px;text-align:center}.config-minus,.config-plus{width:40px;height:40px;font-size:1.2rem;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px}.config-count{font-size:1.3rem;font-weight:700;width:32px;text-align:center}.config-total{color:#888;font-size:.9rem;margin-bottom:20px}@media(max-width:400px){.title{font-size:3rem}.num-btn{font-size:1.2rem;border-radius:10px}.result-matchup{gap:12px}.result-player{padding:12px 14px;min-width:110px}.result-action{font-size:2rem}}