*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);height:100vh;width:100vw;color:#333;line-height:1.6;overflow:hidden}#root{height:100vh;width:100vw;display:flex;flex-direction:column}.app{height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}.game-container{display:grid;grid-template-columns:2fr 1fr;gap:15px;padding:15px;flex:1;min-height:0;overflow:hidden}.game-main{background:rgba(255,255,255,.95);border-radius:20px;padding:20px;box-shadow:0 20px 40px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;display:flex;flex-direction:column}.game-sidebar{display:flex;flex-direction:column;gap:15px;overflow-y:auto}.navbar{background:rgba(255,255,255,.95);padding:10px 0;box-shadow:0 2px 20px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.navbar h1{text-align:center;color:#333;font-size:1.8rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card{width:120px;height:180px;border-radius:15px;background:linear-gradient(145deg,#ffffff,#f0f0f0);box-shadow:0 8px 25px #00000026;border:3px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translate(-100%);transition:transform .6s}.card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 15px 35px #0003;border-color:#667eea}.card:hover:before{transform:translate(100%)}.card.cat{background:linear-gradient(145deg,#ffeaa7,#fdcb6e)}.card.defuse{background:linear-gradient(145deg,#55efc4,#00b894)}.card.shuffle{background:linear-gradient(145deg,#a29bfe,#6c5ce7)}.card.skip{background:linear-gradient(145deg,#74b9ff,#0984e3)}.card.exploding-kitten{background:linear-gradient(145deg,#ff7675,#d63031)}.deck{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin:20px 0;flex:1;align-content:center}.btn{padding:12px 24px;border:none;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea99}.btn-secondary{background:linear-gradient(135deg,#fd79a8,#e84393);color:#fff;box-shadow:0 4px 15px #fd79a866}.btn-success{background:linear-gradient(135deg,#55efc4,#00b894);color:#fff;box-shadow:0 4px 15px #55efc466}.form{background:rgba(255,255,255,.95);padding:20px;border-radius:15px;box-shadow:0 10px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.form-group{margin-bottom:15px}.form-group input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:10px;font-size:14px;transition:all .3s ease;background:rgba(255,255,255,.9)}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.formLabel{display:block;margin-bottom:10px;font-weight:600;color:#555;font-size:14px}.status{text-align:center;padding:15px;border-radius:15px;font-size:20px;font-weight:700;margin:15px 0;animation:pulse 2s infinite}.status.won{background:linear-gradient(135deg,#55efc4,#00b894);color:#fff}.status.lost{background:linear-gradient(135deg,#ff7675,#d63031);color:#fff}.status.playing{background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff}.inventory{background:rgba(255,255,255,.95);padding:15px;border-radius:15px;box-shadow:0 8px 25px #0000001a;flex-shrink:0}.inventory h3{margin-bottom:10px;color:#333;font-size:16px}.inventory-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eee}.inventory-item:last-child{border-bottom:none}.score{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);padding:15px;border-radius:15px;text-align:center;box-shadow:0 8px 25px #0000001a;flex-shrink:0}.score h2{font-size:2rem;margin-bottom:5px;color:#333}.score-subtitle{font-size:12px;color:#666}.leaderboard{background:rgba(255,255,255,.95);padding:15px;border-radius:15px;box-shadow:0 8px 25px #0000001a;flex:1;min-height:0;display:flex;flex-direction:column}.leaderboard h3{margin-bottom:15px;color:#333;text-align:center;font-size:16px}.leaderboard-list{flex:1;overflow-y:auto}.leaderboard-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-bottom:8px;background:rgba(102,126,234,.1);border-radius:10px;transition:all .3s ease;font-size:14px}.leaderboard-item:hover{background:rgba(102,126,234,.2);transform:translate(5px)}.leaderboard-item.top-3{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);font-weight:600}.player-info{display:flex;align-items:center;gap:8px}.auth-container{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.auth-form{background:white;padding:30px;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:90%;animation:slideInUp .3s ease-out}.auth-form h2{text-align:center;margin-bottom:25px;color:#333;font-size:24px}.link-button{background:none;border:none;color:#667eea;cursor:pointer;text-decoration:underline;font-weight:600}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}.toast{background:white;padding:15px 20px;border-radius:10px;box-shadow:0 8px 25px #00000026;display:flex;align-items:center;justify-content:space-between;min-width:300px;animation:slideInRight .3s ease-out;cursor:pointer;border-left:4px solid #667eea}.toast-success{border-left-color:#00b894;background:linear-gradient(135deg,#d1f2eb,#a3e4d7)}.toast-error{border-left-color:#d63031;background:linear-gradient(135deg,#fadbd8,#f1948a)}.toast-info{border-left-color:#667eea;background:linear-gradient(135deg,#e8f4fd,#d6eaf8)}.toast-message{font-weight:600;color:#333}.toast-close{background:none;border:none;font-size:18px;cursor:pointer;color:#666;padding:0;margin-left:10px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slideInUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.game-container{grid-template-columns:1fr;gap:10px;padding:10px}.game-main{padding:15px}.card{width:80px;height:120px;font-size:1.2rem}.deck{gap:8px;margin:15px 0}.navbar h1{font-size:1.5rem}.auth-form{padding:25px 20px}.toast-container{top:10px;right:10px;left:10px}.toast{min-width:auto}.score h2{font-size:1.5rem}.status{font-size:16px;padding:12px}}@media (max-width: 480px){.card{width:60px;height:90px;font-size:1rem}.game-container{padding:5px;gap:8px}.game-main,.inventory,.score,.leaderboard{padding:10px}}.card.drawing{animation:cardFlip .8s ease-in-out;transform:rotateY(180deg)}@keyframes cardFlip{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(90deg) scale(1.1)}to{transform:rotateY(180deg) scale(1)}}.card.clickable{cursor:pointer}.card.clickable:hover{animation:cardHover .3s ease-in-out}@keyframes cardHover{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}.card.exploding-kitten{animation:explode .5s ease-in-out infinite alternate}@keyframes explode{0%{transform:scale(1) rotate(0);box-shadow:0 0 20px #ff000080}to{transform:scale(1.1) rotate(2deg);box-shadow:0 0 30px #f00c}}.status.won{animation:celebrate 1s ease-in-out}.status.lost{animation:shake .5s ease-in-out}@keyframes celebrate{0%,to{transform:scale(1)}25%{transform:scale(1.05) rotate(1deg)}75%{transform:scale(1.05) rotate(-1deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.btn{position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.loading{display:flex;justify-content:center;align-items:center;padding:20px}.loading:after{content:"";width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-in{animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}