:root{--color-bg: #0a0a0f;--color-bg-elevated: #12121a;--color-bg-surface: #1a1a2e;--color-text-primary: #e2e8f0;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-purple: #8b5cf6;--color-purple-dim: rgba(139, 92, 246, .15);--color-purple-glow: rgba(139, 92, 246, .4);--color-teal: #06b6d4;--color-teal-dim: rgba(6, 182, 212, .12);--color-green: #22c55e;--color-green-dim: rgba(34, 197, 94, .12);--color-red: #dc2626;--color-red-dim: rgba(220, 38, 38, .12);--color-amber: #f59e0b;--color-amber-dim: rgba(245, 158, 11, .12);--color-white: #ffffff;--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .08);--glass-blur: 12px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--transition-fast: .15s ease;--transition-normal: .25s ease;--font-heading: "Outfit", sans-serif;--font-mono: "IBM Plex Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-heading);font-size:16px;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;outline:none}input{font-family:inherit;outline:none;border:none}ul,ol{list-style:none}.app{max-width:1000px;margin:0 auto;padding:var(--space-lg) var(--space-md)}.app-header{text-align:center;padding:var(--space-2xl) 0 var(--space-lg)}.app-title{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;background:linear-gradient(135deg,var(--color-purple),var(--color-teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-sm)}.app-subtitle{color:var(--color-text-secondary);font-size:1.05rem;margin-bottom:var(--space-lg)}.tab-nav{display:flex;border-bottom:1px solid var(--glass-border);margin-bottom:var(--space-xl);gap:var(--space-xs)}.tab-btn{background:transparent;color:var(--color-text-secondary);font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);flex:1}.tab-btn:hover{color:var(--color-text-primary);background:#8b5cf614}.tab-btn--active,.tab-btn.tab-btn--active{background:var(--color-purple);color:var(--color-white);box-shadow:0 0 16px var(--color-purple-glow)}.hand-setter{max-width:100%}.instructions-panel{background:var(--color-purple-dim);border:1px solid rgba(139,92,246,.2);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.instructions-panel h3{font-size:1.1rem;margin-bottom:var(--space-md);color:var(--color-text-primary)}.instructions-panel p{color:var(--color-text-secondary);margin-bottom:var(--space-sm);line-height:1.7}.example-text{color:var(--color-teal);font-family:var(--font-mono)}.input-row{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);align-items:stretch}.hand-input{flex:1;padding:var(--space-md);background:var(--color-bg-elevated);color:var(--color-text-primary);font-family:var(--font-mono);font-size:1.1rem;border:2px solid var(--glass-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.hand-input:focus{border-color:var(--color-purple);box-shadow:0 0 0 3px var(--color-purple-glow)}.hand-input::placeholder{color:var(--color-text-muted)}.analyze-btn{padding:var(--space-md) var(--space-xl);background:linear-gradient(135deg,var(--color-purple),#7c3aed);color:var(--color-white);font-family:var(--font-mono);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--radius-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast);white-space:nowrap}.analyze-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px var(--color-purple-glow)}.analyze-btn:disabled{opacity:.5;cursor:not-allowed}.loading-spinner{display:flex;flex-direction:column;align-items:center;padding:var(--space-2xl);gap:var(--space-md);color:var(--color-text-secondary)}.spinner{width:48px;height:48px;border:3px solid var(--glass-border);border-top-color:var(--color-purple);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-message{background:var(--color-red-dim);border:1px solid rgba(220,38,38,.25);border-radius:var(--radius-md);padding:var(--space-lg);color:#f87171;margin-bottom:var(--space-lg)}.result-panel{background:var(--glass-bg);border:1px solid rgba(34,197,94,.2);border-radius:var(--radius-lg);padding:var(--space-lg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}.joker-value{background:var(--color-purple-dim);border:1px solid rgba(139,92,246,.2);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg);color:var(--color-text-secondary);text-align:center}.joker-value strong{color:var(--color-teal)}.alert{border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);text-align:center;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-md)}.alert-paigow{background:var(--color-purple-dim);border:1px solid rgba(139,92,246,.25);color:var(--color-purple)}.alert-wheel{background:var(--color-amber-dim);border:1px solid rgba(245,158,11,.25);color:var(--color-amber)}.hand-display{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}.hand-section{background:var(--color-bg-elevated);border-radius:var(--radius-md);padding:var(--space-lg)}.hand-section h4{font-size:.9rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);margin-bottom:var(--space-md)}.hand-type-label{color:var(--color-green);font-weight:700}.card-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.rule-section{background:var(--color-teal-dim);border:1px solid rgba(6,182,212,.2);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg)}.rule-applied{color:var(--color-purple);margin-bottom:var(--space-xs)}.explanation{color:var(--color-text-secondary);font-size:.9rem;line-height:1.6}.feedback-section{display:flex;align-items:center;gap:var(--space-md);padding-top:var(--space-lg);border-top:1px solid var(--glass-border);flex-wrap:wrap}.feedback-section span{color:var(--color-text-secondary);font-size:.9rem}.feedback-btn{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--color-text-secondary);padding:var(--space-sm) var(--space-lg);font-size:.9rem;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.feedback-btn.correct:hover{background:var(--color-green-dim);border-color:#22c55e66;color:var(--color-green)}.feedback-btn.incorrect:hover{background:var(--color-red-dim);border-color:#dc262666;color:var(--color-red)}.feedback-msg{color:var(--color-teal);font-size:.9rem;margin-top:var(--space-sm);width:100%}.playing-card{width:70px;height:100px;background:var(--color-white);border-radius:var(--radius-sm);box-shadow:0 2px 8px #0000004d;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:4px 6px;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast);font-family:var(--font-mono);font-weight:700}.playing-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px #00000073}.playing-card.small{width:50px;height:70px;padding:2px 4px;cursor:default}.playing-card.red{color:var(--color-red)}.playing-card.black{color:#1f2937}.playing-card.joker{background:linear-gradient(135deg,var(--color-purple),#7c3aed);color:var(--color-white)}.playing-card.dragging{opacity:.4;cursor:grabbing}.card-corner{display:flex;flex-direction:column;align-items:center;line-height:1}.card-corner.top-left{align-self:flex-start}.card-corner.bottom-right{align-self:flex-end;transform:rotate(180deg)}.card-rank{font-size:.85rem}.card-suit{font-size:.7rem}.card-center{font-size:1.6rem;line-height:1}.card-suit-large{font-size:1.6rem}.playing-card.small .card-rank{font-size:.7rem}.playing-card.small .card-suit{font-size:.55rem}.playing-card.small .card-center,.playing-card.small .card-suit-large{font-size:1.1rem}.practice-mode{max-width:100%}.practice-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-xl);position:relative}.stat-item{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-lg) var(--space-md);text-align:center;display:flex;flex-direction:column-reverse}.stat-value{font-family:var(--font-mono);font-size:2rem;font-weight:700;color:var(--color-teal);line-height:1}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:var(--space-xs)}.btn-reset-stats{position:absolute;top:-8px;right:0;background:transparent;color:var(--color-text-muted);font-size:.75rem;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:color var(--transition-fast)}.btn-reset-stats:hover{color:var(--color-red)}.practice-deal-section{text-align:center;padding:var(--space-2xl) 0}.btn-deal{padding:var(--space-md) var(--space-2xl);background:linear-gradient(135deg,var(--color-purple),#7c3aed);color:var(--color-white);font-family:var(--font-mono);font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--radius-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-deal:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--color-purple-glow)}.btn-check{padding:var(--space-md) var(--space-2xl);background:linear-gradient(135deg,var(--color-green),#16a34a);color:var(--color-white);font-family:var(--font-mono);font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--radius-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast)}.btn-check:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #22c55e66}.btn-check:disabled{opacity:.4;cursor:not-allowed}.practice-zone{margin-bottom:var(--space-lg)}.practice-zone h3{font-size:.85rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-sm)}.practice-card-list{display:flex;flex-wrap:wrap;gap:var(--space-sm);min-height:120px;background:var(--color-bg-elevated);border:2px dashed var(--glass-border);border-radius:var(--radius-md);padding:var(--space-md);align-items:center;justify-content:center;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.practice-card-list.drag-over{border-color:var(--color-purple);box-shadow:0 0 16px var(--color-purple-glow);background:var(--color-purple-dim)}.zone-placeholder{color:var(--color-text-muted);font-size:.85rem;font-style:italic}.practice-hands{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}.practice-actions{text-align:center;margin-bottom:var(--space-xl)}.practice-error{background:var(--color-red-dim);border:1px solid rgba(220,38,38,.25);border-radius:var(--radius-md);padding:var(--space-md);color:#f87171;margin-bottom:var(--space-lg)}.practice-result{background:var(--glass-bg);border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--glass-border)}.practice-result h3{text-align:center;font-size:1.3rem;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--glass-border)}.practice-result.correct h3{color:var(--color-green)}.practice-result.incorrect h3{color:var(--color-red)}.result-comparison{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}.result-column{background:var(--color-bg-elevated);border-radius:var(--radius-md);padding:var(--space-lg)}.result-column h4{font-size:.8rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-md)}.result-hand{margin-bottom:var(--space-md)}.hand-label{display:block;font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-xs)}.result-explanation{background:var(--color-teal-dim);border:1px solid rgba(6,182,212,.2);border-radius:var(--radius-md);padding:var(--space-md)}.result-explanation h4{font-size:.8rem;color:var(--color-teal);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-sm)}.result-explanation p{color:var(--color-text-secondary);font-size:.9rem;line-height:1.6}@media(max-width:768px){.app-title{font-size:1.7rem}.input-row{flex-direction:column}.hand-display{grid-template-columns:1fr}.practice-stats{grid-template-columns:repeat(2,1fr)}.practice-hands,.result-comparison{grid-template-columns:1fr}.playing-card{width:58px;height:84px}.playing-card.small{width:42px;height:60px}.tab-btn{font-size:.75rem;padding:var(--space-sm)}}.hidden{display:none!important}.home-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-xl)}.home-page h1{font-size:3.5rem;font-weight:700;margin-bottom:var(--space-md);background:linear-gradient(135deg,#a855f7,#6366f1,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-page p{color:var(--color-text-secondary);font-size:1.1rem;margin-bottom:var(--space-xl)}.home-page nav{display:flex;gap:var(--space-lg)}.home-page nav a{color:var(--color-text-primary);text-decoration:none;padding:var(--space-sm) var(--space-lg);border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--glass-bg);transition:all .2s ease}.home-page nav a:hover{background:#ffffff14;border-color:var(--color-purple);color:var(--color-purple)}.blog-page{min-height:100vh;padding:var(--space-xl);max-width:800px;margin:0 auto}.blog-header{margin-bottom:var(--space-2xl)}.blog-home-link{color:var(--color-text-muted);text-decoration:none;font-size:.9rem;transition:color .2s}.blog-home-link:hover{color:var(--color-purple)}.blog-header h1{font-size:2.5rem;font-weight:700;margin-top:var(--space-md);margin-bottom:var(--space-sm)}.blog-subtitle{color:var(--color-text-muted)}.blog-empty{color:var(--color-text-muted);text-align:center;padding:var(--space-xl)}.post-list{display:flex;flex-direction:column;gap:var(--space-md)}.post-item{border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--glass-bg);transition:all .2s ease}.post-item:hover{border-color:var(--color-purple);background:#ffffff0f}.post-link{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);text-decoration:none;color:inherit}.post-date{color:var(--color-text-muted);font-size:.85rem;font-family:var(--font-mono)}.post-title{color:var(--color-text-primary);font-weight:500}.post-description{display:block;color:var(--color-text-muted);font-size:.85rem;margin-top:var(--space-xs);line-height:1.4}.blog-post h1{font-size:2rem;margin-bottom:var(--space-sm)}.blog-post .post-date{display:block;margin-bottom:var(--space-xl);color:var(--color-text-muted);font-family:var(--font-mono);font-size:.85rem}.post-content{color:var(--color-text-secondary);line-height:1.8}.post-content h2{color:var(--color-text-primary);margin-top:var(--space-xl);margin-bottom:var(--space-md)}.post-content p{margin-bottom:var(--space-md)}.post-content ul,.post-content ol{margin-left:var(--space-xl);margin-bottom:var(--space-md)}.post-content li{margin-bottom:var(--space-sm)}.post-content code{font-family:var(--font-mono);background:var(--color-bg-elevated);padding:2px 6px;border-radius:4px;font-size:.9em}.post-content pre{background:var(--color-bg-elevated);padding:var(--space-md);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--space-md)}.post-content pre code{background:none;padding:0}.post-content a{color:var(--color-purple);text-decoration:none}.post-content a:hover{text-decoration:underline}