*,: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}