*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#f5576c 75%,#4facfe 100%);background-attachment:fixed;min-height:100vh;font-family:Arial,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 2px,transparent 2px),radial-gradient(circle at 40% 20%,rgba(255,255,255,.08) 1px,transparent 1px),radial-gradient(circle at 90% 80%,rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:120px 120px,180px 180px,250px 250px;pointer-events:none;z-index:-1}#root{min-height:100vh;display:flex;flex-direction:column}*{transition:all .3s ease}@media (max-width: 768px){body{background-attachment:scroll}}.player-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:Arial,sans-serif;opacity:.9;box-shadow:0 2px 8px #0000004d,0 0 0 2px #ffffffe6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;text-shadow:1px 1px 2px rgba(0,0,0,.5);will-change:transform,opacity;transform:translateZ(0);animation:badgeAppear .6s ease-out;transition:transform .2s ease,opacity .2s ease}.player-badge{background:linear-gradient(135deg,var(--player-color) 0%,color-mix(in srgb,var(--player-color) 80%,#000) 100%)}.player-badge:hover{opacity:1;transform:translateZ(0) scale(1.15)}@keyframes badgeAppear{0%{opacity:0;transform:translateZ(0) scale(0)}50%{opacity:.5;transform:translateZ(0) scale(1.2)}to{opacity:.9;transform:translateZ(0) scale(1)}}.card:hover .player-badge{opacity:1;transform:translateZ(0) scale(1.1)}.react-card{width:100%;cursor:pointer}.react-card:hover .card{filter:brightness(1.05)}.card{border-radius:15px;overflow:hidden;box-shadow:0 8px 25px #0003;border:3px solid rgba(255,255,255,.5);background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 100%);transition:box-shadow .2s ease,border-color .2s ease,filter .2s ease;position:relative}.card:hover{box-shadow:0 12px 35px #0000004d;border-color:#667eeacc}.card img{padding:0;border:none;width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}.matched{opacity:.95;border-color:#4ecdc4!important;background:linear-gradient(135deg,rgba(78,205,196,.15) 0%,rgba(78,205,196,.08) 100%)!important;box-shadow:0 0 20px #4ecdc480,0 10px 30px #00000040}.matched img{filter:brightness(1.1) saturate(1.2)}.react-card-flip,.react-card-flipper{transform-style:preserve-3d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translate3d(0,50px,0) scale(.9)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes avatarBounce{0%{opacity:0;transform:translateZ(0) scale(0) rotate(-180deg)}50%{opacity:.8;transform:translateZ(0) scale(1.2) rotate(-90deg)}to{opacity:1;transform:translateZ(0) scale(1) rotate(0)}}@keyframes titleBounce{0%{opacity:0;transform:translate3d(0,-30px,0) scale(.8)}60%{opacity:1;transform:translate3d(0,5px,0) scale(1.1)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.confetti{position:absolute;top:-20px;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.confetti span{position:absolute;font-size:1.5rem;animation:confettiFall 2.5s ease-out infinite;opacity:.8;will-change:transform,opacity;transform:translateZ(0)}.confetti span:nth-child(1){left:15%;animation-delay:0s;animation-duration:2.2s}.confetti span:nth-child(2){left:35%;animation-delay:.4s;animation-duration:2.8s}.confetti span:nth-child(3){left:65%;animation-delay:.2s;animation-duration:2.5s}.confetti span:nth-child(4){left:85%;animation-delay:.6s;animation-duration:2.3s}@keyframes confettiFall{0%{transform:translate3d(0,-100px,0) rotate(0);opacity:1}to{transform:translate3d(0,350px,0) rotate(360deg);opacity:0}}.winner-card *{will-change:auto}@media (max-width: 480px){.confetti span{font-size:1.2rem}@keyframes confettiFall{0%{transform:translate3d(0,-100px,0) rotate(0);opacity:1}to{transform:translate3d(0,250px,0) rotate(360deg);opacity:0}}}