@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--color-bg-primary:#0a0f1c;--color-bg-secondary:#111827;--color-bg-tertiary:#1a2235;--color-bg-card:#1e293b;--color-bg-elevated:#243044;--color-bg-hover:#2a3a52;--color-bg-overlay:#0009;--color-table:#1a3328;--color-table-light:#1f4032;--color-table-border:#2a5a44;--color-accent-primary:#38bdf8;--color-accent-primary-hover:#7dd3fc;--color-accent-secondary:#818cf8;--color-accent-success:#34d399;--color-accent-warning:#fbbf24;--color-accent-danger:#f87171;--color-accent-gold:#f59e0b;--color-text-primary:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-text-inverse:#0f172a;--color-suit-red:#ef4444;--color-suit-black:#f1f5f9;--color-border:#2d3a4f;--color-border-light:#3d4f6a;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 8px 24px #0006;--shadow-xl:0 16px 48px #00000080;--shadow-glow-blue:0 0 20px #38bdf826;--shadow-glow-green:0 0 20px #34d39926;--font-primary:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--z-base:0;--z-card:10;--z-overlay:100;--z-modal:200;--z-toast:300;--card-width:72px;--card-height:100px;--card-radius:6px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font-primary);font-size:var(--text-base);color:var(--color-text-primary);background-color:var(--color-bg-primary);min-height:100vh;line-height:1.6}a{color:var(--color-accent-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-accent-primary-hover)}.heading-1{font-size:var(--text-5xl);letter-spacing:-.03em;font-weight:800;line-height:1.1}.heading-2{font-size:var(--text-3xl);letter-spacing:-.02em;font-weight:700;line-height:1.2}.heading-3{font-size:var(--text-2xl);font-weight:600;line-height:1.3}.heading-4{font-size:var(--text-xl);font-weight:600;line-height:1.4}.text-gradient{background:linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.mono{font-family:var(--font-mono)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-primary);font-size:var(--text-sm);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid #0000;font-weight:600;line-height:1;display:inline-flex;position:relative;overflow:hidden}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg, var(--color-accent-primary) 0%, #0ea5e9 100%);color:var(--color-text-inverse);box-shadow:var(--shadow-md), 0 0 20px #38bdf833}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-lg), 0 0 30px #38bdf84d;transform:translateY(-1px)}.btn-secondary{background:var(--color-bg-elevated);color:var(--color-text-primary);border-color:var(--color-border-light)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-accent-primary)}.btn-danger{background:linear-gradient(135deg, var(--color-accent-danger) 0%, #dc2626 100%);color:#fff}.btn-danger:hover:not(:disabled){box-shadow:var(--shadow-lg), 0 0 20px #f871714d;transform:translateY(-1px)}.btn-success{background:linear-gradient(135deg, var(--color-accent-success) 0%, #10b981 100%);color:var(--color-text-inverse)}.btn-success:hover:not(:disabled){box-shadow:var(--shadow-lg), 0 0 20px #34d3994d;transform:translateY(-1px)}.btn-ghost{color:var(--color-text-secondary);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--color-bg-elevated);color:var(--color-text-primary)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-xl)}.input{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-primary);font-size:var(--text-base);color:var(--color-text-primary);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-fast);outline:none}.input:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #38bdf826}.input::placeholder{color:var(--color-text-muted)}.input-label{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-2);font-weight:500;display:block}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--transition-base)}.card:hover{border-color:var(--color-border-light);box-shadow:var(--shadow-md)}.card-elevated{background:var(--color-bg-elevated);box-shadow:var(--shadow-lg)}.modal-overlay{background:var(--color-bg-overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:var(--z-modal);animation:fadeIn var(--transition-base) forwards;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8);width:90%;max-width:480px;box-shadow:var(--shadow-xl);animation:slideUp var(--transition-spring) forwards}.modal-title{font-size:var(--text-2xl);margin-bottom:var(--space-4);font-weight:700}.badge{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;align-items:center;font-weight:600;display:inline-flex}.badge-blue{color:var(--color-accent-primary);background:#38bdf826}.badge-green{color:var(--color-accent-success);background:#34d39926}.badge-yellow{color:var(--color-accent-warning);background:#fbbf2426}.badge-red{color:var(--color-accent-danger);background:#f8717126}.badge-purple{color:var(--color-accent-secondary);background:#818cf826}.toast-container{top:var(--space-6);right:var(--space-6);z-index:var(--z-toast);gap:var(--space-3);flex-direction:column;display:flex;position:fixed}.toast{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow-lg);min-width:280px;animation:slideInRight var(--transition-spring) forwards;align-items:center;gap:var(--space-3);display:flex}.toast-exit{animation:slideOutRight var(--transition-base) forwards}.avatar{border-radius:var(--radius-full);width:40px;height:40px;font-weight:700;font-size:var(--text-sm);color:#fff;text-transform:uppercase;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.avatar-sm{width:32px;height:32px;font-size:var(--text-xs)}.avatar-lg{width:56px;height:56px;font-size:var(--text-xl)}.avatar-color-0{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.avatar-color-1{background:linear-gradient(135deg,#10b981,#059669)}.avatar-color-2{background:linear-gradient(135deg,#f59e0b,#d97706)}.avatar-color-3{background:linear-gradient(135deg,#ef4444,#dc2626)}.avatar-color-4{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.avatar-color-5{background:linear-gradient(135deg,#ec4899,#db2777)}.avatar-color-6{background:linear-gradient(135deg,#14b8a6,#0d9488)}.avatar-color-7{background:linear-gradient(135deg,#f97316,#ea580c)}.playing-card{width:var(--card-width);height:var(--card-height);border-radius:var(--card-radius);cursor:default;-webkit-user-select:none;user-select:none;transform-style:preserve-3d;transition:transform var(--transition-base);position:relative}.playing-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);position:relative}.playing-card.flipped .playing-card-inner{transform:rotateY(180deg)}.playing-card-front,.playing-card-back{border-radius:var(--card-radius);backface-visibility:hidden;width:100%;height:100%;position:absolute}.playing-card-front{box-shadow:var(--shadow-sm);background:#fff;border:1px solid #d4d4d8;flex-direction:column;padding:4px 5px;display:flex;overflow:hidden}.playing-card-front .card-corner{flex-direction:column;align-items:center;line-height:1;display:flex}.playing-card-front .card-corner-top{align-self:flex-start}.playing-card-front .card-corner-bottom{align-self:flex-end;margin-top:auto;transform:rotate(180deg)}.playing-card-front .card-rank{font-family:var(--font-primary);font-size:14px;font-weight:800}.playing-card-front .card-suit-small{font-size:12px;line-height:1}.playing-card-front .card-center{font-size:28px;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playing-card-front.suit-red{color:var(--color-suit-red)}.playing-card-front.suit-black{color:#1e293b}.playing-card-back{background:linear-gradient(135deg,#1e40af 0%,#3730a3 100%);border:2px solid #60a5fa;justify-content:center;align-items:center;display:flex;overflow:hidden;transform:rotateY(180deg)}.playing-card-back:before{content:"";border:1.5px solid #fff3;border-radius:3px;position:absolute;inset:4px}.playing-card-back:after{content:"♠";color:#ffffff26;font-size:24px}.playing-card.clickable{cursor:pointer}.playing-card.clickable:hover{z-index:var(--z-card);transform:translateY(-8px)}.playing-card.selected{box-shadow:0 0 0 2px var(--color-accent-primary), var(--shadow-lg);transform:translateY(-12px)}.playing-card.disabled{opacity:.5;cursor:not-allowed}.playing-card.disabled:hover{transform:none}.playing-card-sm{--card-width:52px;--card-height:73px;--card-radius:4px}.playing-card-sm .card-rank{font-size:11px}.playing-card-sm .card-suit-small{font-size:9px}.playing-card-sm .card-center{font-size:20px}.playing-card-lg{--card-width:96px;--card-height:134px;--card-radius:8px}.playing-card-lg .card-rank{font-size:18px}.playing-card-lg .card-suit-small{font-size:15px}.playing-card-lg .card-center{font-size:38px}.card-hand{padding:var(--space-4) 0;justify-content:center;align-items:flex-end;display:flex;position:relative}.card-hand .playing-card{transition:transform var(--transition-base), margin var(--transition-base);margin-left:-16px}.card-hand .playing-card:first-child{margin-left:0}.card-pile{width:var(--card-width);height:var(--card-height);position:relative}.card-pile .playing-card{position:absolute;top:0;left:0}.card-pile .playing-card:nth-child(2){top:-1px;left:1px}.card-pile .playing-card:nth-child(3){top:-2px;left:2px}.game-table{background:radial-gradient(ellipse at center, var(--color-table-light) 0%, var(--color-table) 70%, #132a20 100%);border:3px solid var(--color-table-border);border-radius:var(--radius-2xl);box-shadow:inset 0 2px 20px #0000004d, var(--shadow-xl);position:relative;overflow:hidden}.game-table:before{content:"";pointer-events:none;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.seat{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.seat-empty{border-radius:var(--radius-full);border:2px dashed var(--color-border-light);width:56px;height:56px;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.seat-empty:hover{border-color:var(--color-accent-primary);color:var(--color-accent-primary);background:#38bdf80d}.seat-name{font-size:var(--text-xs);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;text-align:center;max-width:80px;font-weight:600;overflow:hidden}.seat-bot .seat-name:before{content:"🤖 "}.seat-active{position:relative}.seat-active:after{content:"";border-radius:var(--radius-full);background:var(--color-accent-success);width:6px;height:6px;animation:2s ease-in-out infinite pulse;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.score-panel{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}.score-row{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.score-row:last-child{border-bottom:none}.score-value{font-family:var(--font-mono);font-weight:600;font-size:var(--text-lg)}.connection-indicator{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);display:flex}.connection-dot{border-radius:var(--radius-full);background:var(--color-text-muted);width:8px;height:8px}.connection-dot.connected{background:var(--color-accent-success);box-shadow:0 0 6px #34d39980}.connection-dot.disconnected{background:var(--color-accent-danger);box-shadow:0 0 6px #f8717180}.connection-dot.connecting{background:var(--color-accent-warning);animation:1.5s ease-in-out infinite pulse}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@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 slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes cardDeal{0%{opacity:0;transform:translate(-50%,-100px)rotate(-10deg)scale(.8)}to{opacity:1;transform:translate(0)rotate(0)scale(1)}}@keyframes cardFlip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes chipSlide{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.flex{display:flex}.flex-col{flex-direction:column}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.w-full{width:100%}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}@media (max-width:768px){:root{--card-width:56px;--card-height:78px;--card-radius:5px}.heading-1{font-size:var(--text-3xl)}.heading-2{font-size:var(--text-2xl)}.card-hand .playing-card{margin-left:-20px}}