:root{--bg:#09090b;--surface:#111113;--surface-2:#18181b;--surface-3:#202024;--text:#f4f4f5;--muted:#a1a1aa;--border:#27272a;--border-strong:#3f3f46;--felt:#23593c;--felt-soft:#13261f;--action:#f97316;--selected:#fb923c;color:var(--text);background:radial-gradient(circle at top, #f973160d, transparent 30%), var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;min-height:100svh;margin:0}button{cursor:pointer}.app-shell{box-sizing:border-box;grid-template-rows:auto 1fr;gap:14px;width:min(100% - 32px,1280px);min-height:100svh;margin:0 auto;padding:16px;display:grid}.spot-header{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand""depths";align-items:center;gap:2px;min-height:56px;padding-bottom:8px;display:grid}.brand-block{grid-area:brand;justify-self:start;width:100%;min-width:0}.title-row{flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:12px;width:100%;min-width:0;display:flex}.helper-button{border:1px solid var(--border);background:var(--surface-2);width:28px;min-width:28px;height:28px;min-height:28px;color:var(--text);border-radius:999px;place-items:center;padding:0;font-size:14px;font-weight:900;line-height:1;display:inline-grid;box-shadow:inset 0 1px #ffffff08}.helper-button:hover{color:#fb923c;border-color:#f9731673}.brand-meta{flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0;margin-left:auto;display:flex}.brand-logo-frame{flex:none;justify-content:flex-start;align-items:center;min-height:60px;display:inline-flex;overflow:visible}.brand-logo{object-fit:contain;object-position:left center;transform-origin:0;width:auto;max-width:none;height:100px;margin-top:-20px;margin-bottom:-20px;margin-left:0;display:block;transform:none}.spot-header h1{color:var(--text);letter-spacing:0;margin:0;font-size:24px}.seat,.depth-pill,.table-size-trigger{border:1px solid var(--border);min-height:38px;color:var(--text);background:var(--surface-2);font:inherit;border-radius:8px;box-shadow:inset 0 1px #ffffff08}.table-size-select{flex:none;justify-self:end;margin-top:0;position:relative}.table-size-trigger{white-space:nowrap;box-sizing:border-box;justify-content:center;align-items:center;min-width:76px;height:31px;min-height:31px;padding:0 22px 0 10px;font-size:11px;font-weight:800;line-height:1;display:inline-flex;position:relative}.table-size-trigger:after{content:"";opacity:.85;border-bottom:2px solid;border-right:2px solid;width:6px;height:6px;position:absolute;top:50%;right:9px;transform:translateY(-70%)rotate(45deg)}.table-size-menu{z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:8px;gap:4px;min-width:100%;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 30px #00000073}.table-size-option{min-height:30px;color:var(--text);text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;padding:0 10px;font-size:12px;font-weight:800}.table-size-option.active{color:#1a1209;background:linear-gradient(#fb923c 0%,#f97316 100%)}.table-size-option:hover{background:var(--surface-2)}.header-controls{grid-area:depths;place-content:start flex-end;justify-items:end;gap:6px;min-width:0;max-width:100%;display:grid}.header-depths{flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:6px;min-width:0;max-width:100%;display:flex;transform:none}.table-panel,.matrix-shell{border:1px solid var(--border);background:var(--surface);border-radius:8px;box-shadow:inset 0 1px #ffffff08,0 18px 40px #00000059}.viewer-layout{grid-template-columns:minmax(360px,500px) minmax(0,1fr);grid-template-areas:"table matrix";place-content:stretch center;align-items:stretch;gap:16px;width:100%;display:grid}.table-panel{grid-area:table;place-items:center;height:100%;min-height:0;padding:20px;display:grid;position:relative;overflow:hidden}.table-panel:before{content:none}.poker-table{aspect-ratio:1.88;box-sizing:border-box;background:radial-gradient(circle at 50% 48%,#256355f5 0%,#14312afa 58%,#0a1612 100%);border:1px solid #ffffff14;border-radius:999px;width:min(100%,500px);height:auto;position:relative;box-shadow:inset 0 0 0 2px #ffffff08,inset 0 0 28px #0000008c,0 24px 48px #00000073}.poker-table:before{content:"";border-radius:inherit;pointer-events:none;border:1px solid #ffffff14;position:absolute;inset:14px}.poker-table:after{content:"";pointer-events:none;border:1px solid #ffffff0f;border-radius:999px;position:absolute;inset:38% 18%}.table-spot-label{z-index:2;color:var(--text);letter-spacing:0;white-space:nowrap;text-shadow:0 1px 2px #00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0a0a73;border:1px solid #ffffff14;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.table-token{left:var(--seat-x);top:var(--seat-y);transform:translate(-50%, -50%) translate(var(--token-shift-x,0px), var(--token-shift-y,0px));letter-spacing:0;pointer-events:none;z-index:1;border:1px solid #ffffff24;border-radius:999px;place-items:center;min-width:28px;height:28px;padding:0 6px;font-size:10px;font-weight:900;display:grid;position:absolute;box-shadow:0 4px 12px #00000057}.table-token:before{content:"";border-radius:inherit;pointer-events:none;border:1px solid #ffffff38;position:absolute;inset:4px}.table-token:after{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 35% 30%,#ffffff8c,#0000 62%);position:absolute;inset:10px}.table-token.dealer{color:#111827;background:linear-gradient(#f8fafc 0%,#cbd5e1 100%);width:18px;min-width:18px;height:18px;min-height:18px;font-size:7px}.table-token.small-blind{color:#1a1209;background:linear-gradient(#facc15 0%,#eab308 100%)}.table-token.big-blind{color:#1a1209;background:linear-gradient(#f97316 0%,#ea580c 100%)}.table-token.big-blind.back{opacity:.6;z-index:0;filter:saturate(.9);width:28px;height:28px}.table-token.big-blind.back:before,.table-token.big-blind.back:after{opacity:.85}.table-chip{left:var(--seat-x);top:var(--seat-y);transform:translate(-50%, -50%) translate(var(--token-shift-x,0px), var(--token-shift-y,0px));width:16px;min-width:16px;height:16px;min-height:16px;box-shadow:none;pointer-events:none;z-index:1;box-sizing:border-box;border:0;border-radius:999px;place-items:center;padding:0;display:grid;position:absolute}.table-chip:before,.table-chip:after{content:none}.table-chip-image{object-fit:contain;object-position:center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.table-chip.big-blind.back{opacity:.75;z-index:0;filter:saturate(.95)brightness(.98)}.seat{aspect-ratio:1;letter-spacing:0;width:36px;min-height:0;left:var(--seat-x);top:var(--seat-y);background:var(--surface-2);color:var(--text);border-radius:999px;font-size:9px;font-weight:800;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000052}.seat.open{color:#f8fafc;background:linear-gradient(#23593c 0%,#1b4a33 100%);border-color:#4ade8059}.seat.defense{color:#1c1208;background:linear-gradient(#fb923c 0%,#ea580c 100%);border-color:#f9731673}.depth-pill{white-space:nowrap;text-overflow:clip;flex:none;min-width:max-content;min-height:31px;padding:0 4px;font-size:10px;font-weight:800;overflow:hidden}.depth-pill.active{color:#1a1209;background:linear-gradient(#fb923c 0%,#f97316 100%);border-color:#0000}.matrix-shell{grid-area:matrix;grid-template-columns:minmax(0,1fr);place-items:start center;gap:12px;height:100%;min-height:0;padding:14px;display:grid}.matrix-main{justify-items:center;gap:8px;width:100%;min-width:0;display:grid}.matrix-placeholder{aspect-ratio:1;border:1px dashed var(--border-strong);width:min(100%,560px);color:var(--muted);text-align:center;border-radius:8px;place-items:center;gap:6px;display:grid}.matrix-placeholder strong{color:var(--text);font-size:22px}.matrix-stack{justify-self:center;gap:8px;width:min(100%,640px,78svh);display:grid}.hand-matrix{aspect-ratio:1;border:1px solid var(--border);background:var(--surface-2);border-radius:8px;grid-template-columns:repeat(13,minmax(0,1fr));gap:1px;width:100%;padding:6px;display:grid;box-shadow:inset 0 1px #ffffff08}@media (width>=641px){.matrix-main{margin-top:56px}}.hand-cell{color:#f4f4f5;min-width:0;min-height:0;box-shadow:none;border:1px solid #ffffff0d;border-radius:4px;padding:0;font-size:11px;font-weight:800;line-height:1;transition:transform .12s,filter .12s,border-color .12s}.hand-cell.selected{outline:2px solid var(--selected);outline-offset:-2px;transform:translateY(-1px)}.hand-cell.annotated{border-color:#fb923c59;box-shadow:inset 0 0 0 1px #fb923c2e}.hand-cell.annotated.selected{border-color:#fb923c8c}.hand-cell.fold{color:#d4d4d8;background:#2f3138}.hand-cell.limp{color:#ecfeff;background:#0f766e}.hand-cell.call{color:#1a1209;background:#facc15}.hand-cell.three-bet{color:#1c1208;background:#fb923c}.hand-cell.open-fold{color:#eff6ff;background:#2563eb}.hand-cell.open-call{color:#1a1209;background:#facc15}.hand-cell.open-raise{color:#1a1209;background:#f97316}.hand-cell.open-jam{color:#fff7ed;background:#dc2626}.hand-cell.jam{color:#fff7ed;background:#991b1b}.range-status{color:#f97316;opacity:.72;margin:0;font-size:11px;font-weight:700}.hand-note{color:#cbd5e1;opacity:.8;margin:0;font-size:11px;font-style:italic;line-height:1.35}.legend-panel{place-self:start center;gap:6px;width:fit-content;min-width:0;max-width:100%;display:grid}.legend-list{flex-wrap:wrap;justify-content:center;gap:6px 8px;display:flex}.legend-item{color:var(--muted);letter-spacing:0;align-items:center;gap:5px;font-size:11px;font-weight:700;display:inline-flex}.legend-swatch{border:1px solid #ffffff14;border-radius:3px;width:12px;height:12px}.legend-swatch.fold{background:#2f3138}.legend-swatch.limp{background:#0f766e}.legend-swatch.call{background:#facc15}.legend-swatch.three-bet{background:#fb923c}.legend-swatch.open-fold{background:#2563eb}.legend-swatch.open-call{background:#facc15}.legend-swatch.open-raise{background:#f97316}.legend-swatch.open-jam{background:#dc2626}.legend-swatch.jam{background:#991b1b}.range-source-switch{color:var(--muted);background:#0f172abf;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:8px;margin-top:4px;padding:4px 8px;font-size:11px;font-weight:700;display:inline-flex}.range-source-switch label{color:inherit}.range-source-select{background:var(--surface-2);min-width:82px;height:28px;color:var(--text);border:1px solid #ffffff1a;border-radius:8px;padding:0 8px;font-size:11px;font-weight:700}.helper-backdrop{z-index:80;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#020617b8;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.helper-dialog{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;gap:14px;width:min(760px,100%);max-height:min(86svh,820px);padding:16px;display:flex;overflow:hidden;box-shadow:0 24px 64px #0000008c}.helper-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.helper-kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 4px;font-size:11px}.helper-header h2{color:var(--text);letter-spacing:0;margin:0;font-size:18px}.helper-close{border:1px solid var(--border);background:var(--surface-2);width:30px;min-width:30px;height:30px;min-height:30px;color:var(--text);border-radius:999px;padding:0;font-size:18px;line-height:1}.helper-content{overscroll-behavior:contain;flex:auto;gap:12px;min-height:0;padding-right:4px;display:grid;overflow:auto}.helper-section{gap:8px;display:grid}.helper-section h3{color:#fb923c;letter-spacing:0;margin:0;font-size:13px}.helper-section dl{gap:8px;margin:0;display:grid}.helper-row{background:#ffffff05;border:1px solid #ffffff0d;border-radius:8px;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 12px;display:grid}.helper-row dt{color:var(--text);font-size:12px;font-weight:900}.helper-row dd{color:var(--muted);margin:0;font-size:12px;line-height:1.45}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=640px){.app-shell{gap:10px;width:100%;margin:0;padding:10px}.spot-header{grid-template-columns:1fr;grid-template-areas:"brand""depths";align-items:start;gap:2px;padding-bottom:0}.header-controls{justify-content:flex-start;justify-self:stretch;justify-items:start;width:100%}.header-depths{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;width:100%;display:grid;transform:translateY(-1px)}.depth-pill{width:100%;min-width:0}.viewer-layout{grid-template-columns:1fr;grid-template-areas:"table""matrix";gap:10px}.table-panel{height:auto;min-height:240px;padding:14px}.matrix-shell{grid-template-columns:1fr;gap:10px;height:auto;min-height:0;margin-top:0;padding:12px}.matrix-stack{gap:8px;width:100%}.matrix-placeholder strong{font-size:18px}.matrix-placeholder span,.range-status{font-size:10px}.legend-list{gap:5px 7px}.legend-item{font-size:10px}.legend-panel{justify-self:stretch}.legend-list{justify-content:flex-start}.hand-cell{font-size:9px}.poker-table{width:min(100%,340px)}.seat{width:32px;font-size:7px}.depth-pill{min-height:28px;padding:0 2px;font-size:8px}.helper-button{width:26px;min-width:26px;height:26px;min-height:26px;font-size:13px}.brand-logo-frame{min-height:48px}.brand-logo{height:82px;margin-top:-10px;margin-bottom:-10px;margin-left:0;transform:none}.table-spot-label{padding:3px 7px;font-size:10px}.table-token{min-width:20px;height:20px;padding:0 5px;font-size:8px}.table-token.dealer{width:18px;min-width:18px;height:18px;min-height:18px;font-size:7px}.table-chip{width:14px;min-width:14px;height:14px;min-height:14px}.table-chip:before{inset:2px}.table-chip:after{inset:4px}.table-token.big-blind.back{width:20px;height:20px}.spot-header h1{white-space:nowrap;font-size:18px;line-height:1}.title-row{flex-wrap:nowrap;gap:8px}.brand-meta{flex-wrap:nowrap;gap:6px}.table-size-trigger{width:78px;min-width:78px;height:28px;min-height:28px;padding:0 14px 0 6px;font-size:10px}.table-size-menu{min-width:78px;padding:4px}.table-size-option{min-height:28px;padding:0 8px;font-size:10px}.helper-dialog{padding:14px}.helper-row{grid-template-columns:116px minmax(0,1fr)}}