:root{--color-bg: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-text: #f1f5f9;--color-text-secondary: #94a3b8;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-success: #22c55e;--color-error: #ef4444;--color-warning: #f59e0b;--color-red: #dc2626;--color-yellow: #eab308;--color-green: #16a34a;--color-black: #1e293b;--color-rook: #8b5cf6;--card-width: 80px;--card-height: 112px;--card-radius: 8px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s ease}button:disabled{opacity:.5;cursor:not-allowed}input,select{font-family:inherit;font-size:14px;padding:10px 14px;border:1px solid var(--color-bg-tertiary);border-radius:6px;background:var(--color-bg-secondary);color:var(--color-text);outline:none;transition:border-color .2s ease}input:focus,select:focus{border-color:var(--color-primary)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-secondary)}.btn-success{background:var(--color-success);color:#fff}.btn-danger{background:var(--color-error);color:#fff}:root{--color-border: #475569;--color-text-primary: #f1f5f9;--color-danger: #ef4444}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}@keyframes cardPlay{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.animate-card-play{animation:cardPlay .3s ease-out}.trick-winner{box-shadow:0 0 20px 5px #22c55e99}.thinking-dots{display:inline-flex;gap:2px}.thinking-dots span{width:6px;height:6px;background-color:var(--color-primary);border-radius:50%;animation:dotBounce 1.4s ease-in-out infinite}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}}.card-wrapper{display:inline-block;border-radius:10px;box-shadow:0 4px 12px #00000040;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,filter .2s ease;-webkit-user-select:none;user-select:none;overflow:hidden;will-change:transform;backface-visibility:hidden}.card-wrapper svg{display:block}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-18px) scale(1.04);box-shadow:0 20px 35px #00000059,0 0 0 2px #3b82f64d;z-index:50}.card-clickable:active{transform:translateY(-12px) scale(1.02);transition-duration:.1s}.card-dimmed{opacity:.45;filter:saturate(.6);cursor:not-allowed}.card-dimmed:hover{transform:none;box-shadow:0 4px 12px #00000040}.card-selected{transform:translateY(-22px) scale(1.02);box-shadow:0 18px 35px #3b82f673,0 0 0 3px var(--color-primary)}.card-selected.card-clickable:hover{transform:translateY(-24px) scale(1.05);box-shadow:0 22px 40px #3b82f680,0 0 0 3px var(--color-primary)}.card-playable-glow{box-shadow:0 4px 12px #00000040,0 0 15px #22c55e66}.card{width:var(--card-width);height:var(--card-height);border-radius:var(--card-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:24px;position:relative;box-shadow:0 4px 12px #00000040;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;-webkit-user-select:none;user-select:none}.card-red{background:linear-gradient(145deg,#ef4444,#dc2626);color:#fff}.card-yellow{background:linear-gradient(145deg,#fbbf24,#eab308);color:#1e293b}.card-green{background:linear-gradient(145deg,#22c55e,#16a34a);color:#fff}.card-black{background:linear-gradient(145deg,#334155,#1e293b);color:#fff;border:1px solid #475569}.card-rook{background:linear-gradient(145deg,#a855f7,#8b5cf6);color:#fff;border:2px solid #ffd700;box-shadow:0 4px 15px #8b5cf666}.card-back{background:linear-gradient(145deg,#1e3a5f,#0f172a);border:2px solid #334155}.card-back:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.02) 10px,rgba(255,255,255,.02) 20px)}.card-corner{position:absolute;font-size:12px;font-weight:600}.card-corner-top{top:6px;left:6px}.card-corner-bottom{bottom:6px;right:6px;transform:rotate(180deg)}.card-small{width:50px;height:70px;font-size:16px}.card-small .card-corner{font-size:9px}.rook-icon{font-size:32px}.card-small .rook-icon{font-size:20px}@keyframes cardPlaySmooth{0%{opacity:.9;transform:scale(.9)}50%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.card-played{animation:cardPlaySmooth .35s cubic-bezier(.34,1.56,.64,1)}@keyframes cardFlipSmooth{0%{transform:perspective(400px) rotateY(0)}50%{transform:perspective(400px) rotateY(90deg) scale(1.1)}to{transform:perspective(400px) rotateY(0)}}.card-reveal{animation:cardFlipSmooth .5s ease-in-out}@keyframes cardDealSmooth{0%{opacity:0;transform:translateY(-60px) rotate(-15deg) scale(.8)}60%{opacity:1;transform:translateY(5px) rotate(3deg) scale(1.02)}to{transform:translateY(0) rotate(0) scale(1)}}.card-deal{animation:cardDealSmooth .4s cubic-bezier(.34,1.56,.64,1) backwards}.card-deal-1{animation-delay:.05s}.card-deal-2{animation-delay:.1s}.card-deal-3{animation-delay:.15s}.card-deal-4{animation-delay:.2s}.card-deal-5{animation-delay:.25s}.card-deal-6{animation-delay:.3s}.card-deal-7{animation-delay:.35s}.card-deal-8{animation-delay:.4s}.card-deal-9{animation-delay:.45s}.card-deal-10{animation-delay:.5s}@keyframes trickWinnerPulse{0%,to{box-shadow:0 0 15px 3px #22c55e80}50%{box-shadow:0 0 30px 8px #22c55eb3}}.card-trick-winner{animation:trickWinnerPulse 1s ease-in-out infinite;z-index:10}@keyframes cardCollect{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.8)}to{opacity:0;transform:scale(.5) translateY(-40px)}}.card-collecting{animation:cardCollect .5s ease-out forwards}@keyframes cardShake{0%,to{transform:translate(0)}15%{transform:translate(-6px) rotate(-1deg)}30%{transform:translate(6px) rotate(1deg)}45%{transform:translate(-4px) rotate(-.5deg)}60%{transform:translate(4px) rotate(.5deg)}75%{transform:translate(-2px)}}.card-shake{animation:cardShake .4s ease-in-out}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.03)}}@keyframes gentlePulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 8px #3b82f600}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cardDeal{0%{opacity:0;transform:translateY(-80px) scale(.7) rotate(-10deg)}60%{opacity:1;transform:translateY(5px) scale(1.02) rotate(2deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes cardPlayToCenter{0%{opacity:.8;transform:scale(.85)}40%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes cardLift{0%{transform:translateY(0) scale(1)}to{transform:translateY(-15px) scale(1.05)}}@keyframes winnerGlow{0%,to{box-shadow:0 0 20px 5px #22c55e80}50%{box-shadow:0 0 35px 10px #22c55ecc}}@keyframes collectTrick{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5) translateY(-30px)}}@keyframes turnGlow{0%,to{box-shadow:0 0 15px 3px #3b82f680}50%{box-shadow:0 0 25px 8px #3b82f6b3}}@keyframes scorePop{0%{transform:scale(1)}30%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-40px)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-fade-out{animation:fadeOut .3s ease-out forwards}.animate-slide-up{animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.animate-slide-down{animation:slideDown .4s cubic-bezier(.16,1,.3,1)}.animate-scale-in{animation:scaleIn .3s cubic-bezier(.16,1,.3,1)}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-gentle-pulse{animation:gentlePulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-card-deal{animation:cardDeal .5s cubic-bezier(.34,1.56,.64,1)}.animate-card-play{animation:cardPlayToCenter .35s cubic-bezier(.34,1.56,.64,1)}.animate-bounce-in{animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}.animate-shake{animation:shake .4s ease-in-out}.trick-winner{animation:winnerGlow 1s ease-in-out infinite}.current-turn{animation:turnGlow 1.5s ease-in-out infinite}.score-changed{animation:scorePop .4s cubic-bezier(.34,1.56,.64,1)}.thinking-dots{display:inline-flex;gap:4px;align-items:center}.thinking-dots span{width:8px;height:8px;background:var(--color-primary, #3b82f6);border-radius:50%;animation:dotBounce 1.2s ease-in-out infinite}.thinking-dots span:nth-child(1){animation-delay:0s}.thinking-dots span:nth-child(2){animation-delay:.15s}.thinking-dots span:nth-child(3){animation-delay:.3s}@keyframes dotBounce{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-10px);opacity:1}}.card-playable{cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}.card-playable:hover{transform:translateY(-20px) scale(1.05);box-shadow:0 15px 30px #0006;z-index:100}.card-selected{transform:translateY(-25px) scale(1.08);box-shadow:0 20px 40px #3b82f666;z-index:101}.card-disabled{opacity:.5;filter:grayscale(30%);cursor:not-allowed}.transition-all{transition:all .3s cubic-bezier(.4,0,.2,1)}.transition-fast{transition:all .15s cubic-bezier(.4,0,.2,1)}.transition-slow{transition:all .5s cubic-bezier(.4,0,.2,1)}.transition-transform{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.transition-opacity{transition:opacity .3s ease}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}.stagger-6{animation-delay:.3s}.stagger-7{animation-delay:.35s}.stagger-8{animation-delay:.4s}.stagger-9{animation-delay:.45s}.stagger-10{animation-delay:.5s}