: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(1){animation-delay:0s}@keyframes dotBounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}}.card-wrapper{display:inline-block;border-radius:8px;box-shadow:0 2px 8px #0000004d;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;overflow:hidden}.card-wrapper svg{display:block}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 12px 24px #0006}.card-dimmed{opacity:.4;cursor:not-allowed}.card-dimmed:hover{transform:none;box-shadow:0 2px 8px #0000004d}.card-selected{transform:translateY(-14px);box-shadow:0 12px 28px #3b82f699;outline:3px solid var(--color-primary);outline-offset:-1px}.card-selected.card-clickable:hover{transform:translateY(-14px) scale(1.02)}.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 2px 8px #0000004d;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none}.card-red{background:var(--color-red);color:#fff}.card-yellow{background:var(--color-yellow);color:#1e293b}.card-green{background:var(--color-green);color:#fff}.card-black{background:var(--color-black);color:#fff;border:1px solid #475569}.card-rook{background:linear-gradient(135deg,var(--color-rook),#a855f7);color:#fff;border:2px solid #ffd700}.card-back{background:linear-gradient(135deg,#1e3a5f,#0f172a);border:2px solid #334155}.card-back:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px solid #475569;border-radius:4px}.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 cardPlay{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.card-played{animation:cardPlay .3s ease}@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.card-reveal{animation:cardFlip .4s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cardDeal{0%{opacity:0;transform:translateY(-50px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes cardPlay{0%{transform:scale(1.1)}to{transform:scale(1)}}.animate-fade-in{animation:fadeIn .3s ease}.animate-slide-up{animation:slideUp .3s ease}.animate-slide-down{animation:slideDown .3s ease}.animate-pulse{animation:pulse 1.5s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-card-deal{animation:cardDeal .4s ease}.animate-card-play{animation:cardPlay .2s ease}.thinking-dots{display:inline-flex;gap:4px}.thinking-dots span{width:8px;height:8px;background:var(--color-primary);border-radius:50%;animation:pulse 1s ease-in-out infinite}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}