:root{--primary: #00f5a0;--primary-dark: #00c97f;--primary-glow: rgba(0, 245, 160, .4);--bg-main: #0a0e1a;--bg-elevated: #131824;--bg-card: #1a1f2e;--bg-overlay: rgba(10, 14, 26, .95);--glass: rgba(26, 31, 46, .8);--glass-border: rgba(255, 255, 255, .08);--text-primary: #ffffff;--text-secondary: #a0aec0;--text-muted: #718096;--success: #00f5a0;--warning: #fbbf24;--error: #f87171;--chip-1: #7a8599;--chip-5: #ef4444;--chip-25: #22c55e;--chip-100: #3b82f6;--chip-500: #8b5cf6;--chip-1000: #f59e0b;--font-display: "Space Grotesk", sans-serif;--font-body: "Outfit", sans-serif;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition: .2s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font-body);background:var(--bg-main);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none}.app-container{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at top,rgba(0,245,160,.05) 0%,transparent 50%),linear-gradient(180deg,var(--bg-main) 0%,#050810 100%)}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;position:sticky;top:0;z-index:100}.header-left,.header-right{display:flex;align-items:center;gap:1.5rem}.logo{display:flex;align-items:center;gap:.75rem}.logo-img{width:12rem;height:3.5rem;object-fit:contain}.logo-text{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--primary);letter-spacing:-.5px}.count-display{display:flex;gap:1rem;padding:.5rem 1rem;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--glass-border)}.count-item{display:flex;flex-direction:column;align-items:center;gap:.125rem}.count-label{font-size:.625rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.count-value{font-size:1.125rem;font-weight:700;color:var(--primary);font-family:var(--font-display)}.count-value.positive{color:var(--success)}.count-value.negative{color:var(--error)}.header-center{flex:1;display:flex;justify-content:center}.stats-compact{display:flex;align-items:center;gap:.75rem;padding:.5rem 1.5rem;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--glass-border)}.stat-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.stat-label{color:var(--text-secondary);font-weight:500}.stat-value{color:var(--text-primary);font-weight:700;font-family:var(--font-display)}.stat-value.accent{color:var(--primary)}.stat-divider{width:1px;height:20px;background:var(--glass-border)}.modal-shortcuts{max-width:500px;width:90%}.shortcuts-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;padding:1rem}.shortcut-group{display:flex;flex-direction:column;gap:.5rem}.shortcut-group-title{font-family:var(--font-display);font-size:.75rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.25rem;padding-bottom:.25rem;border-bottom:1px solid var(--glass-border)}.shortcut-row{display:flex;align-items:center;gap:.75rem;font-size:.8125rem;color:var(--text-secondary)}.shortcut-row kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:.25rem .5rem;background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:6px;font-family:var(--font-display);font-size:.6875rem;font-weight:600;color:var(--text-primary);box-shadow:0 2px 0 var(--bg-card)}.penetration-bar{position:relative;width:60px;height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;border:1px solid var(--glass-border)}.penetration-fill{height:100%;background:linear-gradient(90deg,var(--primary) 0%,var(--warning) 70%,var(--error) 100%);border-radius:3px;transition:width .3s ease;width:0%}.penetration-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.5rem;font-weight:700;color:var(--text-primary);text-shadow:0 1px 2px rgba(0,0,0,.8);opacity:0;transition:opacity .2s ease}.penetration-bar:hover .penetration-label{opacity:1}.penetration-bar.high .penetration-fill{animation:penetration-pulse 1.5s ease-in-out infinite}@keyframes penetration-pulse{0%,to{opacity:1}50%{opacity:.7}}.action-btn.wrong-play{animation:wrong-play-shake .5s ease-in-out}@keyframes wrong-play-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.wrong-play-flash{position:fixed;inset:0;background:#ef44441a;pointer-events:none;z-index:9999;animation:wrong-flash .3s ease-out forwards}@keyframes wrong-flash{0%{opacity:1}to{opacity:0}}.hint-badge.deviation{background:var(--warning);background:linear-gradient(145deg,#fcd34d,#f59e0b);border-color:#f59e0b;color:#000;box-shadow:0 0 15px #f59e0b66}.hint-badge.deviation i{color:#000}.card.dealing{opacity:0;animation:deal-card-arc .35s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes deal-card-arc{0%{opacity:0;transform:translate(80px,-60px) rotate(15deg) scale(.8)}15%{opacity:1}70%{transform:translate(10px,-10px) rotate(3deg) scale(1.02)}to{opacity:1;transform:translate(0) rotate(0) scale(1)}}.cards-area .card:nth-child(1){animation-delay:0s}.cards-area .card:nth-child(2){animation-delay:.12s}.cards-area .card:nth-child(3){animation-delay:.24s}.cards-area .card:nth-child(4){animation-delay:.36s}.cards-area .card:nth-child(5){animation-delay:.48s}.cards-area .card:nth-child(6){animation-delay:.6s}.cards-area .card:nth-child(7){animation-delay:.72s}.cards-area .card:nth-child(8){animation-delay:.84s}.dealer-zone .card.dealing{opacity:0;animation-name:deal-card-dealer}@keyframes deal-card-dealer{0%{opacity:0;transform:translate(60px,-40px) rotate(10deg) scale(.85)}15%{opacity:1}to{opacity:1;transform:translate(0) rotate(0) scale(1)}}.dealer-zone .card.dealing.flipped{opacity:0;animation-name:deal-card-dealer-flipped}@keyframes deal-card-dealer-flipped{0%{opacity:0;transform:translate(60px,-40px) rotate(10deg) scale(.85) rotateY(180deg)}15%{opacity:1}to{opacity:1;transform:translate(0) rotate(0) scale(1) rotateY(180deg)}}.player-zone .card.dealing{opacity:0;animation-name:deal-card-player}@keyframes deal-card-player{0%{opacity:0;transform:translate(50px,-80px) rotate(-8deg) scale(.85)}15%{opacity:1}to{opacity:1;transform:translate(0) rotate(0) scale(1)}}