:root{--color-bg: #f0f7ff;--color-bg-secondary: #e1effe;--color-bg-tertiary: #c8dffe;--color-text: #1e3a5f;--color-text-secondary: #4a6fa5;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-light: #60a5fa;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b;--color-red: #c41e3a;--color-yellow: #d4a017;--color-green: #1a7f4b;--color-black: #2c3e50;--color-rook: #1e40af;--color-accent-dark: #1e3a5f;--color-accent-medium: #3b6ea5;--color-accent-light: #7eb8e5;--color-surface: #ffffff;--color-surface-elevated: #f8fbff;--color-border: #bcd4f0;--color-shadow: rgba(30, 58, 95, .15);--card-width: 80px;--card-height: 112px;--card-radius: 10px;--font-family: "Georgia", "Times New Roman", serif;--font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-ui);background:linear-gradient(135deg,#e8f4ff,#f0f7ff,#e1effe);color:var(--color-text);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:var(--font-family-ui);cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px var(--color-shadow)}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 16px var(--color-shadow)}input,select{font-family:var(--font-family-ui);font-size:14px;padding:12px 16px;border:2px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);outline:none;transition:all .3s ease;box-shadow:inset 0 1px 3px #0000000d}input:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb26,inset 0 1px 3px #0000000d}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;border:1px solid var(--color-primary-hover)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-hover) 0%,#1e40af 100%)}.btn-secondary{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-bg-secondary) 100%);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-bg-secondary) 0%,var(--color-bg-tertiary) 100%)}.btn-success{background:linear-gradient(135deg,var(--color-success) 0%,#059669 100%);color:#fff}.btn-danger{background:linear-gradient(135deg,var(--color-error) 0%,#dc2626 100%);color:#fff}:root{--color-text-primary: #1e3a5f;--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 25px 8px #2563eb80,0 0 50px 15px #2563eb33}.thinking-dots{display:inline-flex;gap:3px}.thinking-dots span{width:8px;height:8px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border-radius:50%;animation:dotBounce 1.4s ease-in-out infinite;box-shadow:0 2px 4px #2563eb4d}@keyframes dotBounce{0%,80%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.1)}}@media (max-width: 768px){:root{--card-width: 55px;--card-height: 77px}button{min-height:44px;min-width:44px;padding:10px 14px;font-size:15px}input,select{min-height:44px;font-size:16px}.card-wrapper{min-width:44px;min-height:60px}.card-clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.score-board{font-size:12px;padding:6px}.turn-indicator{font-size:12px;padding:6px 12px}.game-container{padding:5px}}@media (max-width: 480px){:root{--card-width: 48px;--card-height: 67px}button{padding:8px 12px;font-size:14px}.player-avatar{width:40px;height:40px}}@media (max-height: 500px) and (orientation: landscape){:root{--card-width: 45px;--card-height: 63px}}@media (hover: none) and (pointer: coarse){button:hover:not(:disabled){transform:none}button:active:not(:disabled){transform:scale(.95);opacity:.9}}.game-board,.card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.player-hand{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}@supports (padding: env(safe-area-inset-bottom)){.game-controls{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}.card-wrapper{display:inline-block;border-radius:12px;box-shadow:0 4px 12px #1e3a5f26,0 2px 4px #1e3a5f1a,0 0 0 1px #2563eb0d;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s cubic-bezier(.25,.46,.45,.94),filter .25s ease;-webkit-user-select:none;user-select:none;overflow:hidden;will-change:transform,box-shadow;backface-visibility:hidden;background:linear-gradient(145deg,#fff,#f8fbff)}.card-wrapper svg{display:block}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-20px) scale(1.05) rotateX(5deg);box-shadow:0 25px 50px #1e3a5f33,0 15px 30px #2563eb26,0 0 0 2px #2563eb33,0 0 30px #2563eb1a;z-index:50}.card-clickable:active{transform:translateY(-14px) scale(1.03) rotateX(2deg);transition-duration:.12s}.card-dimmed{opacity:.45;filter:saturate(.5) brightness(.95);cursor:not-allowed}.card-dimmed:hover{transform:none;box-shadow:0 4px 12px #1e3a5f1a,0 2px 4px #1e3a5f14}.card-selected{transform:translateY(-24px) scale(1.04);box-shadow:0 20px 45px #2563eb59,0 10px 25px #2563eb40,0 0 0 3px var(--color-primary),0 0 40px #2563eb33}.card-selected.card-clickable:hover{transform:translateY(-26px) scale(1.06);box-shadow:0 25px 55px #2563eb66,0 15px 35px #2563eb4d,0 0 0 3px var(--color-primary),0 0 50px #2563eb40}.card-playable-glow{box-shadow:0 4px 12px #1e3a5f26,0 0 20px #2563eb40,0 0 40px #2563eb1a;animation:playableGlow 2s ease-in-out infinite}@keyframes playableGlow{0%,to{box-shadow:0 4px 12px #1e3a5f26,0 0 20px #2563eb33,0 0 40px #2563eb14}50%{box-shadow:0 4px 12px #1e3a5f26,0 0 30px #2563eb59,0 0 60px #2563eb26}}.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 16px #1e3a5f1f,0 2px 6px #1e3a5f14;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;-webkit-user-select:none;user-select:none}.card-red{background:linear-gradient(145deg,#e63950,#c41e3a);color:#fff}.card-yellow{background:linear-gradient(145deg,#f0c040,#d4a017);color:#1e3a5f}.card-green{background:linear-gradient(145deg,#2db867,#1a7f4b);color:#fff}.card-black{background:linear-gradient(145deg,#4a6278,#2c3e50);color:#fff;border:1px solid #5a7a96}.card-rook{background:linear-gradient(145deg,#3b82f6,#1e40af);color:#fff;border:2px solid #f59e0b;box-shadow:0 4px 20px #1e40af59,0 0 0 1px #f59e0b4d}.card-back{background:linear-gradient(145deg,#1e40af,#172554);border:2px solid #3b82f6}.card-back:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.03) 10px,rgba(255,255,255,.03) 20px)}.card-corner{position:absolute;font-size:12px;font-weight:600;font-family:Georgia,Times New Roman,serif}.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:.7;transform:scale(.85) translateY(20px) rotateX(15deg)}40%{opacity:1;transform:scale(1.08) translateY(-5px) rotateX(-3deg)}70%{transform:scale(1.02) translateY(0) rotateX(1deg)}to{opacity:1;transform:scale(1) translateY(0) rotateX(0)}}.card-played{animation:cardPlaySmooth .45s cubic-bezier(.34,1.56,.64,1)}@keyframes cardFlipSmooth{0%{transform:perspective(600px) rotateY(0) scale(1)}25%{transform:perspective(600px) rotateY(45deg) scale(1.05)}50%{transform:perspective(600px) rotateY(90deg) scale(1.1);box-shadow:0 20px 40px #1e3a5f4d}75%{transform:perspective(600px) rotateY(45deg) scale(1.05)}to{transform:perspective(600px) rotateY(0) scale(1)}}.card-reveal{animation:cardFlipSmooth .6s ease-in-out}@keyframes cardDealSmooth{0%{opacity:0;transform:translateY(-80px) rotate(-20deg) scale(.6);filter:blur(4px)}30%{opacity:.8;filter:blur(1px)}60%{opacity:1;transform:translateY(8px) rotate(4deg) scale(1.03);filter:blur(0)}80%{transform:translateY(-3px) rotate(-1deg) scale(1.01)}to{transform:translateY(0) rotate(0) scale(1)}}.card-deal{animation:cardDealSmooth .5s 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 20px 4px #2563eb66,0 0 40px 8px #2563eb33,0 0 0 2px #2563eb80;transform:scale(1)}50%{box-shadow:0 0 35px 8px #2563eb99,0 0 70px 16px #2563eb4d,0 0 0 3px #2563ebb3;transform:scale(1.02)}}.card-trick-winner{animation:trickWinnerPulse 1.2s ease-in-out infinite;z-index:10}@keyframes cardCollect{0%{opacity:1;transform:scale(1) rotate(0)}30%{opacity:.9;transform:scale(.9) rotate(5deg)}60%{opacity:.6;transform:scale(.7) translateY(-30px) rotate(-3deg)}to{opacity:0;transform:scale(.4) translateY(-60px) rotate(8deg)}}.card-collecting{animation:cardCollect .6s ease-out forwards}@keyframes cardShake{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-8px) rotate(-2deg)}20%{transform:translate(8px) rotate(2deg)}30%{transform:translate(-6px) rotate(-1.5deg)}40%{transform:translate(6px) rotate(1.5deg)}50%{transform:translate(-4px) rotate(-1deg)}60%{transform:translate(4px) rotate(1deg)}70%{transform:translate(-2px) rotate(-.5deg)}80%{transform:translate(2px) rotate(.5deg)}}.card-shake{animation:cardShake .5s ease-in-out}@keyframes cardEntrance{0%{opacity:0;transform:translateY(40px) scale(.8);filter:blur(3px)}60%{opacity:1;transform:translateY(-5px) scale(1.02);filter:blur(0)}to{transform:translateY(0) scale(1)}}.card-entrance{animation:cardEntrance .4s cubic-bezier(.34,1.56,.64,1)}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.card-float{animation:cardFloat 3s ease-in-out infinite}@keyframes cardShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.card-shimmer:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);background-size:200% 100%;animation:cardShimmer 2s ease-in-out infinite;border-radius:inherit;pointer-events:none}*{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(40px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes scaleInBounce{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.05)}80%{transform:scale(.98)}to{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 #2563eb66}50%{box-shadow:0 0 0 12px #2563eb00}}@keyframes bluePulse{0%,to{box-shadow:0 0 20px #2563eb4d,0 0 40px #2563eb1a}50%{box-shadow:0 0 35px #2563eb80,0 0 70px #2563eb33}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cardDeal{0%{opacity:0;transform:translateY(-100px) scale(.6) rotate(-15deg);filter:blur(4px)}40%{opacity:.9;filter:blur(1px)}70%{opacity:1;transform:translateY(8px) scale(1.02) rotate(2deg);filter:blur(0)}85%{transform:translateY(-4px) scale(1.01) rotate(-1deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@keyframes cardPlayToCenter{0%{opacity:.7;transform:scale(.8) translateY(30px)}30%{opacity:1;transform:scale(1.1) translateY(-10px)}60%{transform:scale(1.05) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes cardLift{0%{transform:translateY(0) scale(1);box-shadow:0 4px 12px #1e3a5f26}to{transform:translateY(-18px) scale(1.05);box-shadow:0 20px 40px #1e3a5f40}}@keyframes winnerGlow{0%,to{box-shadow:0 0 25px 6px #2563eb66,0 0 50px 12px #2563eb33}50%{box-shadow:0 0 40px 12px #2563eb99,0 0 80px 20px #2563eb4d}}@keyframes collectTrick{0%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.7;transform:scale(.8) rotate(10deg) translateY(-20px)}to{opacity:0;transform:scale(.4) rotate(20deg) translateY(-50px)}}@keyframes turnGlow{0%,to{box-shadow:0 0 20px 4px #2563eb66,inset 0 0 10px #2563eb1a}50%{box-shadow:0 0 35px 8px #2563eb99,inset 0 0 15px #2563eb26}}@keyframes scorePop{0%{transform:scale(1)}20%{transform:scale(1.35)}40%{transform:scale(.95)}60%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.8;transform:translateY(-25px) scale(1.1)}to{opacity:0;transform:translateY(-50px) scale(.9)}}@keyframes pointsBurst{0%{opacity:0;transform:scale(.5) translateY(20px)}20%{opacity:1;transform:scale(1.2) translateY(-10px)}to{opacity:0;transform:scale(1) translateY(-60px)}}@keyframes shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-10px)}30%,70%{transform:translate(10px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}40%{transform:scale(1.1)}60%{transform:scale(.95)}80%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes elegantAppear{0%{opacity:0;transform:scale(.9) translateY(10px);filter:blur(2px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}@keyframes ripple{0%{transform:scale(1);opacity:.6}to{transform:scale(2.5);opacity:0}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn .4s ease-out}.animate-fade-out{animation:fadeOut .3s ease-out forwards}.animate-slide-up{animation:slideUp .5s cubic-bezier(.16,1,.3,1)}.animate-slide-down{animation:slideDown .5s cubic-bezier(.16,1,.3,1)}.animate-slide-left{animation:slideInLeft .5s cubic-bezier(.16,1,.3,1)}.animate-slide-right{animation:slideInRight .5s cubic-bezier(.16,1,.3,1)}.animate-scale-in{animation:scaleIn .4s cubic-bezier(.16,1,.3,1)}.animate-scale-bounce{animation:scaleInBounce .5s cubic-bezier(.34,1.56,.64,1)}.animate-pulse{animation:pulse 2.5s ease-in-out infinite}.animate-gentle-pulse{animation:gentlePulse 2s ease-in-out infinite}.animate-blue-pulse{animation:bluePulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-spin-slow{animation:spinSlow 3s linear infinite}.animate-card-deal{animation:cardDeal .6s cubic-bezier(.34,1.56,.64,1)}.animate-card-play{animation:cardPlayToCenter .45s cubic-bezier(.34,1.56,.64,1)}.animate-bounce-in{animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}.animate-shake{animation:shake .5s ease-in-out}.animate-elegant{animation:elegantAppear .5s ease-out}.trick-winner{animation:winnerGlow 1.2s ease-in-out infinite}.current-turn{animation:turnGlow 2s ease-in-out infinite}.score-changed{animation:scorePop .5s cubic-bezier(.34,1.56,.64,1)}.thinking-dots{display:inline-flex;gap:5px;align-items:center}.thinking-dots span{width:10px;height:10px;background:linear-gradient(135deg,#3b82f6,#1e40af);border-radius:50%;animation:dotBounce 1.4s ease-in-out infinite;box-shadow:0 2px 6px #2563eb59}.thinking-dots span:nth-child(1){animation-delay:0s}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,60%,to{transform:translateY(0) scale(1);opacity:.5}30%{transform:translateY(-14px) scale(1.15);opacity:1}}.card-playable{cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}.card-playable:hover{transform:translateY(-22px) scale(1.06);box-shadow:0 20px 45px #1e3a5f40,0 0 0 2px #2563eb26;z-index:100}.card-selected{transform:translateY(-28px) scale(1.08);box-shadow:0 25px 55px #2563eb59,0 0 0 3px var(--color-primary);z-index:101}.card-disabled{opacity:.45;filter:grayscale(35%) brightness(.95);cursor:not-allowed}.transition-all{transition:all .35s cubic-bezier(.4,0,.2,1)}.transition-fast{transition:all .18s cubic-bezier(.4,0,.2,1)}.transition-slow{transition:all .6s cubic-bezier(.4,0,.2,1)}.transition-transform{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.transition-opacity{transition:opacity .35s ease}.transition-shadow{transition:box-shadow .35s 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}.stagger-11{animation-delay:.55s}.stagger-12{animation-delay:.6s}.loading-spinner{width:40px;height:40px;border:3px solid rgba(37,99,235,.15);border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}.loading-spinner-small{width:24px;height:24px;border-width:2px}.hover-lift{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}.hover-lift:hover{transform:translateY(-6px);box-shadow:0 12px 30px #1e3a5f26}.hover-glow{transition:box-shadow .3s ease}.hover-glow:hover{box-shadow:0 0 25px #2563eb4d,0 0 50px #2563eb1a}.entrance-fade{animation:fadeIn .5s ease-out}.entrance-slide-up{animation:slideUp .5s cubic-bezier(.16,1,.3,1)}.entrance-bounce{animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}.entrance-elegant{animation:elegantAppear .5s ease-out}