*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d1117;--surface:#161b22;--surface2:#21262d;--border:#30363d;--text:#e6edf3;--text-muted:#8b949e;--green:#1a7a4a;--green-felt:#155a36;--green-light:#27ae60;--red:#c0392b;--yellow:#f39c12;--blue:#2980b9;--gold:#f1c40f;--radius:12px}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Inter,Segoe UI,system-ui,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.content-row{flex:1;grid-template-columns:160px 1fr 160px;grid-template-areas:"left main right";gap:0;width:100%;max-width:1200px;margin:0 auto;display:grid}@media (width<=900px){.content-row{grid-template-columns:1fr;grid-template-areas:"main"}.ad-sidebar{display:none}}.ad-sidebar{flex-direction:column;align-items:center;gap:20px;height:100vh;padding:20px 8px;display:flex;position:sticky;top:0;overflow:hidden}.ad-sidebar-left{grid-area:left}.ad-sidebar-right{grid-area:right}.ad-sidebar-slot{width:100%}.ad-sidebar .adsbygoogle{width:100%;min-height:250px}.app-header{text-align:center;border-bottom:1px solid var(--border);background:var(--surface);padding:20px 16px 12px}.logo{letter-spacing:2px;justify-content:center;align-items:center;gap:10px;margin:0;font-size:1.8rem;font-weight:800;line-height:1;display:flex}.logo-text{background:linear-gradient(135deg,#f1c40f,#e67e22);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.logo-suits{font-size:1.4rem}.logo-suits:first-child{color:#1a1a2e;-webkit-text-stroke:1px #666}.logo-suits:last-child{color:var(--red)}.logo-sub{color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;margin-top:4px;font-size:.75rem}.app-main{grid-area:main;width:100%;max-width:700px;margin:0 auto;padding:20px 16px 40px}.puzzle-card{flex-direction:column;gap:16px;display:flex}.puzzle-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.puzzle-meta{flex-wrap:wrap;gap:8px;display:flex}.category-badge,.difficulty-badge{letter-spacing:1px;text-transform:uppercase;color:#fff;border-radius:20px;padding:3px 10px;font-size:.7rem;font-weight:700}.puzzle-progress{align-items:center;gap:12px;display:flex}.score-display{color:var(--gold);font-size:.85rem;font-weight:700}.progress-display{color:var(--text-muted);font-size:.85rem}.puzzle-title{color:var(--text);font-size:1.3rem;font-weight:700}.puzzle-scenario{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-size:.9rem;line-height:1.6}.puzzle-question{color:var(--text);font-size:1rem;font-weight:600}.table-wrapper{border-radius:var(--radius);border:2px solid #3d2b1f;overflow:hidden;box-shadow:0 4px 20px #00000080}.felt-table{background:radial-gradient(ellipse at center, #1e6b42 0%, var(--green-felt) 60%, #0d3d20 100%);flex-direction:column;align-items:center;gap:12px;min-height:140px;padding:24px 16px;display:flex;position:relative}.board-area{flex-direction:column;align-items:center;gap:8px;display:flex}.board-label{letter-spacing:3px;text-transform:uppercase;color:#fff6;font-size:.65rem;font-weight:600}.board-cards{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.board-empty{color:#ffffff4d;padding:8px 0;font-size:.8rem;font-style:italic}.pot-display{background:#0000004d;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:6px;padding:4px 12px;display:flex}.pot-label{letter-spacing:2px;color:#ffffff80;text-transform:uppercase;font-size:.65rem}.pot-amount{color:var(--gold);font-size:.9rem;font-weight:700}.hero-bar{background:var(--surface2);border-top:2px solid #3d2b1f;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;display:flex}.hero-position{flex-direction:column;align-items:center;gap:2px;min-width:48px;display:flex}.pos-badge{background:var(--gold);color:#000;letter-spacing:1px;border-radius:4px;padding:3px 8px;font-size:.7rem;font-weight:800}.pos-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.6rem}.hero-hand{flex:1;justify-content:center;gap:6px;display:flex}.hero-stats{gap:12px;display:flex}.stat{flex-direction:column;align-items:center;gap:1px;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.6rem}.stat-value{color:var(--text);font-size:.85rem;font-weight:700}.stat-call .stat-value{color:#e74c3c}.card{-webkit-user-select:none;user-select:none;background:#fff;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:80px;display:flex;position:relative;box-shadow:0 2px 8px #0006,inset 0 0 0 1px #00000014}.card-small{border-radius:4px;width:40px;height:56px}.card-back{background:linear-gradient(135deg,#1a3a8f,#0d1f5c);border-radius:6px;flex-shrink:0;width:56px;height:80px;box-shadow:0 2px 8px #0006}.card-back-pattern{background:repeating-linear-gradient(45deg,#ffffff0d 0 2px,#0000 2px 10px);border-radius:6px;width:100%;height:100%}.card-corner{flex-direction:column;align-items:center;line-height:1;display:flex;position:absolute}.top-left{top:4px;left:4px}.bottom-right{bottom:4px;right:4px;transform:rotate(180deg)}.card-rank{font-size:.75rem;font-weight:800;line-height:1}.card-small .card-rank{font-size:.6rem}.card-suit-small{font-size:.55rem;line-height:1}.card-small .card-suit-small{font-size:.45rem}.card-center-suit{font-size:1.5rem;line-height:1}.card-small .card-center-suit{font-size:1.1rem}.options-grid{flex-direction:column;gap:10px;display:flex}.option-btn{border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);width:100%;color:var(--text);cursor:pointer;text-align:left;padding:14px 18px;font-size:.95rem;font-weight:600;transition:all .15s}.option-btn:hover:not(.correct):not(.wrong):not(.dimmed){background:#58a6ff14;border-color:#58a6ff}.option-btn.correct{border-color:var(--green-light);color:#2ecc71;cursor:default;background:#27ae6026}.option-btn.wrong{border-color:var(--red);color:#e74c3c;cursor:default;background:#c0392b26}.option-btn.dimmed{opacity:.35;cursor:default}.result-panel{border-radius:var(--radius);border:2px solid;padding:20px;animation:.2s slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.result-correct{border-color:var(--green-light);background:#27ae6014}.result-wrong{border-color:var(--red);background:#c0392b14}.result-header{margin-bottom:10px;font-size:1.1rem;font-weight:800}.result-correct .result-header{color:#2ecc71}.result-wrong .result-header{color:#e74c3c}.result-explanation{color:var(--text);margin-bottom:16px;font-size:.9rem;line-height:1.65}.next-btn{background:var(--gold);color:#000;cursor:pointer;letter-spacing:.5px;border:none;border-radius:8px;padding:11px 24px;font-size:.9rem;font-weight:800;transition:opacity .15s}.next-btn:hover{opacity:.85}.results-screen{text-align:center;flex-direction:column;align-items:center;gap:24px;padding:20px 0;display:flex}.results-title{color:var(--gold);letter-spacing:1px;font-size:1.8rem;font-weight:800}.grade-circle{border:4px solid;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:120px;height:120px;display:flex}.grade-letter{font-size:2.5rem;font-weight:900;line-height:1}.grade-label{letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);font-size:.65rem;font-weight:700}.score-breakdown{flex-direction:column;gap:4px;display:flex}.score-big{font-size:2rem;font-weight:800}.score-pct{font-size:1.2rem;font-weight:700}.results-feedback{max-width:400px;color:var(--text-muted);background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);padding:16px;font-size:.95rem;line-height:1.6}.results-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.restart-btn{background:var(--gold);color:#000;cursor:pointer;border:none;border-radius:8px;padding:12px 28px;font-size:.9rem;font-weight:800;transition:opacity .15s}.restart-btn.restart-same{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.restart-btn:hover{opacity:.8}.seo-footer{border-top:1px solid var(--border);max-width:700px;color:var(--text-muted);margin:0 auto;padding:32px 16px 48px;font-size:.8rem;line-height:1.7}.seo-footer h2{color:var(--text-muted);margin-bottom:8px;font-size:.9rem;font-weight:600}.seo-footer p{margin-bottom:8px}.seo-footer ul{margin-bottom:8px;padding-left:20px}.seo-footer li{margin-bottom:4px}.mode-tabs{border-bottom:1px solid var(--border);justify-content:center;gap:4px;margin-top:12px;padding-bottom:0;display:flex}.mode-tab{color:var(--text-muted);cursor:pointer;letter-spacing:.3px;background:0 0;border:none;border-bottom:3px solid #0000;margin-bottom:-1px;padding:8px 20px;font-size:.85rem;font-weight:600;transition:color .15s,border-color .15s}.mode-tab:hover{color:var(--text)}.mode-tab.active{color:var(--gold);border-bottom-color:var(--gold)}.hand-chart{flex-direction:column;gap:16px;display:flex}.hc-header{text-align:center}.hc-title{font-size:1.3rem;font-weight:700}.hc-subtitle{color:var(--text-muted);letter-spacing:.5px;margin-top:4px;font-size:.8rem}.hc-pos-tabs{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.hc-pos-tab{background:var(--surface);border:2px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:8px 14px;transition:all .15s;display:flex}.hc-pos-tab:hover{color:var(--text);border-color:#58a6ff}.hc-pos-tab.active{border-color:var(--gold);color:var(--gold);background:#f1c40f14}.hc-tab-name{font-size:.9rem;font-weight:800}.hc-tab-pct{color:inherit;opacity:.7;font-size:.65rem}.hc-info-bar{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:42px;padding:10px 14px;display:flex}.hc-info-hand{font-size:.9rem;font-weight:700}.hc-info-action{font-size:.85rem;font-weight:600}.hc-info-placeholder{color:var(--text-muted);text-align:center;width:100%;font-size:.8rem;font-style:italic}.hc-grid-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;overflow-x:auto}.hc-col-headers{display:flex}.hc-corner{flex-shrink:0;width:26px}.hc-col-header{text-align:center;min-width:0;color:var(--text-muted);letter-spacing:.5px;flex:1;padding:2px 0 4px;font-size:.6rem;font-weight:700}.hc-rows{flex-direction:column;gap:2px;display:flex}.hc-row{align-items:center;gap:2px;display:flex}.hc-row-header{width:24px;color:var(--text-muted);text-align:right;flex-shrink:0;padding-right:4px;font-size:.6rem;font-weight:700}.hc-cell{aspect-ratio:1.5;cursor:default;-webkit-user-select:none;user-select:none;letter-spacing:-.3px;color:#fff;border-radius:3px;flex:1;justify-content:center;align-items:center;min-width:0;font-size:clamp(.45rem,1.1vw,.65rem);font-weight:700;transition:filter .1s,transform .1s;display:flex}.hc-cell:hover{filter:brightness(1.25);z-index:10;position:relative;transform:scale(1.15)}.hc-in-range{color:#fff}.hc-fold{background:var(--surface2);color:var(--text-muted);opacity:.5}.hc-pair{font-style:italic}.hc-legend{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;gap:8px 16px;padding:12px;display:flex}.hc-legend-item{color:var(--text-muted);align-items:center;gap:6px;font-size:.75rem;display:flex}.hc-swatch{border-radius:2px;flex-shrink:0;width:12px;height:12px}.hc-swatch-fold{background:var(--surface2);border:1px solid var(--border)}.hc-pos-desc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.hc-pos-desc-label{color:var(--gold);margin-bottom:6px;font-size:.85rem;font-weight:800}.hc-pos-desc p{color:var(--text-muted);font-size:.85rem;line-height:1.65}.pq-wrap{flex-direction:column;gap:16px;display:flex}.pq-scorebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);justify-content:center;gap:8px;padding:12px 20px;display:flex}.pq-score-item{flex-direction:column;align-items:center;gap:2px;min-width:54px;display:flex}.pq-score-num{font-size:1.2rem;font-weight:800;line-height:1}.pq-score-lbl{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.6rem}.pq-filter{flex-direction:column;gap:8px;display:flex}.pq-filter-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:600}.pq-filter-tabs{flex-wrap:wrap;gap:6px;display:flex}.pq-filter-tab{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;border-radius:20px;padding:5px 12px;font-size:.75rem;font-weight:600;transition:all .15s}.pq-filter-tab:hover{color:var(--text);border-color:#58a6ff}.pq-filter-tab.active{border-color:var(--gold);color:var(--gold);background:#f1c40f1a}.pq-question{background:radial-gradient(ellipse at 50% 100%, #1e6b42 0%, var(--green-felt) 60%, #0d3d20 100%);border-radius:var(--radius);text-align:center;border:2px solid #3d2b1f;flex-direction:column;align-items:center;gap:14px;padding:24px 20px;display:flex}.pq-pos-line{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.pq-pos-badge{background:var(--gold);color:#000;letter-spacing:1px;border-radius:6px;padding:4px 10px;font-size:.8rem;font-weight:900}.pq-pos-name{color:#fff9;font-size:.8rem}.pq-prompt{color:#ffffffe6;font-size:1rem;font-weight:700}.pq-cards{gap:10px;display:flex}.pq-hand-label{color:#ffffff8c;font-size:.8rem;font-style:italic}.pq-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.pq-btn{border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;letter-spacing:.5px;flex-direction:column;align-items:center;gap:6px;padding:18px;font-size:1rem;font-weight:800;transition:all .15s;display:flex}.pq-btn-icon{font-size:1.4rem;line-height:1}.pq-raise:not(:disabled):hover{border-color:var(--green-light);color:#2ecc71;background:#27ae601a}.pq-fold:not(:disabled):hover{color:#e74c3c;background:#e74c3c1a;border-color:#e74c3c}.pq-btn:disabled{cursor:default}.pq-correct-btn{border-color:var(--green-light)!important;color:#2ecc71!important;background:#27ae6026!important}.pq-wrong-btn{opacity:.6;color:#888!important;background:#e74c3c1a!important;border-color:#e74c3c!important}.pq-result{border-radius:var(--radius);border:2px solid;flex-direction:column;gap:10px;padding:18px 20px;animation:.2s slideIn;display:flex}.pq-result-correct{border-color:var(--green-light);background:#27ae6014}.pq-result-wrong{background:#e74c3c14;border-color:#e74c3c}.pq-result-header{flex-wrap:wrap;align-items:center;gap:10px;font-size:1.05rem;font-weight:800;display:flex}.pq-result-correct .pq-result-header{color:#2ecc71}.pq-result-wrong .pq-result-header{color:#e74c3c}.pq-tier-badge{color:#fff;letter-spacing:.5px;text-transform:uppercase;border-radius:12px;padding:3px 8px;font-size:.65rem;font-weight:700}.pq-result-explanation{color:var(--text);font-size:.88rem;line-height:1.65}