/* ═══════════════════════════════════════════════════════════ POKERLAB — design language inherited from Perceptium (v4.2.26) ═══════════════════════════════════════════════════════════ */ :root { --font-primary: 'Avenir Next', 'Helvetica Neue', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; /* Ocean palette (Perceptium — 10 canonical) */ --ocean-mist: #B2EBF2; --ocean-seafoam: #A8DADC; --ocean-turquoise: #3db2bf; --ocean-coastal: #457b9d; --ocean-cerulean: #007BA7; --ocean-marine: #2a6a6a; --ocean-harbor: #274472; --ocean-abyss: #0F4C75; --ocean-deep: #1d3557; --ocean-midnight: #091E42; --accent-terracotta: #E76F51; --accent-amber: #F4A261; --accent-teal-green: #2A9D8F; --accent-charcoal-teal: #264653; /* verdict colors */ --v-correct: #1FA35C; --v-marginal: #E6A817; --v-mistake: #E53935; /* ═══ v4 Brand Book tokens — LIGHT FIRST (default) ═══ */ --page-bg: #f8fafc; --card-bg: #ffffff; --card-bg-2: #f1f5f9; --card-border: #e2e8f0; --divider: #e2e8f0; --text-primary: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; --input-bg: #ffffff; --table-header-bg: rgba(61,178,191,0.06); --table-hover: rgba(61,178,191,0.03); /* v4 radius / shadow / motion / type */ --radius-sm: 6px; --radius-base: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; --fs-hero: 48px; --fs-page: 32px; --fs-section: 24px; --fs-card: 20px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --fs-micro: 10px; --shadow-sm: 0 1px 3px rgba(29,53,87,.06); --shadow-base: 0 2px 12px rgba(29,53,87,.08); --shadow-md: 0 4px 24px rgba(29,53,87,.08); --shadow-lg: 0 8px 40px rgba(29,53,87,.12); --card-shadow: var(--shadow-sm); --transition-fast: .15s; --transition-base: .25s; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --focus-outline: 2px solid var(--ocean-turquoise); --focus-ring-input: 0 0 0 4px rgba(61,178,191,.15); /* shell layout */ --nav-height: 56px; /* iOS safe areas (notch / home indicator): 0 everywhere else. The PWA runs black-translucent + viewport-fit=cover, so the shell MUST respect these. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --nav-total: calc(var(--nav-height) + var(--safe-top)); --sidebar-width: 268px; /* context accent (per game type) */ --ctx-grad: linear-gradient(135deg, #3DB2BF, #1D3557); --ctx-accent: var(--ocean-turquoise); --ctx-line: linear-gradient(90deg, var(--ocean-turquoise), var(--ocean-coastal), var(--ocean-turquoise)); } body[data-game=mtt] { --ctx-grad: linear-gradient(135deg, #E76F51, #B33F24); --ctx-accent: #E76F51; --ctx-line: linear-gradient(90deg, #E76F51, #F4A261, #E76F51); } /* ═══ v4 dark mode surfaces (applied to like Perceptium) ═══ */ [data-theme=dark] { --page-bg: #0f1923; --card-bg: #172535; --card-bg-2: #13202e; --card-border: #263a50; --divider: #263a50; --text-primary: #e2eaf2; --text-secondary: #c8d6e5; --text-muted: #8fa3b8; --input-bg: #0f1923; --table-header-bg: rgba(61,178,191,0.08); --table-hover: rgba(61,178,191,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.2); --shadow-base: 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.3); --card-shadow: var(--shadow-sm); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); background: var(--page-bg); color: var(--text-primary); line-height: 1.6; font-size: var(--fs-body); transition: background .3s, color .3s; } button { font-family: inherit; } /* scroll progress bar (Perceptium shell) */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--ocean-turquoise), var(--ocean-coastal)); z-index: 200; transition: width .1s linear; pointer-events: none; } /* ═══════════════════════════════════════════════════════════ TOP NAV BAR — thin persistent chrome (hamburger + brand + tools) ═══════════════════════════════════════════════════════════ */ .nav-bar { background: var(--card-bg); border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 110; box-shadow: var(--shadow-sm); transition: background var(--transition-base), border-color var(--transition-base); padding-top: var(--safe-top); /* keeps the controls out of the iPhone notch */ } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--nav-height); padding: 0 max(var(--space-lg), var(--safe-right)) 0 max(var(--space-lg), var(--safe-left)); max-width: min(96vw, 2200px); margin: 0 auto; } .nav-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .hamburger-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast) ease; } .hamburger-btn:hover { background: color-mix(in srgb, var(--ocean-turquoise) 8%, transparent); color: var(--ocean-deep); border-color: var(--card-border); } [data-theme=dark] .hamburger-btn:hover { color: var(--ocean-turquoise); } .hamburger-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; } .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; border-radius: var(--radius-sm); } .brand-card { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; display: block; object-fit: contain; box-shadow: 0 1px 6px rgba(8,124,169,.14); transition: box-shadow .18s ease, transform .18s ease; } [data-theme=dark] .brand-card { box-shadow: 0 1px 8px rgba(0,0,0,.4); } .brand:hover .brand-card { box-shadow: 0 2px 10px rgba(8,124,169,.22); transform: translateY(-1px); } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand-name { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.2px; color: var(--text-primary); white-space: nowrap; } /* wordmark gradient per brand book: Insights = deep→cerulean (light theme); dark theme unifies to turquoise→cerulean for contrast on the dark bar */ .brand-name span, .wm-grad { background: linear-gradient(90deg, var(--ocean-deep), var(--ocean-cerulean)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-theme=dark] .brand-name span, [data-theme=dark] .wm-grad { background-image: linear-gradient(90deg, var(--ocean-turquoise), var(--ocean-cerulean)); } .brand-tagline { font-size: var(--fs-micro); font-weight: 500; font-style: italic; color: var(--text-muted); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-tools { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; } .nav-stats { display: inline-flex; align-items: center; gap: 18px; } .nav-stat { text-align: right; line-height: 1.15; } .nav-stat .num { font-size: 15px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); } .nav-stat .num.pos { color: var(--v-correct); } .nav-stat .num.neg { color: var(--v-mistake); } .nav-stat .label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); } .nav-tool-buttons { display: inline-flex; align-items: center; gap: 4px; } /* 1×20px zone separator between app stats (zone 1) and universal tools (zone 3) */ .nav-sep { width: 1px; height: 20px; background: var(--card-border); flex-shrink: 0; } .nav-tool-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-label); font-weight: 600; cursor: pointer; transition: all var(--transition-fast) ease; text-decoration: none; } .nav-tool-btn:hover { background: color-mix(in srgb, var(--ocean-turquoise) 8%, transparent); color: var(--ocean-deep); border-color: var(--card-border); } [data-theme=dark] .nav-tool-btn:hover { color: var(--ocean-turquoise); } .nav-tool-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .nav-tool-btn kbd { font-family: var(--font-mono); font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--card-border); background: var(--card-bg-2); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════ HERO — page-title band (below the nav bar), particle field ═══════════════════════════════════════════════════════════ */ .page-header { background: linear-gradient(135deg, var(--ocean-midnight) 0%, var(--ocean-deep) 60%, var(--ocean-harbor) 100%); position: relative; overflow: hidden; padding: 16px 0 14px; min-height: 300px; display: flex; align-items: stretch; box-shadow: 0 6px 24px rgba(15,23,42,.08); } body[data-game=mtt] .page-header { background: linear-gradient(135deg, var(--ocean-midnight) 0%, var(--ocean-deep) 45%, var(--accent-terracotta) 118%); } .page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(61,178,191,0.10) 0%, transparent 60%); pointer-events: none; } .page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(61,178,191,.45) 50%, transparent 100%); pointer-events: none; } .ph-inner { position: relative; z-index: 1; width: 100%; max-width: min(96vw, 2200px); margin: 0 auto; padding: 0 var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: 56px; } .ph-text { flex: 1 1 auto; min-width: 0; } .ph-art { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .ph-art svg { height: 272px; width: auto; display: block; filter: drop-shadow(0 6px 20px rgba(0,0,0,.22)); } .ph-eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ocean-turquoise); margin-bottom: 12px; } .page-title { font-size: var(--fs-hero); font-weight: 700; line-height: 1.15; letter-spacing: -.5px; color: #fff; margin-bottom: 10px; } .ph-subtitle { font-size: var(--fs-body); color: rgba(255,255,255,.88); line-height: 1.6; max-width: 640px; } .ph-version { display: none; } /* retired: version lives in Settings → About + sidebar foot (PER-144) */ @media (max-width: 1000px) { .ph-art { display: none; } .ph-inner { gap: 0; } } .hero-bg-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(178,235,242,.4); bottom: -6px; animation: rise 10s linear infinite; } @keyframes rise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: .8; } 100% { transform: translateY(-150px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .particle { animation: none; display: none; } } /* ═══════════════════════════════════════════════════════════ LAYOUT — sidebar (resizable, below nav) + main ═══════════════════════════════════════════════════════════ */ .layout { display: flex; align-items: flex-start; position: relative; } .sidebar { flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); position: sticky; top: var(--nav-total); align-self: flex-start; height: calc(100vh - var(--nav-total)); overflow: hidden; background: var(--card-bg); border-right: 1px solid var(--divider); z-index: 40; transition: margin-left var(--transition-base) var(--ease-out-expo), opacity .18s; } .sb-scroll { height: 100%; overflow-y: auto; margin-right: 6px; display: flex; flex-direction: column; } /* Perceptium line-icon (canonical UI icon: 2px stroke, currentColor) */ .px-ico { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -.125em; } .sb-nav { display: flex; flex-direction: column; gap: 3px; padding: 16px 12px; flex: 1 1 auto; } .sb-nav .nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; background: none; color: var(--text-secondary); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; border-radius: var(--radius-base); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; } .sb-nav .nav-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--c, var(--ocean-turquoise)); transition: color .15s; } .sb-nav .nav-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sb-nav .nav-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--c, var(--ocean-turquoise)) 10%, transparent); } .sb-nav .nav-btn.active { color: #fff; background: linear-gradient(135deg, var(--c, var(--ocean-turquoise)), color-mix(in srgb, var(--c, var(--ocean-turquoise)) 42%, var(--ocean-midnight))); box-shadow: 0 2px 10px color-mix(in srgb, var(--c, var(--ocean-turquoise)) 40%, transparent); } .sb-nav .nav-btn.active .nav-ico { color: #fff; } /* per-item Perceptium colors (Phase 2 refines to full palette + icons) */ #nav-dashboard { --c:#3db2bf; } #nav-analyzer { --c:#007BA7; } #nav-sessions { --c:#2A9D8F; } #nav-hands { --c:#457b9d; } #nav-trainer { --c:#F4A261; } #nav-players { --c:#009FBE; } #nav-leaks { --c:#E76F51; } #nav-variance { --c:#6b5d8a; } #nav-icm { --c:#E6A817; } #nav-goals { --c:#43A047; } #nav-settings { --c:#64748b; } .sb-foot { padding: 14px 18px; border-top: 1px solid var(--divider); } .sb-ver { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); } /* sidebar resize handle (drag right edge · double-click to reset) */ .sidebar-resize-handle { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 41; user-select: none; background: transparent; } .sidebar-resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background var(--transition-fast) ease; } .sidebar-resize-handle:hover::after, body.sb-resizing .sidebar-resize-handle::after { background: var(--ocean-turquoise); } body.sb-resizing { cursor: col-resize; user-select: none; } body.sb-resizing .sidebar { transition: none; } /* main */ .main-col { flex: 1 1 auto; min-width: 0; } .main-col .container { max-width: 2000px; width: 100%; margin: 0 auto; padding: var(--space-lg) var(--space-xl); } /* desktop: hamburger collapses the sidebar (persists) */ @media (min-width: 1025px) { body.sidebar-collapsed .sidebar { margin-left: calc(var(--sidebar-width) * -1); opacity: 0; pointer-events: none; } } /* scrim behind the mobile drawer */ .sidebar-scrim { display: none; position: fixed; inset: var(--nav-total) 0 0 0; background: rgba(4,10,20,.5); z-index: 39; } /* ≤1024px: sidebar becomes an off-canvas drawer opened by the hamburger */ @media (max-width: 1024px) { .sidebar { position: fixed; top: var(--nav-total); left: 0; width: 288px; height: calc(100vh - var(--nav-total)); transform: translateX(-100%); box-shadow: 8px 0 40px rgba(9,30,66,.28); transition: transform var(--transition-base) var(--ease-out-expo); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-scrim { display: block; } .sidebar-resize-handle { display: none; } } /* ═══════════════════════════════════════════════════════════ VIEWS / GRID / CARDS ═══════════════════════════════════════════════════════════ */ .view { display: none; animation: fadeIn .25s var(--ease-out-expo); } .view.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .grid { display: grid; gap: var(--space-md); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.cols-6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 900px) { .grid.cols-4, .grid.cols-6 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: 1fr; } .grid.cols-2 { grid-template-columns: 1fr; } } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--card-shadow); padding: var(--space-lg); transition: box-shadow var(--transition-base) var(--ease-out-expo), border-color var(--transition-base), background var(--transition-base); } .card h2 { font-size: 17px; font-weight: 700; margin-bottom: var(--space-md); letter-spacing: -.1px; display: flex; align-items: center; gap: 10px; } .card h2 .bar { width: 4px; height: 18px; border-radius: 2px; background: var(--ctx-grad); flex-shrink: 0; } .card h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: var(--space-md) 0 var(--space-sm); text-transform: uppercase; letter-spacing: .8px; } /* stat tiles */ .stat-tile { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 14px 16px; } .stat-tile .num { font-size: var(--fs-card); font-weight: 700; font-family: var(--font-mono); line-height: 1.2; } .stat-tile .num.pos { color: var(--v-correct); } .stat-tile .num.neg { color: var(--v-mistake); } .stat-tile .label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-top: 2px; } /* ── forms ─────────────────────────────── */ label.fld { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; } input[type=text], input[type=number], input[type=datetime-local], input[type=date], input[type=password], select, textarea { width: 100%; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-primary); font-size: 15px; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: var(--focus-outline); outline-offset: 1px; box-shadow: var(--focus-ring-input); } .frow { display: flex; gap: var(--space-md); flex-wrap: wrap; } .frow > div { flex: 1; min-width: 130px; } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--ctx-grad); color: #fff; border: none; padding: 9px 18px; border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: transform .12s, box-shadow .12s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(61,178,191,.3); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn.ghost { background: transparent; border: 1px solid var(--card-border); color: var(--text-secondary); } .btn.ghost:hover { color: var(--text-primary); border-color: var(--ocean-turquoise); box-shadow: none; } .btn.danger { background: linear-gradient(135deg, #c0504d, #9e3a37); } .btn.small { padding: 6px 12px; font-size: 13.5px; } /* segmented toggle */ .seg { display: inline-flex; background: var(--input-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: hidden; flex-wrap: wrap; } .seg button { background: none; border: none; color: var(--text-secondary); padding: 7px 13px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .seg button.active { background: var(--ctx-grad); color: #fff; } /* ── tables ─────────────────────────────── */ table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th { text-align: left; padding: 8px 10px; background: var(--table-header-bg); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary); border-bottom: 1px solid var(--divider); } table.data td { padding: 10px 10px; border-bottom: 1px solid var(--divider); } table.data tr:hover td { background: var(--table-hover); } .num-cell { font-family: var(--font-mono); text-align: right; } /* money/number columns align right everywhere — headers too (th default is left, so override) */ table.data th.num-cell, table.data th.right { text-align: right; } .pos { color: var(--v-correct); } .neg { color: var(--v-mistake); } /* ── playing cards ─────────────────────────────── */ .pcard { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 62px; border-radius: 7px; background: #f4f7f9; color: #16202b; font-family: var(--font-mono); font-weight: 700; font-size: 17px; line-height: 1; border: 1px solid #cfd8e0; box-shadow: 0 1px 3px rgba(0,0,0,.35); user-select: none; position: relative; } .pcard .s { font-size: 15px; margin-top: 2px; } .pcard.red { color: #c0392b; } .pcard.empty { background: var(--input-bg); border: 1.5px dashed var(--card-border); color: var(--text-muted); box-shadow: none; font-size: 12px; font-weight: 600; cursor: pointer; } .pcard.empty.slot-active { border-color: var(--ctx-accent); color: var(--ctx-accent); box-shadow: 0 0 0 3px rgba(61,178,191,.18); } .pcard.sm { width: 32px; height: 45px; font-size: 13px; border-radius: 5px; } .pcard.sm .s { font-size: 11px; } .card-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* SVG playing cards fill the sized .pcard box (size still driven by .pcard / .pcard.sm / responsive) */ .pcard-svg { background: none; border: none; box-shadow: none; padding: 0; overflow: visible; } .pcard-svg svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); } /* compact coloured text notation for dense tables (A♠ K♥) */ .cards-txt { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; letter-spacing: .3px; font-size: 13.5px; } .ct + .ct, .cards-txt .ct { } .ct.sc-red { color: #d8352a; } .ct.sc-blu { color: #2b6fb0; } .ct.sc-grn { color: #2e8b57; } .ct.sc-blk { color: var(--text-primary); } [data-theme=dark] .ct.sc-red { color: #f0574c; } [data-theme=dark] .ct.sc-blu { color: #5b9bd6; } [data-theme=dark] .ct.sc-grn { color: #46b377; } /* picker */ .picker { border: 1px solid var(--card-border); border-radius: var(--radius-base); padding: 10px; background: var(--card-bg-2); } .picker .suit-row { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: nowrap; } .pick-card { flex: 1; min-width: 0; padding: 6px 0; text-align: center; border-radius: 5px; background: #f4f7f9; color: #16202b; border: 1px solid #cfd8e0; font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; cursor: pointer; } .pick-card.red { color: #c0392b; } .pick-card:hover { outline: 2px solid var(--ocean-turquoise); } .pick-card.used { opacity: .18; pointer-events: none; } /* ── range grid ─────────────────────────────── */ .range-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; user-select: none; } .rg-cell { aspect-ratio: 1.35; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; font-family: var(--font-mono); border-radius: 3px; cursor: pointer; color: var(--text-muted); background: var(--input-bg); border: 1px solid var(--card-border); } .rg-cell.pair { border-color: var(--ocean-coastal); } .rg-cell.sel { background: linear-gradient(135deg, var(--ocean-turquoise), var(--ocean-coastal)); color: #fff; border-color: transparent; } .rg-cell:hover { outline: 1.5px solid var(--ocean-turquoise); } /* ── verdict chips & analysis ─────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; } /* PER-136 severity chips: minor = amber "close call" (not a counted mistake), blunder = the expensive kind (deep red) */ .chip.minor { background: rgba(230,168,23,.14); color: #b07f0a; border: 1px solid rgba(230,168,23,.4); } [data-theme=dark] .chip.minor { color: #f0c04a; } .chip.blunder { background: #8f1d1d; color: #fff; } /* PER-137 stat chips: the numbers of a decision at a glance (pot odds, equity, EV, MDF) */ .stat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } .schip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border: 1px solid var(--card-border); border-radius: var(--radius-full); background: var(--card-bg-2); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } .schip b { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; } .schip.ok { border-color: rgba(31,163,92,.45); } .schip.ok, .schip.ok b { color: var(--v-correct); } .schip.ok b { opacity: .8; } .schip.bad { border-color: rgba(229,57,53,.4); } .schip.bad { color: var(--v-mistake); } /* PER-94 Coach: the explanation reads like a note from a person, not a log line */ .coach-box { margin-top: 10px; } .coach-note { background: var(--card-bg-2); border: 1px solid var(--card-border); border-left: 3px solid var(--ocean-turquoise); border-radius: var(--radius-base); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; } /* PER-137 "Show the math": formulas collapse out of the way, one click brings them back */ details.math-fold { margin: 4px 0 2px; } details.math-fold summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); user-select: none; padding: 2px 0; } details.math-fold summary:hover { color: var(--ocean-turquoise); } details.math-fold[open] summary { margin-bottom: 4px; } .chip.correct { background: var(--v-correct); color: #fff; border: none; } .chip.marginal { background: var(--v-marginal); color: #fff; border: none; } .chip.mistake { background: var(--v-mistake); color: #fff; border: none; } .chip.neutral { background: var(--table-header-bg); color: var(--text-secondary); border: 1px solid var(--card-border); } .eq-bar { height: 14px; border-radius: 7px; background: var(--input-bg); overflow: hidden; display: flex; border: 1px solid var(--card-border); } .eq-bar .win { background: linear-gradient(90deg, var(--accent-teal-green), var(--ocean-turquoise)); } .eq-bar .tie { background: var(--accent-amber); opacity: .75; } .eq-marker { position: relative; height: 0; } .eq-marker .tick { position: absolute; top: -18px; width: 2px; height: 22px; background: var(--v-mistake); } .eq-marker .tick::after { content: attr(data-l); position: absolute; top: -15px; left: -20px; width: 44px; text-align: center; font-size: 10px; color: var(--v-mistake); font-weight: 700; } .analysis-detail { margin-top: 8px; font-size: 14px; color: var(--text-secondary); } .analysis-detail li { margin-left: 18px; margin-bottom: 3px; font-size: 14px; } .street-block { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); background: var(--card-bg); } .street-block.locked { opacity: .45; pointer-events: none; } .street-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ocean-turquoise); margin-bottom: 10px; display:flex; justify-content: space-between; align-items:center; } /* position ring */ .pos-ring { display: flex; gap: 6px; flex-wrap: wrap; } .pos-btn { padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-secondary); font-weight: 700; font-size: 14px; cursor: pointer; } .pos-btn.active { background: var(--ctx-grad); color: #fff; border-color: transparent; } .pos-btn .tag { font-size: 11px; display: block; font-weight: 600; opacity: .75; } /* modal */ .modal-back { position: fixed; inset: 0; background: rgba(4,10,20,.72); z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; } .modal { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--space-lg); max-width: 720px; width: 100%; box-shadow: 0 12px 48px rgba(0,0,0,.5); animation: fadeIn .2s var(--ease-out-expo); } /* size variants: content decides — forms stay compact, tables/grids get room */ .modal.modal-md { max-width: min(980px, 96vw); } .modal.modal-lg { max-width: min(1280px, 96vw); } .modal h2 { font-size: 16px; margin-bottom: var(--space-md); } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .modal-head h2 { margin-bottom: var(--space-md); min-width: 0; } .modal-head .btn { flex: 0 0 auto; } /* charts */ .chart-wrap svg { width: 100%; max-width: 720px; height: auto; display: block; } /* ---- visual overhaul v1: equity meter, insight cards, zone bars ---- */ .eqm { position: relative; margin: 15px 0 3px; } .eqm-track { position: relative; height: 24px; border-radius: 6px; background: var(--card-bg-2); border: 1px solid var(--card-border); overflow: hidden; } .eqm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px 0 0 6px; opacity: .9; } .eqm-num { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font: 700 11.5px var(--font-mono, ui-monospace, monospace); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.75); background: rgba(6,16,28,.45); padding: 1px 5px; border-radius: 4px; z-index: 3; } .eqm-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text-primary); opacity: .85; z-index: 2; } .eqm-need { position: absolute; top: -9px; transform: translateX(-50%); font: 600 9.5px var(--font-mono, ui-monospace, monospace); color: var(--text-secondary); background: var(--card-bg); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--card-border); white-space: nowrap; z-index: 4; } .eqm-cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; flex-wrap: wrap; } .eqm-cap .mut { color: var(--text-muted); } .eqm-cap b { color: var(--text-primary); } .eqm-cap .ok { color: var(--v-correct); font-weight: 600; } .eqm-cap .bad { color: var(--v-mistake); font-weight: 600; } .insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; } .ins { border: 1px solid var(--card-border); border-left-width: 3px; border-radius: 9px; padding: 12px 14px; background: var(--card-bg-2); } .ins.neg { border-left-color: var(--v-mistake); } .ins.pos { border-left-color: var(--v-correct); } .ins.warn { border-left-color: var(--v-marginal); } .ins .it { font-size: 13.5px; font-weight: 600; margin: 0 0 3px; display: flex; align-items: center; gap: 7px; color: var(--text-primary); } .ins.neg .ic { color: var(--v-mistake); } .ins.pos .ic { color: var(--v-correct); } .ins.warn .ic { color: var(--v-marginal); } .ins .ib { color: var(--text-secondary); font-size: 12.5px; margin: 0; line-height: 1.45; } .zb { max-width: 660px; } .zb-row { display: grid; grid-template-columns: 104px 1fr 96px; align-items: center; gap: 10px; margin: 5px 0; } .zb-lbl { font-size: 12.5px; color: var(--text-secondary); text-align: right; white-space: nowrap; } .zb-track { position: relative; height: 22px; border-radius: 6px; border: 1px solid var(--card-border); } .zb-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--text-muted); opacity: .5; } .zb-bar { position: absolute; top: 3px; height: 14px; border-radius: 4px; opacity: .92; } .zb-val { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; } .zb-val.pos { color: var(--v-correct); } .zb-val.neg { color: var(--v-mistake); } .zb-val.mid { color: var(--v-marginal); } /* deep (exact) analysis UI */ .deep-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin: 2px 0 12px; } .deep-badge.ok { background: color-mix(in srgb, var(--v-correct) 16%, transparent); color: var(--v-correct); } .deep-badge.warn { background: color-mix(in srgb, var(--v-marginal) 18%, transparent); color: var(--v-marginal); } .meth { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); letter-spacing: .2px; } .meth.ok { color: var(--v-correct); opacity: .92; } .pill-quick { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; color: var(--v-marginal); background: color-mix(in srgb, var(--v-marginal) 16%, transparent); border-radius: 6px; padding: 0 5px; vertical-align: 1px; } .deep-stat { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; } .deep-stat b { color: var(--text-primary); font-variant-numeric: tabular-nums; } .deep-bar { height: 8px; border-radius: 5px; background: var(--card-bg-2); border: 1px solid var(--card-border); overflow: hidden; } .deep-fill { height: 100%; background: linear-gradient(90deg, var(--ocean-turquoise), var(--v-correct)); transition: width .4s ease; } /* outs as cards + read-only range grid (per-decision) */ .outs-sec { margin: 13px 0 4px; } .outs-head { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .outs-sub { color: var(--text-muted); font-weight: 400; } .outs-row { display: flex; gap: 7px; align-items: flex-end; flex-wrap: wrap; } .out { text-align: center; } .out small { display: block; font-size: 10px; color: var(--v-correct); font-family: var(--font-mono); margin-top: 3px; } .rgv-wrap { margin-top: 14px; } .rgv-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; } .rgv { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; max-width: 560px; container-type: inline-size; } .rgv-cell { aspect-ratio: 1; border-radius: 2px; font-size: clamp(7.5px, 1.9cqw, 11px); font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--card-bg-2); border: 1px solid transparent; } .rgv-cell.in { background: linear-gradient(180deg, #2f7fb0, #245f86); color: #eaf4fb; border-color: #3d92c9; } .rgv-cell.pair.in { background: linear-gradient(180deg, #2fa36b, #1e7d52); } .rgv-cell.hero { outline: 2px solid var(--v-marginal); color: #fff; } .legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; flex-wrap: wrap; } .legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; } /* misc */ .muted { color: var(--text-muted); font-size: 13px; } .sec-note { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; } .right { text-align: right; } .mt { margin-top: var(--space-md); } .mb { margin-bottom: var(--space-md); } .flex { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; } .flex select { width: auto; max-width: 260px; } .spread { justify-content: space-between; } .hidden { display: none !important; } .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: rot .7s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ocean-deep); color: #fff; padding: 10px 22px; border-radius: var(--radius-base); border: 1px solid var(--ocean-coastal); font-size: 13.5px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: fadeIn .2s; } /* login overlay */ #login-overlay .box input { width: 100%; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); font-size: var(--fs-body); margin-top: 4px; } #login-overlay { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ocean-midnight), var(--ocean-deep)); } #login-overlay .box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 32px; width: 320px; } #login-overlay { padding: max(16px, var(--safe-top)) 16px max(16px, var(--safe-bottom)); overflow-y: auto; } /* PER-141 paywall variant: the plan picker needs ROOM — wide box, side-by-side plans on anything wider than a phone, single column below 700px. */ #login-overlay .box.paywall { width: min(680px, 100%); max-height: 100%; overflow-y: auto; } .pw-plans { display: grid; gap: 12px; margin-bottom: 10px; } .pw-plan { border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; } .pw-plan.best { box-shadow: 0 0 0 2px var(--ocean-turquoise) inset; } .pw-plan .pw-blurb { flex: 1; } .pw-plan .btn { margin-top: 12px; } .pw-seg { display: flex; gap: 6px; margin-bottom: 14px; } .pw-seg button { flex: 1; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--card-border); background: transparent; color: var(--text-secondary); font-weight: 700; font-size: 13px; cursor: pointer; } .pw-seg button.active { background: linear-gradient(135deg, var(--ocean-turquoise), var(--ocean-cerulean)); color: #fff; border-color: transparent; } @media (min-width: 700px) { .pw-plans { grid-template-columns: 1fr 1fr; } } /* keep anchored scrolls clear of the sticky nav */ .card, .street-block, .pcard { scroll-margin-top: 76px; } /* ── visual poker table ─────────────────────────────── */ .ptable-wrap { position: relative; width: 100%; max-width: 1040px; margin: 10px auto 0; } .ptable { position: relative; width: 100%; aspect-ratio: 2 / 1.06; } .ptable .felt { position: absolute; inset: 7% 9%; border-radius: 50% / 52%; background: radial-gradient(ellipse at 50% 38%, var(--ocean-harbor) 0%, var(--ocean-deep) 55%, var(--ocean-midnight) 100%); border: 3px solid var(--ocean-coastal); box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 6px 24px rgba(9,30,66,.35); } .ptable .felt::after { content: ''; position: absolute; inset: 9%; border-radius: 50% / 52%; border: 1.5px solid rgba(61,178,191,.25); } .ptable .felt-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(178,235,242,.28); font-weight: 700; letter-spacing: 3px; font-size: 13px; text-transform: uppercase; user-select: none; text-align: center; } .seat { position: absolute; transform: translate(-50%, -50%); min-width: 62px; padding: 7px 9px 6px; border-radius: 12px; text-align: center; background: var(--card-bg); border: 2px solid var(--card-border); cursor: pointer; user-select: none; transition: border-color .15s, box-shadow .15s, background .15s; z-index: 2; } .seat:hover { border-color: var(--ocean-turquoise); } .seat .pos { font-weight: 800; font-size: 14px; letter-spacing: .5px; line-height: 1.1; } .seat .who { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; } .seat.hero { background: var(--ctx-grad); border-color: var(--ocean-mist); color: #fff; box-shadow: 0 0 0 4px rgba(61,178,191,.25); } .seat.hero .who { color: rgba(255,255,255,.9); } .seat.villain { border-color: var(--accent-terracotta); box-shadow: 0 0 0 3px rgba(199,91,63,.18); } .seat.villain .who { color: var(--accent-terracotta); } .seat.empty { opacity: .62; } .seat .disc { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: #f4f7f9; color: #16202b; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--accent-amber); box-shadow: 0 1px 4px rgba(0,0,0,.4); } .seat .blind-chip { position: absolute; top: -9px; left: -9px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 4px; font-size: 9.5px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; background: var(--ocean-cerulean); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.4); } .seat .blind-chip.sb { background: var(--accent-teal-green); } .table-legend { display: flex; gap: 16px; justify-content: center; margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; } .table-legend b { color: var(--text-primary); } .villain-editors { margin-top: 12px; } .felt-board { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 5px; z-index: 1; } .felt-pot { position: absolute; top: 63%; left: 50%; transform: translateX(-50%); background: rgba(9,30,66,.75); border: 1px solid rgba(61,178,191,.4); color: #cfe9ee; padding: 3px 14px; border-radius: var(--radius-full); font-size: var(--fs-label); font-weight: 700; letter-spacing: .5px; z-index: 1; white-space: nowrap; } .seat .mini-cards { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; } .seat .mini-cards .pcard { width: 24px; height: 33px; font-size: 10px; border-radius: 4px; } .seat .mini-cards .pcard .s { font-size: 8.5px; margin-top: 0; } /* quick bet-size buttons */ .qsize { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; } .qsize button { padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-secondary); font-size: 12.5px; font-weight: 700; cursor: pointer; } .qsize button:hover { border-color: var(--ctx-accent); color: var(--ctx-accent); } /* ═══ analyzer two-column layout with sticky matrix ═══ */ .analyzer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: var(--space-lg); align-items: start; } .matrix-col { position: sticky; top: calc(var(--nav-total) + 12px); } @media (max-width: 1100px) { .analyzer-grid { grid-template-columns: 1fr; } .matrix-col { position: static; } } /* chart matrix */ .mx-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; } .mx-cell { aspect-ratio: 1.1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; border-radius: 4px; color: rgba(255,255,255,.92); background: var(--card-bg-2); user-select: none; } .mx-cell.fold { background: var(--card-bg-2); color: var(--text-muted); } .mx-cell.raise { background: #2A9D8F; } .mx-cell.call { background: #E6A817; } .mx-cell.threebet { background: #E76F51; } .mx-cell.hero-cell { outline: 2.5px solid var(--ocean-turquoise); outline-offset: 1px; transform: scale(1.12); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .mx-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; } .mx-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1.5px; } .mx-title { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 700; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — nav bar + hero on small screens ═══════════════════════════════════════════════════════════ */ /* brand-book collapse ladder (Shared Header → Responsive collapse), with one deliberate product-app deviation: the APP NAME never disappears. The book's "brand text hidden ≤900px" rule is written for platform DOC pages where the Pe tile alone suffices; a standalone product keeps its name at every width (CEO decision, 2026-07-22). */ @media (max-width: 1280px) { .brand-tagline { display: none; } } @media (max-width: 1024px) { .nav-tool-btn span, .nav-tool-btn kbd { display: none; } /* icon-only tools */ .nav-tool-btn { padding: 0 9px; } } @media (max-width: 900px) { .nav-stats { display: none; } .nav-sep { display: none; } .page-header { min-height: 210px; } } @media (max-width: 640px) { .page-header { min-height: 0; padding: 22px 0 24px; } .page-title { font-size: var(--fs-page); } .ph-subtitle { font-size: var(--fs-small); } /* tight phone nav: everything compresses BEFORE the app name does */ .brand-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .nav-left { gap: 8px; } .brand { gap: 8px; } .hamburger-btn { width: 34px; } .nav-tool-btn { padding: 0 6px; height: 32px; } .nav-tool-buttons { gap: 2px; } .nav-tools { gap: 8px; } .nav-inner { padding: 0 max(10px, var(--safe-right)) 0 max(10px, var(--safe-left)); gap: 8px; } .main-col .container { padding: var(--space-md) 12px; } } /* ═══ mobile analyzer polish — finger-sized targets, readable cells ═══ */ @media (max-width: 640px) { .pcard { width: 44px; height: 62px; font-size: 16px; } .pcard.sm { width: 34px; height: 48px; font-size: 13px; } .seat { min-width: 54px; padding: 6px 7px 5px; } .seat .pos { font-size: 13px; } .seat .who { font-size: 10px; } .mx-cell { font-size: 11px; border-radius: 3px; } .seg button { padding: 9px 15px; } .pos-btn { padding: 9px 15px; } .btn { padding: 11px 18px; } .btn.small { padding: 8px 13px; } input[type=text], input[type=number], input[type=datetime-local], input[type=date], input[type=password], select, textarea { padding: 11px 12px; font-size: 16px; } } /* ═══ search + help modals ═══ */ .search-list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow: auto; } .search-result { display: block; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 9px 12px; transition: background .12s, border-color .12s; } .search-result:hover, .search-result:focus-visible { background: color-mix(in srgb, var(--ocean-turquoise) 8%, transparent); border-color: var(--card-border); outline: none; } .sr-title { font-size: var(--fs-small); font-weight: 700; color: var(--text-primary); } .sr-sub { font-size: var(--fs-label); color: var(--text-muted); margin-top: 1px; } .help-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: var(--fs-small); color: var(--text-secondary); } kbd.help-kbd { font-family: var(--font-mono); font-size: 11px; min-width: 24px; text-align: center; flex-shrink: 0; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--card-border); background: var(--card-bg-2); color: var(--text-secondary); } /* styled tooltip (Perceptium look · upgrades native title on UI chrome) */ .px-tip { position: fixed; z-index: 400; pointer-events: none; max-width: 240px; background: var(--ocean-midnight); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid rgba(61,178,191,.35); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease; } .px-tip.show { opacity: 1; transform: none; } [data-theme=dark] .px-tip { background: #0c1829; border-color: rgba(61,178,191,.45); } /* ── analytics page (hole cards / positions / opponents / bankroll) ── */ .hc-lbl .so { font-size: .8em; font-weight: 700; opacity: .78; margin-left: .5px; } .an-filter { padding: 13px 16px; } .an-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; } .an-filter-row input[type=date] { padding: 7px 9px; } .an-presets { display: flex; gap: 6px; flex-wrap: wrap; } .an-disp { margin-left: auto; font-size: 12px; align-self: center; } .an-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-md); } .an-stat { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 11px 18px; min-width: 128px; } .an-stat .num { font-size: 22px; font-weight: 700; font-family: var(--font-mono); line-height: 1.15; } .an-stat .num.pos { color: var(--v-correct); } .an-stat .num.neg { color: var(--v-mistake); } .an-stat .label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-top: 3px; } /* hole-cards heatmap */ .hc-scroll { overflow-x: auto; } .hc-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; min-width: 680px; max-width: 1040px; margin: 0 auto; } .hc-cell { position: relative; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--card-border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px; overflow: hidden; background: var(--card-bg-2); } .hc-cell.pair { box-shadow: inset 0 0 0 1.5px var(--ocean-coastal); } .hc-cell.empty { opacity: .5; } .hc-cell.clk { cursor: pointer; } .hc-cell.clk:hover { outline: 2px solid var(--ocean-turquoise); outline-offset: -1px; z-index: 2; } .hc-lbl { font-size: 14px; font-weight: 800; color: var(--text-primary); line-height: 1; } .hc-val { font-size: 12px; font-weight: 700; font-family: var(--font-mono); line-height: 1.15; margin-top: 3px; color: var(--text-primary); } .hc-n { position: absolute; top: 2px; right: 4px; font-size: 9px; color: var(--text-muted); font-weight: 700; } /* poker-table seats — analytics variant (reuses .ptable / .felt / .seat) */ .seat.an-seat { min-width: 78px; cursor: default; } .seat.an-seat:hover { border-color: var(--card-border); } .seat-wl { font-family: var(--font-mono); font-weight: 800; font-size: 13px; line-height: 1.15; margin-top: 1px; } .seat-wl.pos { color: var(--v-correct); } .seat-wl.neg { color: var(--v-mistake); } .seat-sub { font-size: 9.5px; color: var(--text-muted); font-weight: 600; margin-top: 1px; white-space: nowrap; } .ptable-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 1; color: #cfe8ee; pointer-events: none; } .pc-lbl { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; opacity: .55; font-weight: 700; } .pc-wl { font-family: var(--font-mono); font-weight: 800; font-size: 20px; line-height: 1.2; } .pc-wl.pos { color: #67e0a3; } .pc-wl.neg { color: #ff8a84; } .pc-sub { font-size: 10.5px; opacity: .75; margin-top: 2px; } /* fold review verdict (PER-115) */ .fold-review { margin-top: 10px; padding: 11px 13px; border-radius: var(--radius-base); border: 1px solid var(--card-border); border-left-width: 4px; background: var(--card-bg-2); } .fold-review.ok { border-left-color: var(--v-correct); } .fold-review.warn { border-left-color: var(--v-marginal); } .fold-review.neutral { border-left-color: var(--ocean-coastal); } .fr-head { font-weight: 700; font-size: 13.5px; } .fold-review.ok .fr-head { color: var(--v-correct); } .fold-review.warn .fr-head { color: var(--v-marginal); } .fr-cards { font-size: 12px; color: var(--text-secondary); margin-top: 6px; } .fr-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } /* current bankroll under the starting-bankroll field (PER-119) */ .now-bank { font-size: 12px; color: var(--text-secondary); margin-top: 4px; } .now-bank b.pos { color: var(--v-correct); } .now-bank b.neg { color: var(--v-mistake); } /* Cashier — real-balance hero + P&L split (PER-122) */ .cash-hero { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .cash-hero-main { min-width: 220px; } .cash-hero-lbl { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .cash-hero-val { font-size: 40px; font-weight: 800; font-family: var(--font-mono); line-height: 1.1; margin-top: 4px; color: var(--v-correct); } .cash-hero-edit { flex: 1; min-width: 260px; max-width: 420px; } .cash-bal-input { flex: 1; min-width: 120px; } .zb-clk { cursor: pointer; } .zb-clk:hover { background: var(--hover-bg, rgba(127,127,127,.08)); } /* game-type selector sits on its own row (display:flex makes it block-level so the sub-tabs wrap below it instead of running inline) */ .gt-seg { display: flex; width: fit-content; max-width: 100%; margin-bottom: 12px; } .seat.an-seat.clk { cursor: pointer; } .seat.an-seat.clk:hover { border-color: var(--ocean-turquoise); box-shadow: 0 0 0 3px rgba(61,178,191,.2); } /* interactive line chart (hover crosshair + tooltip) */ .ilc { position: relative; } .ilc-svg { position: relative; cursor: crosshair; } .ilc-tip { position: absolute; top: 8px; pointer-events: none; z-index: 5; background: var(--ocean-midnight); color: #fff; border: 1px solid rgba(61,178,191,.4); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 12px; box-shadow: var(--shadow-md); opacity: 0; transition: opacity .1s ease; min-width: 120px; } .ilc-tip.show { opacity: 1; } [data-theme=dark] .ilc-tip { background: #0c1829; } html:not([data-theme=dark]) .ilc-tip { background: #1d3557; } .ilc-tip-h { font-weight: 700; font-size: 11px; opacity: .85; margin-bottom: 4px; letter-spacing: .3px; } .ilc-tip-r { display: flex; align-items: center; gap: 5px; line-height: 1.5; } .ilc-tip-r b { font-family: var(--font-mono); margin-left: auto; padding-left: 10px; } .ilc-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0; } /* opponents diverging bars */ .opp-bars { display: flex; flex-direction: column; gap: 5px; } .opp-row { display: grid; grid-template-columns: 64px 1fr 76px; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; } .opp-row.clk { cursor: pointer; } .opp-row.clk:hover { background: var(--card-bg-2); } .opp-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; } .opp-track { position: relative; height: 18px; background: var(--card-bg-2); border-radius: 4px; } .opp-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--card-border); } .opp-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 2px; } .opp-bar.pos { background: var(--v-correct); } .opp-bar.neg { background: var(--v-mistake); } .opp-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-align: right; } .opp-val.pos { color: var(--v-correct); } .opp-val.neg { color: var(--v-mistake); } /* clickable zone bars (Leaks winrate by position → drill) */ .zb-row.zb-clk { cursor: pointer; border-radius: 6px; transition: background .12s; } .zb-row.zb-clk:hover { background: var(--card-bg-2); } /* Leaks winrate trend badge (vs prior period) */ .wr-trend { margin-left: 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .wr-trend.up { color: var(--v-correct); } .wr-trend.down { color: var(--v-mistake); } .wr-trend.flat { color: var(--text-muted); } /* frequency-split strategy cells (GTO-Wizard style) */ .mx-cell.strat { color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .mx-cell.strat.foldcell { color: var(--text-muted); text-shadow: none; font-weight: 700; } .mx-legend .sw.split { background: linear-gradient(90deg, #E76F51 0 40%, #E6A817 40% 70%, var(--card-bg-2) 70% 100%); } /* preflop ranges viewer */ .range-controls { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-start; } .range-vs-controls { display: flex; flex-wrap: wrap; gap: 18px 24px; } .range-pct { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ocean-turquoise); white-space: nowrap; } .range-matrix-wrap { max-width: 560px; margin: 4px auto 0; } .range-matrix-wrap .mx-grid { gap: 3px; } .range-matrix-wrap .mx-cell { font-size: 13px; border-radius: 5px; } .range-detail { margin-top: 10px; font-size: 13.5px; font-weight: 600; font-family: var(--font-mono); } @media (max-width: 640px) { .range-matrix-wrap .mx-cell { font-size: 10px; } } /* drill modal table */ .an-modal-table { max-height: 60vh; overflow-y: auto; } .an-modal-table table { width: 100%; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--ocean-turquoise); } th.sortable.active { color: var(--ocean-turquoise); } /* PER-140 1B: e-mail verify reminder bar (multi/SaaS mode only) */ .verify-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px max(14px, var(--safe-right)) 8px max(14px, var(--safe-left)); background: color-mix(in srgb, var(--v-marginal) 13%, var(--card-bg)); border-bottom: 1px solid var(--card-border); font-size: 13px; flex-wrap: wrap; } .verify-bar .vb-x { background: none; border: 0; color: var(--text-muted); font-size: 17px; cursor: pointer; padding: 0 4px; line-height: 1; } .verify-bar .vb-x:hover { color: var(--text-primary); } /* PER-145: every other table header sorts too (generic DOM sorter in ui.js) */ table.data thead th { cursor: pointer; user-select: none; } table.data thead th.no-sort { cursor: default; } table.data thead th:hover { color: var(--ocean-turquoise); } th.sorted-asc::after { content: ' ▲'; font-size: 10px; color: var(--ocean-turquoise); } th.sorted-desc::after { content: ' ▼'; font-size: 10px; color: var(--ocean-turquoise); } /* custom Perceptium date picker */ .dfield { position: relative; display: inline-block; } .dfield-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: space-between; padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-primary); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .15s; } .dfield-btn:hover { border-color: var(--ocean-turquoise); } .dfield-btn.set { border-color: var(--ocean-coastal); } .dfield-ico { display: inline-flex; color: var(--text-muted); } .dfield-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 260px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px; } .dfield-pop.hidden { display: none; } .dfield-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dfield-title { font-weight: 700; font-size: 14px; } .dfield-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-primary); font-size: 18px; line-height: 1; cursor: pointer; } .dfield-nav:hover { border-color: var(--ocean-turquoise); color: var(--ocean-turquoise); } .dfield-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dfield-dow { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding: 2px 0 4px; } .dfield-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12.5px; border-radius: 7px; cursor: pointer; color: var(--text-primary); } .dfield-day:hover { background: var(--card-bg-2); } .dfield-day.empty { pointer-events: none; } .dfield-day.today { outline: 1.5px solid var(--ocean-coastal); } .dfield-day.sel { background: var(--ctx-grad); color: #fff; font-weight: 700; } .dfield-foot { display: flex; justify-content: space-between; margin-top: 10px; } .dfield-clear, .dfield-todaybtn { background: none; border: none; color: var(--ocean-turquoise); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .dfield-clear:hover, .dfield-todaybtn:hover { background: var(--card-bg-2); } @media (max-width: 720px) { .an-disp { margin-left: 0; } .hc-grid { min-width: 560px; } .hc-lbl { font-size: 11px; } .hc-val { font-size: 9px; } .ptable { aspect-ratio: 1.15 / 1; } /* taller felt so 6 seats + centre don't collide */ .seat.an-seat { min-width: 54px; padding: 4px 5px; } .seat .pos { font-size: 12px; } .seat-wl { font-size: 11px; } .seat-sub { font-size: 7.5px; } .pc-wl { font-size: 16px; } .pc-sub { display: none; } /* per-seat F/SD lives in the breakdown table below */ .opp-row { grid-template-columns: 56px 1fr 64px; } } /* ── PER-88: narrowed villain range panel (analyzer + hand modal) ── */ .vr-panel { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--card-border); } .vr-comp { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 1px; margin: 7px 0 5px; } .vr-seg { min-width: 3px; } .vr-monster, .sw.vr-monster { background: #b02a2a; } .vr-twopair, .sw.vr-twopair { background: #E76F51; } .vr-overpair, .sw.vr-overpair { background: #E6A817; } .vr-toppair, .sw.vr-toppair { background: #d4a017; } .vr-midpair, .sw.vr-midpair { background: #8fa3b8; } .vr-flushdraw, .sw.vr-flushdraw { background: #2f7fb0; } .vr-straightdraw, .sw.vr-straightdraw { background: #3db2bf; } .vr-air, .sw.vr-air { background: #55657a; } /* ── PER-134: analyzer Table card layout — content-sized controls on one rhythm ── */ .frow.frow-snug { gap: 12px 22px; align-items: flex-end; } .frow.frow-snug > div { flex: 0 1 auto; min-width: 0; } .frow.frow-snug input[type=number] { width: 130px; } .ptable { aspect-ratio: 2 / 0.92; } .ptable-wrap { max-width: 980px; } .seat .blind-chip { top: 50%; left: -26px; transform: translateY(-50%); } .table-legend { margin-top: 10px; margin-bottom: 4px; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE LAYER v1.2.0 — one breakpoint system for the whole app phone ≤640 · tablet 641-1024 · desktop 1025-1440 · wide ≥1441 Principles: phones get full-screen sheets and denser tables with low-priority columns hidden (.hide-p); desktops get modals sized to their content instead of one fixed 720px column. ═══════════════════════════════════════════════════════════ */ /* tablet and down: slightly tighter page gutters */ @media (max-width: 1024px) { .main-col .container { padding: var(--space-lg) var(--space-md); } } /* ── PER-144: wide data tables SCROLL on phones instead of squeezing ── Cells keep their natural width: a number, a date or a "−$126.71" never breaks mid-value again. The card (or modal) pans sideways, the standard pattern for analytics tables. Long prose columns opt back into wrapping with .wrap so they read at a sane width instead of forcing a huge table. */ @media (max-width: 700px) { .card, .modal { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { min-width: max-content; } table.data th, table.data td { white-space: nowrap; } table.data th.wrap, table.data td.wrap { white-space: normal; min-width: 200px; max-width: 260px; } } /* ── phone ─────────────────────────────────────────────── */ @media (max-width: 640px) { /* compact hero: the title band should not eat half the first screen */ .page-header { min-height: 0; padding: 10px 0 12px; } .page-title { font-size: 30px; margin-bottom: 6px; } .ph-eyebrow { margin-bottom: 6px; } .ph-subtitle { font-size: 13.5px; line-height: 1.45; } .main-col .container { padding: var(--space-md) max(10px, var(--safe-right)) calc(var(--space-md) + var(--safe-bottom)) max(10px, var(--safe-left)); } .card { padding: var(--space-md); } /* every modal becomes a full-screen sheet with a sticky header */ .modal-back { padding: 0; align-items: stretch; } .modal, .modal.modal-md, .modal.modal-lg { max-width: 100%; width: 100%; min-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; padding: 0 12px calc(20px + env(safe-area-inset-bottom)); } .modal-head { position: sticky; top: 0; z-index: 6; background: var(--card-bg); padding: calc(12px + var(--safe-top)) 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--divider); } .modal-head h2 { margin-bottom: 0; font-size: 15px; } /* denser data tables + drop low-priority columns */ table.data { font-size: 12.5px; } table.data th { padding: 7px 6px; font-size: 10px; letter-spacing: .4px; } table.data td { padding: 8px 6px; } table.data .chip { font-size: 11px; padding: 2px 8px; } .hide-p { display: none !important; } /* analyzer felt: keep the outside blind chips inside the viewport */ .ptable { margin: 0 14px; } /* stat tile rows breathe a little less */ .stat-tile { padding: 11px 12px; } .stat-tile .num { font-size: 17px; } } /* ── wide desktop: let the shell use the space ─────────── */ @media (min-width: 1441px) { .main-col .container { padding: var(--space-xl) var(--space-2xl); } }