:root{--bg:#0f3d2e;--surface:#14513c;--text:#f4f7f5;--muted:#b9cfc5;--card-bg:#fff;--spades:#1a1a1a;--hearts:#d32f2f;--diamonds:#1565c0;--clubs:#2e7d32;--correct:#2e7d32;--mistake:#c62828;--fold:#546e7a;--raise:#c0392b;--limp:#d68910;--call:#00897b;--felt:#1b6b4f;--felt-edge:#5d3a1a;--seat-bg:#0b2a20;--chip:#f2c94c;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;margin:0}.drill{flex-direction:column;gap:12px;max-width:480px;min-height:100dvh;margin:0 auto;padding:12px 16px 0;display:flex}.drill-header{justify-content:space-between;align-items:baseline;display:flex}.drill-header h1{margin:0;font-size:1.1rem}.tally{color:var(--muted);font-variant-numeric:tabular-nums}.spot{background:var(--surface);text-align:center;border-radius:16px;padding:8px 12px 10px}.spot p{margin:0 0 8px}.spot-meta,.summary{color:var(--muted)}.card{background:var(--card-bg);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;font-weight:700;display:flex;box-shadow:0 2px 6px #00000059}.card-rank,.card-suit{line-height:1}.suit-s{color:var(--spades)}.suit-h{color:var(--hearts)}.suit-d{color:var(--diamonds)}.suit-c{color:var(--clubs)}.result{min-height:88px}.feedback{background:var(--surface);border-left:6px solid;border-radius:12px;padding:12px 16px}.feedback p{margin:4px 0}.feedback.is-correct{border-color:var(--correct)}.feedback.is-mistake{border-color:var(--mistake)}.verdict{font-weight:700}.actions{padding:8px 0 max(8px, env(safe-area-inset-bottom));background:var(--bg);gap:12px;margin-top:auto;display:flex;position:sticky;bottom:0}.btn{text-align:center;color:#fff;cursor:pointer;border:0;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;min-height:56px;padding:0 8px;font-size:1.1rem;font-weight:700;line-height:1.2;display:inline-flex}.btn-label{flex-wrap:wrap;justify-content:center;column-gap:.3em;display:inline-flex}.btn-size{white-space:nowrap}@media (width<=480px){.btn-size{font-size:.85em;font-weight:600}}.btn:focus-visible{outline-offset:2px;outline:3px solid #fff}.btn-fold{background:var(--fold)}.btn-raise,.btn-limp,.btn-3bet,.btn-4bet,.btn-5bet{background:var(--raise)}.btn-call{background:var(--call)}.btn-next{background:#1e88e5}.btn:disabled{opacity:.5;cursor:not-allowed}.link-btn{min-width:44px;min-height:44px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;padding:0 8px 0 0;display:inline-flex}.link-btn:focus-visible{outline:2px solid #fff}.setup-panel{text-align:left}.positions{border:0;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;display:flex}.positions legend{margin-bottom:8px;padding:0;font-weight:700}.chip{background:var(--bg);cursor:pointer;border-radius:22px;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-weight:600;display:inline-flex}.chip-all{flex-basis:100%}.chip input{width:18px;height:18px;margin:0}.sizes{color:var(--muted);font-size:.9rem}.freq-bar{border-radius:8px;height:32px;margin:8px 0;display:flex;overflow:hidden}.freq-seg{white-space:nowrap;opacity:.55;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex;overflow:hidden}.freq-seg.is-chosen{opacity:1;box-shadow:inset 0 0 0 3px #fff}.freq-fold{background:var(--fold)}.freq-raise{background:var(--raise)}.freq-limp{background:var(--limp)}.freq-call{background:var(--call)}.freq-3bet,.freq-4bet,.freq-5bet{background:var(--raise)}.freq-legend{color:var(--muted);flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;display:flex}.freq-legend li{align-items:center;gap:6px;display:inline-flex}.freq-legend li.is-chosen{color:var(--text);font-weight:700}.freq-swatch{border-radius:3px;width:12px;height:12px}.kbd{background:#00000040;border-radius:4px;padding:2px 6px;font:600 .75rem ui-monospace,monospace;display:none}@media (hover:hover) and (pointer:fine){.kbd{display:inline-block}}.table{aspect-ratio:6/5;width:min(100%,120dvh - 444px);min-width:240px;margin:0 auto 6px;position:relative;container-type:inline-size}.felt{background:radial-gradient(ellipse at center, #23855f 0%, var(--felt) 65%, #135239 100%);box-shadow:0 0 0 2.2cqw var(--felt-edge), 0 4px 14px #00000080;border-radius:50%;position:absolute;inset:11% 8%}.seats{margin:0;padding:0;list-style:none}.seat,.bet,.dealer-button,.pot{left:var(--x);top:var(--y);position:absolute;transform:translate(-50%,-50%)}.pot{color:var(--muted);white-space:nowrap;font-size:4cqw;top:46%;left:50%}.pot strong{color:var(--text)}.seat{flex-direction:column;align-items:center;display:flex}.seat-plate{background:var(--seat-bg);border:.6cqw solid #2f6f58;border-radius:3cqw;flex-direction:column;align-items:center;min-width:17cqw;padding:1cqw 2cqw;line-height:1.15;display:flex}.seat-pos{font-size:4cqw;font-weight:700}.seat-stack{color:var(--muted);font-variant-numeric:tabular-nums;font-size:3.2cqw}.seat.is-folded .seat-plate{opacity:.45;border-style:dashed}.seat.is-folded .seat-stack{font-style:italic}.seat.is-hero{top:calc(var(--y) + 7cqw);transform:translate(-50%,-100%)}.seat.is-hero .seat-plate{background:#123d2f;border-color:#f2c94c}.bet{white-space:nowrap;font-variant-numeric:tabular-nums;background:#00000059;border-radius:3cqw;align-items:center;gap:1cqw;padding:.4cqw 1.6cqw .4cqw .6cqw;font-size:3.4cqw;font-weight:700;display:inline-flex}.chip-icon{background:var(--chip);border:.7cqw dashed #fff;border-radius:50%;width:3.4cqw;height:3.4cqw}.dealer-button{color:#111;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:6cqw;height:6cqw;font-size:3.4cqw;font-weight:800;display:flex;box-shadow:0 1px 3px #00000080}.hole-cards{z-index:1;justify-content:center;gap:1.5cqw;margin-bottom:-2cqw;display:flex;position:relative}.table .card{border-radius:1.6cqw;width:14cqw;height:19.5cqw}.table .card-rank{font-size:7.5cqw}.table .card-suit{font-size:7cqw}.table-9 .seat-plate{min-width:14cqw;padding:.8cqw 1.4cqw}.table-9 .seat-pos{font-size:3.4cqw}@media (orientation:landscape) and (height<=500px){.drill:not(.setup){grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;max-width:960px;display:grid}.drill:not(.setup) .drill-header{grid-column:1/-1}.drill:not(.setup) .spot{grid-area:2/1/4;align-self:start}.drill:not(.setup) .result{grid-area:2/2}.drill:not(.setup) .actions{grid-area:3/2}.drill:not(.setup) .table{width:min(100%,120dvh - 180px);min-width:160px}}
