*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:20px}.practice-mode{text-align:center}.practice-mode h1{font-size:2.5rem;margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.connection-status{padding:20px;background:#ffffff1a;border-radius:8px;font-size:1.2rem}.mode-selection{background:#ffffff1a;padding:40px;border-radius:12px;max-width:500px;margin:0 auto}.mode-selection h2{margin-bottom:20px}.mode-options{display:flex;flex-direction:column;gap:15px;margin:30px 0;text-align:left}.mode-options label{font-size:1.1rem;cursor:pointer;padding:15px;background:#ffffff0d;border-radius:8px;transition:background .2s}.mode-options label:hover{background:#ffffff1a}.mode-options input[type=radio]{margin-right:10px;width:20px;height:20px;cursor:pointer}.game-table{background:#0000004d;padding:30px;border-radius:12px;margin:20px 0}.dealer-section,.player-section{margin:30px 0;min-height:180px;padding:15px;border-radius:8px;transition:background .3s,box-shadow .3s}.dealer-section.active{background:#4caf5033;box-shadow:0 0 15px #4caf5066}.hand{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:20px 0;position:relative;min-height:120px}@media (max-width: 768px){.hand .card{margin-left:-30px}}.card{width:80px;height:120px;background:#fff;color:#000;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;box-shadow:0 4px 8px #0000004d;transition:transform .2s}.card:hover{transform:translateY(-5px)}.card-back{background:repeating-linear-gradient(45deg,#1e40af,#1e40af 10px,#3b82f6 10px,#3b82f6 20px);border:2px solid #1e3a8a}.split-hands{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}.split-hand{display:flex;flex-direction:column;align-items:center;padding:15px;border-radius:8px;background:#ffffff0d;transition:background .3s}.split-hand.active{background:#4caf5033;box-shadow:0 0 15px #4caf5066}.hand-header-small{font-size:.9rem;margin-bottom:10px;color:#fffc}.count-display{display:flex;gap:30px;justify-content:center;margin:30px 0;padding:20px;background:#ffffff1a;border-radius:8px}.count-item{display:flex;flex-direction:column;gap:5px}.count-item label{font-size:.9rem;opacity:.8}.count-value{font-size:2rem;font-weight:700;color:#4ade80}.actions{display:flex;gap:15px;justify-content:center;margin:30px 0}.game-controls{display:flex;gap:15px;justify-content:center;margin-top:30px}.btn{padding:12px 30px;font-size:1.1rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600}.btn-primary{background:#4ade80;color:#000}.btn-primary:hover{background:#22c55e;transform:translateY(-2px);box-shadow:0 6px 12px #4ade804d}.btn-secondary{background:#fff3;color:#fff}.btn-secondary:hover{background:#ffffff4d}.btn-hit{background:#3b82f6;color:#fff}.btn-stand{background:#ef4444;color:#fff}.btn-double{background:#f59e0b;color:#fff}.btn-split{background:#8b5cf6;color:#fff}.btn-hit:hover,.btn-stand:hover,.btn-double:hover,.btn-split:hover{opacity:.9;transform:translateY(-2px)}.ready-state{background:#ffffff1a;padding:40px;border-radius:12px;max-width:500px;margin:0 auto}.ready-state h2{margin-bottom:15px}.ready-state p{margin-bottom:30px;font-size:1.1rem;opacity:.9}.ready-state button{margin:10px}.session-stats{display:flex;gap:30px;justify-content:center;padding:20px;background:#ffffff1a;border-radius:8px;margin-bottom:20px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:5px}.stat-label{font-size:.9rem;opacity:.8;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.8rem;font-weight:700;color:#4ade80}.btn-warning{background:#f59e0b;color:#000}.btn-warning:hover{background:#d97706;transform:translateY(-2px)}.stat-item{display:flex;flex-direction:column;gap:5px}.stat-label{font-size:.9rem;opacity:.8}.stat-value{font-size:1.5rem;font-weight:700;color:#4ade80}.feedback-icon{font-size:2rem;font-weight:700}.feedback-text strong{color:#fbbf24;text-transform:uppercase}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover{background:#d97706}.session-finished{background:#4ade8033;padding:40px;border-radius:12px;max-width:500px;margin:0 auto}.session-finished h2{color:#4ade80;margin-bottom:15px}.session-finished p{margin-bottom:30px;font-size:1.1rem}.session-stats{display:flex;gap:30px;justify-content:center;margin:20px 0;padding:20px;background:#ffffff1a;border-radius:8px}.stat-item{display:flex;flex-direction:column;gap:5px;align-items:center}.stat-label{font-size:.9rem;opacity:.8;text-transform:uppercase;font-weight:600}.stat-value{font-size:2rem;font-weight:700;color:#4ade80}.stat-item.correct .stat-value{color:#4ade80}.stat-item.incorrect .stat-value{color:#ef4444}.stat-item.accuracy .stat-value{color:#3b82f6}.feedback{position:fixed!important;top:20px;left:50%;transform:translate(-50%);padding:20px 40px;border-radius:12px;display:flex;align-items:center;gap:15px;font-size:1.3rem;font-weight:700;z-index:9999;box-shadow:0 10px 30px #00000080;animation:feedbackSlideIn .3s ease-out;margin:0!important;pointer-events:none}@keyframes feedbackSlideIn{0%{transform:translate(-50%,-20px);opacity:0}to{transform:translate(-50%);opacity:1}}.feedback.correct{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.feedback.incorrect{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.feedback-icon{font-size:4rem;line-height:1}.feedback-text{text-align:left}.feedback-text strong{font-size:2rem;display:block;margin-bottom:10px}.final-stats{background:#ffffff1a;padding:30px;border-radius:12px;margin:30px 0}.final-stats p{font-size:1.3rem;display:flex;justify-content:space-between;max-width:400px;margin:15px auto}.final-stats strong{color:#ffffffb3}.card{width:100px;height:140px;background:#fff;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;padding:8px;box-shadow:0 4px 8px #0000004d;transition:transform .2s;position:relative}.card-black{color:#000}.card-red{color:#dc2626}.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:1.5rem;font-weight:700}.card-suit{font-size:1.2rem}.card-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-suit-large{font-size:3.5rem;opacity:.3}.hand-total{font-size:1.5rem;font-weight:700;color:#4ade80;margin-top:10px;text-shadow:0 0 10px rgba(74,222,128,.5)}.toggle-option{display:flex;align-items:center;gap:8px;font-size:1rem;cursor:pointer;background:#ffffff1a;padding:10px 20px;border-radius:8px;transition:background .2s}.toggle-option:hover{background:#fff3}.toggle-option{display:flex;align-items:center;gap:10px;font-size:1.1rem;cursor:pointer;padding:10px 20px;background:#ffffff1a;border-radius:8px;transition:background .2s}.hand-total{margin-top:10px;font-size:1.8rem;font-weight:700;color:#4ade80;text-shadow:0 2px 4px rgba(0,0,0,.3)}.hand-total{margin-top:15px;font-size:1.8rem;font-weight:700;color:#4ade80;text-shadow:0 2px 4px rgba(0,0,0,.3)}.toggle-option{display:flex;align-items:center;gap:10px;font-size:1rem;cursor:pointer;padding:10px 15px;background:#ffffff1a;border-radius:8px;transition:background .2s}.toggle-option input[type=checkbox]{width:20px;height:20px;cursor:pointer}.stats-container{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0;padding:20px;background:#ffffff1a;border-radius:8px;flex-wrap:wrap}.session-stats{display:flex;gap:30px;flex:1}.stats-controls{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.toggle-option{display:flex;align-items:center;gap:8px;font-size:1rem;cursor:pointer;padding:8px 12px;background:#ffffff0d;border-radius:6px;white-space:nowrap}.toggle-option input[type=checkbox]{cursor:pointer;width:18px;height:18px}.btn-sm{padding:8px 16px;font-size:.9rem}.hand-total{font-size:1.2rem;font-weight:700;color:#4ade80;margin-top:10px}.stats-container{margin:20px 0}.stats-controls{display:flex;gap:15px;justify-content:center;align-items:center;margin-top:15px}.toggle-option{display:flex;align-items:center;gap:8px;font-size:1rem;cursor:pointer;padding:8px 15px;background:#ffffff1a;border-radius:6px;transition:background .2s}.toggle-option:hover{background:#ffffff26}.btn-sm{padding:8px 20px;font-size:.9rem}.hand-header{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:10px}.hand-total-inline{font-size:1.5rem;font-weight:700;color:#4ade80;background:#4ade8033;padding:5px 15px;border-radius:8px;min-width:50px;text-align:center}.btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.practice-mode{padding:10px}.practice-mode h1{font-size:1.8rem}.session-stats{flex-direction:column;gap:15px;padding:15px}.stat-item{flex-direction:row;justify-content:space-between;width:100%}.stat-value{font-size:1.5rem}.card{width:70px;height:105px;font-size:1.3rem}.card-rank{font-size:1.2rem}.card-suit{font-size:1rem}.actions{flex-direction:column;gap:10px;width:100%}.actions .btn{width:100%}.game-controls{flex-direction:column;gap:10px}.game-controls .btn{width:100%}.feedback{position:fixed!important;top:20px!important;left:50%!important;transform:translate(-50%)!important;padding:15px 20px;font-size:1rem;max-width:90%;flex-direction:row;gap:10px;margin:0!important;z-index:9999}.feedback-icon{font-size:2rem}.feedback-text{font-size:.9rem}.feedback-text strong{font-size:1.1rem}.practice-mode{padding:5px}.practice-mode h1{font-size:1.5rem;margin-bottom:1rem}.game-table{padding:10px;margin:10px 0}.dealer-section,.player-section{margin:10px 0;min-height:120px;padding:10px 5px}.hand{margin:10px 0;min-height:100px}.hand-header{margin-bottom:8px}.hand-header h3{font-size:1.1rem;margin:0}.actions{margin:15px 0;gap:8px}.actions .btn{padding:12px;font-size:1rem}.session-stats{gap:8px;padding:10px}.stats-container{margin:10px 0;padding:10px}.mode-selection{padding:20px}.mode-options label{font-size:1rem;padding:12px}.ready-state{padding:20px}}@media (max-width: 480px){.practice-mode h1{font-size:1.5rem}.card{width:70px;height:105px;font-size:1.3rem}.stat-value{font-size:1.3rem}.feedback{padding:12px 15px;font-size:.9rem}.feedback-icon{font-size:1.5rem}.feedback-text{font-size:.85rem}.feedback-text strong{font-size:1rem}}.card-back-pattern{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;gap:10px}.card-back-logo{font-size:2rem;color:#ffffff4d}.card-back-text{font-size:1.5rem;font-weight:700;color:#ffffff80;letter-spacing:3px}.count-input{background:#ffffff1a;padding:30px;border-radius:12px;margin:20px 0;text-align:center}.count-display{font-size:4rem;font-weight:700;color:#4ade80;margin:20px 0;text-shadow:0 0 10px rgba(74,222,128,.5)}.count-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}.count-buttons .btn{min-width:70px;font-size:1.2rem;padding:15px 20px}.btn-large{font-size:1.5rem;padding:20px 40px;min-width:200px}@media (max-width: 768px){.count-display{font-size:3rem}.count-buttons{width:100%}.count-buttons .btn{flex:1;min-width:60px}.btn-large{width:100%}}.counting-mode{max-width:1400px;margin:0 auto;padding:20px}.counting-mode h1{text-align:center;font-size:2.5rem;margin-bottom:30px}.counting-settings{max-width:700px;margin:0 auto;background:#ffffff1a;padding:40px;border-radius:12px}.counting-settings h2{text-align:center;margin-bottom:10px}.settings-description{text-align:center;color:#ffffffb3;margin-bottom:30px}.settings-grid{display:grid;gap:25px;margin-bottom:30px}.setting-group label{display:block;margin-bottom:8px;font-weight:600;color:#ffffffe6}.setting-select{width:100%;padding:12px;border-radius:6px;border:2px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;font-size:1rem}.settings-info{background:#0003;padding:20px;border-radius:8px;margin-top:20px}.settings-info ul{list-style:none;padding:0;margin-top:10px}.settings-info li{padding:5px 0;color:#fffc}.counting-table{margin:30px 0}.table-layout{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:30px 0}.player-section-center{flex:1;text-align:center}.tablemate-seat{width:200px;text-align:center}.tablemate-left{text-align:left}.tablemate-right{text-align:right}.seat-label{font-weight:700;margin-bottom:10px;color:#ffffffb3}.counting-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;background:#ffffff0d;padding:20px;border-radius:12px;margin-bottom:20px}.penetration-indicator{margin-top:20px;text-align:center}.penetration-bar{height:20px;background:#ffffff1a;border-radius:10px;overflow:hidden;max-width:600px;margin:10px auto}.penetration-fill{height:100%;background:linear-gradient(90deg,#4ade80,#ef4444);transition:width .3s ease}.penetration-text{color:#ffffffb3;font-size:.9rem}.session-controls{text-align:center;margin-top:30px}.check-history{margin-top:30px;background:#ffffff0d;padding:20px;border-radius:8px}.check-history h3{margin-bottom:15px}.check-history ul{list-style:none;padding:0}.check-history li{padding:10px;margin:5px 0;border-radius:6px;background:#0003}.check-history li.correct{border-left:4px solid #4ade80}.check-history li.incorrect{border-left:4px solid #ef4444}@media (max-width: 768px){.table-layout{flex-direction:column;align-items:center}.tablemate-seat{width:100%}.counting-stats{flex-direction:column}.settings-grid{grid-template-columns:1fr}}.count-input{background:#ffffff1a;padding:30px;border-radius:12px;margin:20px auto;max-width:600px;text-align:center}.count-input h3{margin-bottom:20px;font-size:1.5rem}.count-display{background:#0000004d;padding:20px;border-radius:8px;margin-bottom:20px}.count-value{font-size:3rem;font-weight:700;color:#4ade80;font-family:Courier New,monospace}.count-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.btn-count{padding:15px 20px;font-size:1.2rem;font-weight:700;background:#fff3;border:2px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;border-radius:8px;transition:all .2s}.btn-count:hover:not(:disabled){background:#ffffff4d;transform:scale(1.05)}.btn-count:active:not(:disabled){transform:scale(.95)}.btn-count:disabled{opacity:.5;cursor:not-allowed}.btn-submit-count{width:100%;padding:15px;font-size:1.3rem}.tablemates{display:flex;justify-content:space-between;margin:20px 0;gap:20px}.tablemate-seat{flex:1;background:#ffffff0d;padding:15px;border-radius:8px;text-align:center}.tablemate-seat h4{margin-bottom:10px;font-size:.9rem;opacity:.7}.tablemate-seat .hand{margin-top:10px}@media (max-width: 768px){.count-buttons{grid-template-columns:repeat(2,1fr)}.count-value{font-size:2.5rem}.tablemates{flex-direction:column}}.home-page{max-width:1200px;margin:0 auto;padding:40px 20px;text-align:center}.home-page h1{font-size:3rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.home-page .subtitle{font-size:1.2rem;opacity:.9;margin-bottom:60px}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin:0 auto}.mode-card{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:40px 30px;transition:all .3s ease;cursor:pointer}.mode-card.active:hover{transform:translateY(-8px);background:#ffffff26;border-color:#fff6;box-shadow:0 10px 30px #0000004d}.mode-card.disabled{opacity:.5;cursor:not-allowed}.mode-icon{font-size:4rem;margin-bottom:20px}.mode-card h2{font-size:1.8rem;margin-bottom:15px}.mode-card p{font-size:1rem;margin-bottom:25px;opacity:.9;line-height:1.5}.mode-card .btn{width:100%;max-width:200px;margin:0 auto}@media (max-width: 768px){.home-page h1{font-size:2rem}.home-page .subtitle{font-size:1rem;margin-bottom:40px}.mode-cards{grid-template-columns:1fr}.mode-card{padding:30px 20px}.mode-icon{font-size:3rem}.mode-card h2{font-size:1.5rem}}.count-input{margin:30px 0;padding:30px;background:#ffffff0d;border-radius:12px}.count-display{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:20px;font-size:1.5rem}.count-label{opacity:.8}.count-value{font-size:2rem;font-weight:700;color:#4ade80;min-width:80px;text-align:center}.count-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.btn-count{min-width:60px;font-size:1.2rem;font-weight:700;background:#ffffff1a;border:2px solid rgba(255,255,255,.3)}.btn-count:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.btn-submit-count{width:100%;max-width:300px;margin:0 auto;display:block;font-size:1.2rem;padding:15px}@media (max-width: 768px){.count-input{padding:20px}.count-display{font-size:1.2rem}.count-value{font-size:1.8rem}.count-buttons{gap:8px}.btn-count{min-width:50px;font-size:1rem;padding:12px 8px}.btn-submit-count{font-size:1.1rem;padding:12px}}.hand{display:flex;flex-direction:row;justify-content:center;margin:20px 0}.hand .card{margin-left:-40px}.hand .card:first-child{margin-left:0}@media (max-width: 768px){.hand .card{width:70px;height:105px;margin-left:-30px}.hand .card:first-child{margin-left:0}.hand-header{margin-bottom:15px}.dealer-section,.player-section{padding:20px 10px;min-height:160px}}.practice-settings{max-width:600px;margin:0 auto;padding:40px;background:#ffffff1a;border-radius:12px}.practice-settings h2{font-size:2rem;margin-bottom:10px;text-align:center}.settings-subtitle{text-align:center;opacity:.7;margin-bottom:30px;font-size:.9rem}.settings-grid{display:grid;gap:15px;margin-bottom:30px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.setting-label{font-weight:500;opacity:.9}.setting-value{font-weight:700;color:#4ade80}.btn-large{padding:18px 40px;font-size:1.3rem;width:100%}@media (max-width: 768px){.practice-settings{padding:20px}.practice-settings h2{font-size:1.5rem}.setting-item{flex-direction:column;align-items:flex-start;gap:8px}.btn-large{padding:15px;font-size:1.1rem}}.card-back{background:repeating-linear-gradient(45deg,#1e40af,#1e40af 10px,#3b82f6 10px,#3b82f6 20px);border:3px solid #1e3a8a}.card-back-pattern{display:none}.count-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.count-modal{background:linear-gradient(135deg,#1e3c72,#2a5298);padding:40px;border-radius:16px;box-shadow:0 10px 40px #00000080;text-align:center;min-width:400px}.count-modal h2{font-size:1.8rem;margin-bottom:30px;color:#fff}.count-display-large{background:#0000004d;padding:30px;border-radius:12px;margin-bottom:30px}.count-value-large{font-size:4rem;font-weight:700;color:#4ade80;font-family:Courier New,monospace;text-shadow:0 0 20px rgba(74,222,128,.5)}.count-modal .count-buttons{display:flex;gap:20px;justify-content:center;margin-bottom:30px}.count-modal .btn-count{min-width:80px;font-size:1.5rem;padding:15px 30px}.count-modal .btn-submit-count{width:100%;font-size:1.2rem;padding:15px}