/* ================================================================
PREFLOP RANGE VISUALIZER — stylesheet
Mobile-first, then desktop (≥820px) overrides.
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* ---- Theme: Forest Dark (default) ---- */
:root,
[data-theme="forest-dark"] {
--bg: #18191c;
--bg-soft: #232529;
--bg-card: #1f2126;
--line: #353941;
--text: #f4f4f5;
--text-dim: #9aa0a8;
--accent: #d97757;
--accent-dk: #b85c3e;
--felt-1: #1f5a3e;
--felt-2: #154130;
--felt-3: #0a2418;
--felt-rim: #08090c;
--out: #232529;
--out-text: #5d6470;
--pair: #f59e0b;
--suited: #4ade80;
--offsuit: #38bdf8;
--action-call: #2dd4bf;
--action-3bet-value: #ef4444;
--action-3bet-bluff: #ec4899;
--action-4bet-value: #dc2626;
--action-4bet-bluff: #d946ef;
--action-allin: #eab308;
--bg-gradient-1: #2a2326;
--bg-gradient-2: #1d1c20;
--radius: 10px;
--shadow: 0 4px 14px rgba(0,0,0,0.45);
--color-scheme: dark;
}
/* ---- Theme: Midnight (OLED-friendly, cool blue accents) ---- */
[data-theme="midnight"] {
--bg: #050608;
--bg-soft: #0f1116;
--bg-card: #14171f;
--line: #242a36;
--text: #e6e8ed;
--text-dim: #8b92a3;
--accent: #60a5fa;
--accent-dk: #3b82f6;
--felt-1: #0d3d2a;
--felt-2: #082d1e;
--felt-3: #041810;
--felt-rim: #000;
--out: #11141a;
--out-text: #4a5263;
--pair: #fbbf24;
--suited: #34d399;
--offsuit: #38bdf8;
--action-call: #5eead4;
--action-3bet-value: #f87171;
--action-3bet-bluff: #f472b6;
--action-4bet-value: #ef4444;
--action-4bet-bluff: #e879f9;
--action-allin: #facc15;
--bg-gradient-1: #0a0d18;
--bg-gradient-2: #060810;
--shadow: 0 4px 14px rgba(0,0,0,0.7);
--color-scheme: dark;
}
/* ---- Theme: Daylight (warm light, low-glare) ---- */
[data-theme="daylight"] {
--bg: #faf6ee;
--bg-soft: #efe8d8;
--bg-card: #ffffff;
--line: #d4cdba;
--text: #2a2723;
--text-dim: #6b6558;
--accent: #c4521f;
--accent-dk: #a3411a;
--felt-1: #2d7a52;
--felt-2: #1f5a3a;
--felt-3: #144028;
--felt-rim: #0a2418;
--out: #e8e1cf;
--out-text: #968d7a;
--pair: #d97706;
--suited: #16a34a;
--offsuit: #0284c7;
--action-call: #0d9488;
--action-3bet-value: #dc2626;
--action-3bet-bluff: #db2777;
--action-4bet-value: #b91c1c;
--action-4bet-bluff: #c026d3;
--action-allin: #ca8a04;
--bg-gradient-1: #f5ecdc;
--bg-gradient-2: #ecdfc4;
--shadow: 0 4px 14px rgba(0,0,0,0.12);
--color-scheme: light;
}
html { color-scheme: var(--color-scheme); }
body {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
background: radial-gradient(ellipse at 18% -8%, var(--bg-gradient-1) 0%, transparent 55%),
radial-gradient(ellipse at 92% 108%, var(--bg-gradient-2) 0%, transparent 50%),
var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* ================================================================
Top bar / footer
================================================================ */
.topbar {
text-align: center;
padding: 0.75rem 1rem 0.4rem;
/* On mobile the account-btn is absolutely positioned in the corner;
this padding reserves space so it doesn't overlap the first section. */
padding-right: 3.2rem;
}
.topbar h1 {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.1rem;
letter-spacing: -0.01em;
}
/* Subtitle is hidden everywhere — the title alone is enough. Kept in
the DOM so screen-readers / SEO still see it, but never rendered. */
.subtitle {
display: none;
}
@media (min-width: 820px) {
/* Account-btn sits in the topbar's absolute right corner; on mobile we
reserve padding-right to avoid overlap with the first section, but on
desktop the topbar is short and centred so the default 1rem is fine. */
.topbar { padding-right: 1rem; }
}
main {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 0 0.55rem 0.75rem;
}
footer {
text-align: center;
color: var(--text-dim);
font-size: 0.7rem;
padding: 0.3rem 1rem 0.6rem;
}
footer a { color: var(--accent); }
/* Desktop: hide the bottom attribution line entirely — it's redundant with
the README and clutters the otherwise clean two-column layout. Kept
visible on mobile where the footer is the natural place for the credit. */
@media (min-width: 820px) {
footer { display: none; }
}
.scenario, .grid-wrap, .range-bar {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* ================================================================
SCENARIO panel
================================================================ */
.scenario {
padding: 0.65rem 0.75rem 0.7rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
/* Mobile-only collapse toggle for the scenario panel.
Hidden on desktop. The corresponding scenario-body wraps everything except
the always-visible hero-row, so collapsing only hides setup chrome. */
.scenario-toggle {
display: none;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
background: none;
border: none;
color: var(--text);
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
padding: 0.35rem 0.25rem;
cursor: pointer;
text-align: left;
}
.st-summary { color: var(--accent); }
.st-chevron {
flex-shrink: 0;
color: var(--text-dim);
transition: transform 0.2s ease;
}
.scenario-toggle[aria-expanded="false"] .st-chevron {
transform: rotate(180deg);
}
.scenario-body {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.panel-title {
margin: 0;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
}
.field {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.field label {
color: var(--text-dim);
font-size: 0.67rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.field-row { display: flex; gap: 0.5rem; }
.field-row .field { flex: 1; }
.profile-row {
display: flex;
gap: 0.4rem;
align-items: center;
}
.profile-row select { flex: 1 1 auto; min-width: 0; }
.icon-btn {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--bg-soft);
color: var(--text);
font-size: 1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-family: inherit;
transition: background 0.12s, border-color 0.12s;
}
.icon-btn:hover { background: var(--line); }
.icon-btn.danger {
border-color: #7f1d1d;
color: #f87171;
}
.icon-btn.danger:hover {
background: rgba(248, 113, 113, 0.12);
border-color: #f87171;
}
/* Save button: muted when there's nothing to save, glows accent-orange when
the active profile has unsaved edits. The pulse keeps it gently visible
without being annoying. */
.icon-btn.save-btn {
color: var(--text-dim);
font-weight: 700;
}
.icon-btn.save-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.icon-btn.save-btn.is-dirty {
background: var(--accent);
border-color: var(--accent);
color: #fff;
opacity: 1;
cursor: pointer;
animation: save-pulse 2.4s ease-in-out infinite;
}
@keyframes save-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.5); }
50% { box-shadow: 0 0 0 5px rgba(217, 119, 87, 0); }
}
.icon-btn.save-btn.is-dirty:hover {
background: var(--accent-dk);
border-color: var(--accent-dk);
}
/* Subtle "unsaved changes" dot next to the Profile label. */
.profile-dirty-dot {
color: var(--accent);
font-size: 0.85em;
margin-left: 0.25rem;
vertical-align: 0.05em;
}
select {
appearance: none;
-webkit-appearance: none;
width: 100%;
background: var(--bg-soft);
color: var(--text);
border: 1px solid var(--line);
border-radius: 7px;
padding: 0.4rem 1.8rem 0.4rem 0.6rem;
font-size: 0.88rem;
font-family: inherit;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.55rem center;
min-height: 36px;
}
select:disabled { opacity: 0.5; cursor: not-allowed; }
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.table-graphic {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
}
.table-felt {
position: absolute;
inset: 7% 3%;
background: radial-gradient(ellipse at 50% 30%, var(--felt-1) 0%, var(--felt-2) 60%, var(--felt-3) 100%);
border-radius: 50%;
border: 8px solid var(--felt-rim);
box-shadow:
inset 0 0 30px rgba(0,0,0,0.55),
inset 0 0 0 2px rgba(255,255,255,0.03),
0 0 0 1px #1d1f24,
0 6px 18px rgba(0,0,0,0.5);
}
.table-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--text-dim);
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
}
.seats { position: absolute; inset: 0; }
.seat {
--chip-size: clamp(32px, 5vw, 54px);
--marker-size: clamp(14px, 2.6vw, 20px);
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
pointer-events: none;
}
.seat-chip {
width: var(--chip-size);
height: var(--chip-size);
padding: 0;
border-radius: 50%;
background: linear-gradient(170deg, #2a5a48 0%, #173929 100%);
border: 2px solid #0a1e13;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: clamp(0.5rem, 1.25vw, 0.7rem);
letter-spacing: -0.03em;
color: var(--text);
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
position: relative;
white-space: nowrap;
cursor: pointer;
transition: transform 0.12s, box-shadow 0.12s;
/* `.seat` parent has pointer-events: none so its empty padding area
doesn't block clicks on the felt. Re-enable on the chip so the
seat-click-to-jump-position handler actually fires for real clicks. */
pointer-events: auto;
}
.seat-chip:hover {
transform: scale(1.08);
box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 4px 8px rgba(0,0,0,0.5);
}
/* BB chip is hidden + non-interactive when the user has hidden it. */
body.hide-bb .seat-chip[data-position="BB"] {
cursor: default;
pointer-events: none;
}
.seat.is-hero .seat-chip {
background: linear-gradient(170deg, #4ade80 0%, #16a34a 100%);
color: #032410;
border-color: #052e15;
box-shadow: 0 0 0 3px rgba(74,222,128,0.22), 0 2px 5px rgba(0,0,0,0.4);
}
.button-marker {
position: absolute;
width: var(--marker-size);
height: var(--marker-size);
--marker-offset: calc(var(--chip-size) / 2 + var(--marker-size) / 2 + 1px);
left: calc(50% + var(--marker-dx, 0) * var(--marker-offset));
top: calc(50% + var(--marker-dy, 0) * var(--marker-offset));
transform: translate(-50%, -50%);
border-radius: 50%;
background: #f5f5f4;
color: #18181b;
font-size: clamp(0.52rem, 1.05vw, 0.62rem);
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #18181b;
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
z-index: 1;
}
/* Villain marker — purple "V" chip placed adjacent to the targeted seat
when the user has selected vs Open / vs 3-bet / vs 4-bet with a
defined villain position. Uses the same offset math as the dealer
marker but pushes outward from the table (opposite direction), so the
two never overlap even when the villain IS on the button. */
.villain-marker {
position: absolute;
width: var(--marker-size);
height: var(--marker-size);
--marker-offset: calc(var(--chip-size) / 2 + var(--marker-size) / 2 + 1px);
left: calc(50% + var(--marker-dx, 0) * var(--marker-offset));
top: calc(50% + var(--marker-dy, 0) * var(--marker-offset));
transform: translate(-50%, -50%);
border-radius: 50%;
background: linear-gradient(170deg, #a855f7 0%, #6d28d9 100%);
color: #f5f3ff;
font-size: clamp(0.52rem, 1.05vw, 0.62rem);
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #3b0764;
box-shadow: 0 0 0 2px rgba(168,85,247,0.18), 0 1px 4px rgba(0,0,0,0.5);
z-index: 2;
}
.hero-row {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.hero-info {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 0.5rem;
min-width: 0;
}
.hero-buttons {
display: flex;
gap: 0.4rem;
flex-shrink: 0;
}
.hero-label {
color: var(--text-dim);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hero-pos { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.hero-rec { display: inline-flex; align-items: baseline; gap: 0.25rem; color: var(--text-dim); font-size: 0.8rem; }
.hero-pct { color: var(--text); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
/* Tight wrapper around the position label and dealer-button chip so the
chip sits flush with the BTN text (no inherited flex gap from .hero-info)
and reserves its slot whether shown or hidden. */
.hero-pos-line {
display: inline-flex;
align-items: baseline;
gap: 0.25em;
}
/* Inline dealer-button graphic — a miniature of the chip on the table.
Shown next to the hero-pos label whenever hero is on the button (BTN at
most table sizes, SB in heads-up). When `.is-hidden` is applied the chip
becomes invisible but still occupies its slot, so the "Open xx.x%" text
that follows doesn't shift left/right as the user cycles positions. */
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
background: #f5f5f4;
color: #18181b;
font-size: 0.72em;
font-weight: 800;
line-height: 1;
border: 1.5px solid #18181b;
box-shadow: 0 1px 3px rgba(0,0,0,0.45);
vertical-align: middle;
transform: translateY(-0.05em);
flex-shrink: 0;
}
.btn-icon.is-hidden { visibility: hidden; }
.next-btn {
background: var(--accent-dk);
color: #fff;
border: 1px solid var(--accent);
border-radius: 7px;
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
min-height: 36px;
transition: background 0.12s, transform 0.06s;
white-space: nowrap;
font-family: inherit;
}
.next-btn:hover { background: var(--accent); }
.next-btn:active { transform: scale(0.97); }
/* Differentiate the vs cycle button so the user doesn't confuse it with hero. */
.next-vs-btn {
background: #6366f1;
border-color: #4f46e5;
}
.next-vs-btn:hover { background: #4f46e5; }
.custom-hint {
margin: 0;
padding: 0.45rem 0.6rem;
background: rgba(245,158,11,0.07);
border: 1px dashed rgba(245,158,11,0.35);
border-radius: 7px;
color: var(--text-dim);
font-size: 0.73rem;
line-height: 1.4;
}
.custom-hint em {
color: var(--text);
font-style: normal;
font-weight: 600;
}
.custom-hint strong { color: var(--text); font-weight: 700; }
/* BB-position note uses a sky-blue tint so it's visually distinct from the
amber profile-mode note. They can stack when both apply. */
.custom-hint.bb-hint {
background: rgba(56, 189, 248, 0.07);
border-color: rgba(56, 189, 248, 0.35);
}
/* Base Profile read-only notice — neutral grey tone so it reads as
informational rather than action-required. */
.custom-hint.base-hint {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="daylight"] .custom-hint.base-hint {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.10);
}
/* Reserved slot below the hero-row for contextual notes. On mobile we use
a min-height to keep the Next position button anchored at the same
vertical spot. On desktop we go further: position the hints absolutely
so the flex layout above them is completely unaffected by their
presence — hero-row never shifts, no matter what shows up below it. */
.hints-area {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-height: 4.5rem;
}
.link-btn {
background: none; border: none;
color: var(--accent); text-decoration: underline;
cursor: pointer; font: inherit;
padding: 0; margin-left: 0.2rem;
}
/* Stronger version used for the "Apply to all vs Positions" action — needs
to feel like a real action button without dominating the palette area. */
.link-btn-strong {
background: var(--bg-soft);
border: 1px solid var(--accent);
color: var(--accent);
cursor: pointer;
font: inherit;
font-weight: 600;
font-size: 0.78rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
transition: background 0.12s, color 0.12s;
}
.link-btn-strong:hover { background: var(--accent); color: #fff; }
.custom-actions { display: flex; justify-content: flex-end; }
/* ================================================================
ADVANCED scenario builder
================================================================ */
.advanced-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 7px;
color: var(--text-dim);
font-size: 0.7rem;
font-weight: 600;
padding: 0.32rem 0.55rem;
cursor: pointer;
text-align: left;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: inherit;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.advanced-toggle:hover { color: var(--text); }
.advanced-toggle.active {
color: var(--accent);
border-color: var(--accent);
background: rgba(74,222,128,0.08);
}
.advanced-toggle .adv-label { flex: 0 0 auto; }
.advanced-toggle .adv-summary {
flex: 1 1 auto;
text-align: right;
text-transform: none;
letter-spacing: 0;
color: var(--text);
font-weight: 500;
font-size: 0.74rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.advanced-toggle .adv-chevron {
flex-shrink: 0;
font-size: 0.78rem;
color: var(--text-dim);
transition: transform 0.2s ease;
}
.advanced-toggle[aria-expanded="true"] .adv-chevron {
transform: rotate(180deg);
}
/* Advanced panel is always open (the toggle button was removed).
Settings → "Hide advanced positioning" hides it entirely via
body.hide-advanced. */
.advanced-body {
display: grid;
gap: 0.32rem;
flex-shrink: 0;
}
.advanced-body.is-always-open { max-height: none; }
/* Legacy class kept for backwards-compat — same as default now. */
.advanced-body.open { max-height: none; }
.action-row {
display: flex;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 7px;
padding: 2px;
gap: 2px;
}
.action-chip {
flex: 1 1 0;
background: none;
border: none;
color: var(--text-dim);
font-size: 0.7rem;
font-weight: 600;
padding: 0.3rem 0.1rem;
cursor: pointer;
border-radius: 5px;
transition: background 0.12s, color 0.12s;
white-space: nowrap;
letter-spacing: 0.01em;
font-family: inherit;
}
.action-chip:hover { color: var(--text); }
.action-chip.active {
background: var(--accent-dk);
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.vs-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.vs-row .vs-label {
flex: 0 0 auto;
color: var(--text-dim);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.06em;
min-width: 4.5rem;
}
.vs-row select {
flex: 1 1 auto;
min-height: 30px;
padding-top: 0.28rem;
padding-bottom: 0.28rem;
font-size: 0.82rem;
}
/* UTG vs Open toggle — shares the .vs-row slot but uses the iOS-style
mode-switch (see below) instead of a select. */
.utg-toggle-row {
justify-content: space-between;
}
.utg-toggle-text {
font-size: 0.82rem;
color: var(--text-dim);
user-select: none;
}
/* ================================================================
GRID panel
================================================================ */
.grid-wrap {
padding: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.grid {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: clamp(2px, 0.5vw, 4px);
width: 100%;
aspect-ratio: 1 / 1;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
border-radius: clamp(3px, 0.5vw, 5px);
font-size: clamp(0.52rem, 1.55vw, 0.92rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
background: var(--out);
color: var(--out-text);
user-select: none;
transition: background 0.1s, color 0.1s, transform 0.07s;
line-height: 1;
text-align: center;
}
/* RFI: single solid color across all hand categories, matching the
look of vs-rfi/vs-3bet/vs-4bet rules below. The .pair/.suited/.offsuit
classes are still on cells (used by data-cat / future features) but
no longer drive their fill in %-mode. */
.cell.in-range { background: var(--pair); color: #1a1300; }
.grid.adv-vs-rfi .cell.in-range { background: var(--action-call); color: #002723; }
.grid.adv-vs-3bet .cell.in-range { background: var(--action-4bet-value); color: #fff; }
.grid.adv-vs-4bet .cell.in-range { background: var(--action-allin); color: #1c1500; }
.grid.adv-vs-multi .cell.in-range { background: #a78bfa; color: #1a1230; }
/* Custom-paint cells take only their inline-styled color. */
/* Painting is allowed only inside the focused custom popup (body.is-custom)
— when the user closes the popup the chart goes view-only on the main
screen, so we disable the cursor + scale hover too. */
body.is-custom .grid.mode-custom .cell { cursor: pointer; }
body.is-custom .grid.mode-custom .cell:hover { transform: scale(1.06); }
/* Disable native touch scrolling + text selection only while the popup is
open. Outside the popup the chart is read-only so the page should scroll
freely on finger swipes. */
body.is-custom .grid.mode-custom {
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.cell.in-range:hover { transform: scale(1.05); }
/* ---- Legend ---- */
.legend {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.8rem;
align-items: center;
font-size: 1.1rem;
font-weight: 500;
color: var(--text-dim);
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.legend-swatch {
display: inline-block;
width: 28px; height: 28px;
border-radius: 5px;
vertical-align: middle;
}
.legend-swatch.pair { background: var(--pair); }
.legend-swatch.suited { background: var(--suited); }
.legend-swatch.offsuit { background: var(--offsuit); }
.legend-swatch.out { background: var(--out); border: 1px solid var(--line); }
/* ================================================================
RANGE BAR — its own card. On mobile sits above the chart; on
desktop sits below the chart in the right column.
================================================================ */
.range-bar {
padding: 0;
display: flex;
flex-direction: column;
}
/* Mode toggle pinned to the top of the bar — always visible.
Compact "% ⚪──⚫ Custom" switch in place of the older two-button design. */
.range-mode {
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
padding: 0.4rem 0.55rem;
gap: 0.55rem;
margin: 0;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-dim);
user-select: none;
}
.mode-row-side {
cursor: pointer;
padding: 0.1rem 0.2rem;
letter-spacing: 0.02em;
transition: color 0.15s;
}
.mode-row-side.active { color: var(--accent); }
/* iOS-style toggle switch */
.mode-switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
flex-shrink: 0;
cursor: pointer;
}
.mode-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.mode-switch-track {
display: block;
width: 100%;
height: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
position: relative;
transition: background 0.15s, border-color 0.15s;
}
.mode-switch-track::before {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--text-dim);
transition: transform 0.18s ease, background 0.18s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mode-switch input:checked + .mode-switch-track {
background: var(--accent-dk);
border-color: var(--accent);
}
.mode-switch input:checked + .mode-switch-track::before {
transform: translateX(16px);
background: #fff;
}
.mode-switch input:focus-visible + .mode-switch-track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Always-visible header. Holds slider+lock in pct mode, scenario name in
custom mode, and the chevron toggle on the right. */
.range-bar-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.85rem;
/* Locked height so the row doesn't jump between Custom (summary) and
% (slider+lock+readout) modes — and the inline toggle stays in
exactly the same screen position when flipping back and forth. */
min-height: 48px;
}
.rb-pct-header {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.rb-pct-header input[type="range"] { flex: 1 1 auto; min-width: 0; }
.rb-custom-header {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.5rem;
/* No vertical padding — that broke height-parity with .rb-pct-header. */
}
.rb-custom-header .rb-summary {
flex: 1 1 auto;
min-width: 0;
font-size: 0.92rem;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Edit button: replaces the percentage slider in custom mode, opens the
edit popup. Styled as a visible primary action so the user understands
they have to hit it to start painting. */
.edit-btn {
flex: 0 0 auto;
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
border-radius: 7px;
padding: 0.32rem 0.7rem;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: background 0.12s, transform 0.06s;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.edit-btn:hover { background: var(--accent-dk); }
.edit-btn:active { transform: scale(0.97); }
.edit-btn:disabled {
/* Greyed in pct mode — there's no painted range to edit, so the button
stays for affordance but is non-interactive. */
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
.edit-icon { font-size: 0.95em; }
/* Inline mode toggle sits to the left of the Edit button in the single-row
header. Reuses the iOS-style switch geometry. */
.rb-mode-switch { flex: 0 0 auto; }
.rb-mode-label {
flex: 0 0 auto;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-dim);
text-transform: uppercase;
user-select: none;
white-space: nowrap;
}
.range-bar-toggle {
flex: 0 0 auto;
background: none;
border: 1px solid transparent;
color: var(--text-dim);
font-family: inherit;
font-size: 1rem;
cursor: pointer;
padding: 0.35rem 0.6rem;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.range-bar-toggle:hover { color: var(--text); background: var(--bg-soft); }
.range-bar-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.rb-chevron {
display: inline-block;
transition: transform 0.2s ease;
}
.range-bar-toggle[aria-expanded="false"] .rb-chevron {
transform: rotate(180deg);
}
.range-bar-body {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.5rem 0.85rem 0.7rem;
border-top: 1px solid var(--line);
}
/* In %-mode the body has no content to show (the stats row was removed)
— keep it out of the layout so the chart isn't pushed up when toggling
between Custom and %. The chevron is permanently hidden too: with no
collapsable body and the Edit button driving the painter, it's just
visual noise that shifts the inline toggle's position. */
body.mode-pct .range-bar-body { display: none !important; }
.range-bar-toggle { display: none !important; }
/* Per-profile "Show advanced positions" toggle is off — hide the action
chips + villain dropdown so the profile shows only RFI. */
body.no-advanced-positions .action-row,
body.no-advanced-positions #vs-row,
body.no-advanced-positions #utg-toggle-row { display: none !important; }
/* Dialog: inline checkbox row for the "Show advanced positions" toggle. */
.dlg-toggle-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.55rem 0;
cursor: pointer;
}
.dlg-toggle-field input[type="checkbox"] {
flex: 0 0 auto;
width: 18px; height: 18px;
cursor: pointer;
accent-color: var(--accent);
}
.dlg-toggle-label {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.92rem;
font-weight: 600;
}
.dlg-toggle-label small {
font-size: 0.78rem;
font-weight: 400;
color: var(--text-dim);
}
/* Advanced-positions editor in the profile dialog. */
.dlg-actions-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.dlg-action-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.45rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 6px;
}
.dlg-action-label {
flex: 1 1 auto;
min-width: 0;
background: var(--bg);
border: 1px solid var(--line);
color: var(--text);
border-radius: 4px;
padding: 0.3rem 0.5rem;
font-size: 0.88rem;
font-family: inherit;
}
.dlg-action-label:focus {
outline: none;
border-color: var(--accent);
}
.dlg-action-villain {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78rem;
color: var(--text-dim);
cursor: pointer;
user-select: none;
}
.dlg-action-villain input { accent-color: var(--accent); cursor: pointer; }
.dlg-action-delete {
flex: 0 0 auto;
width: 26px; height: 26px;
border-radius: 50%;
border: 1px solid var(--line);
background: transparent;
color: var(--text-dim);
font-size: 1.1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.dlg-action-delete:hover { background: rgba(255,80,80,0.12); color: #f87171; border-color: #f87171; }
.dlg-actions-add {
background: transparent;
border: 1px dashed var(--line);
color: var(--text-dim);
padding: 0.4rem 0.8rem;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
}
.dlg-actions-add:hover {
border-color: var(--accent);
color: var(--text);
}
.mode-chip {
flex: 1 1 0;
background: none;
border: none;
color: var(--text-dim);
font-size: 0.74rem;
font-weight: 600;
padding: 0.34rem 0.5rem;
cursor: pointer;
border-radius: 5px;
transition: background 0.12s, color 0.12s;
letter-spacing: 0.02em;
font-family: inherit;
}
.mode-chip:hover { color: var(--text); }
.mode-chip.active {
background: var(--accent-dk);
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* ---- Percentage editor ---- */
.range-pct { display: flex; flex-direction: column; gap: 0.45rem; }
.slider-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.slider-row input[type="range"] { flex: 1 1 auto; }
.pct-readout {
flex: 0 0 auto;
color: var(--accent);
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
text-align: right;
display: inline-flex;
align-items: baseline;
gap: 0.05em;
}
/* Tap-to-type number input — styled to read like the inline %. The number
spinners are stripped and a subtle hover/focus underline cues that it's
editable. */
.pct-input {
/* Reset native input chrome */
appearance: none;
-webkit-appearance: none;
-moz-appearance: textfield;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
padding: 0.05em 0.15em;
margin: 0;
font: inherit;
color: inherit;
font-weight: inherit;
font-variant-numeric: inherit;
text-align: right;
width: 3.2ch;
cursor: text;
transition: border-color 0.12s, background 0.12s;
}
.pct-input::-webkit-outer-spin-button,
.pct-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pct-input:hover { border-color: var(--line); }
.pct-input:focus {
outline: none;
border-color: var(--accent);
background: rgba(217,119,87,0.1);
}
.pct-input:disabled { color: var(--text-dim); cursor: not-allowed; }
.lock-btn { flex: 0 0 auto; }
.lock-btn.locked {
background: var(--accent-dk);
border-color: var(--accent);
color: #fff;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 30px;
background: transparent;
margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 5px;
background: linear-gradient(
90deg,
var(--accent) 0%, var(--accent) var(--fill, 15%),
var(--bg-soft) var(--fill, 15%), var(--bg-soft) 100%
);
border-radius: 999px;
}
input[type="range"]::-moz-range-track {
height: 5px;
background: var(--bg-soft);
border-radius: 999px;
}
input[type="range"]::-moz-range-progress {
height: 5px;
background: var(--accent);
border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--bg);
margin-top: -6.5px;
cursor: pointer;
box-shadow: 0 0 0 3px rgba(217,119,87,0.18);
transition: transform 0.05s;
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--bg);
cursor: pointer;
}
input[type="range"]:disabled::-webkit-slider-thumb {
background: var(--text-dim);
cursor: not-allowed;
}
input[type="range"]:disabled { cursor: not-allowed; }
.presets {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.preset {
background: var(--bg-soft);
color: var(--text);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.22rem 0.6rem;
font-size: 0.74rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
min-height: 26px;
transition: background 0.12s, border-color 0.12s;
}
.preset:hover { background: #1f4a39; }
.preset.active { background: var(--accent-dk); border-color: var(--accent); color: #fff; }
.preset:disabled { opacity: 0.5; cursor: not-allowed; }
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.3rem;
margin: 0;
padding: 0;
}
.stat { margin: 0; }
.stat dt {
color: var(--text-dim);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat dd {
margin: 0.05rem 0 0;
font-size: 0.85rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ---- Custom palette ---- */
.range-custom { display: flex; flex-direction: column; gap: 0.5rem; }
.palette-hint {
margin: 0;
color: var(--text-dim);
font-size: 0.74rem;
line-height: 1.35;
}
.palette {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
/* In customize mode each swatch grows a dashed accent ring (outline-offset
3px) AND a ✕ remove button that sits at (top:-0.55rem, right:-0.55rem).
Together they overhang the swatch by ~9px on each side, so the default
0.4rem gap causes the rings + ✕ buttons to bump into neighbors. Widen
the gap in customize mode so each chip has room to breathe — especially
noticeable on mobile where swatches sit closer together. */
.palette.customizing {
gap: 1.1rem;
}
/* Each swatch is a fully-colored chip in its action color. Bold contrasting
colors mean the user's eye picks the right one fast even with 10 options
on screen. The active selection is ringed in accent so it pops out. */
.palette-swatch {
--swatch: var(--out);
--swatch-text: var(--text);
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--swatch);
color: var(--swatch-text);
border: 2px solid transparent;
border-radius: 999px;
padding: 0.32rem 0.85rem;
cursor: pointer;
font-size: 0.78rem;
font-weight: 700;
font-family: inherit;
min-height: 30px;
letter-spacing: 0.01em;
transition: transform 0.08s, box-shadow 0.12s, border-color 0.12s;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.palette-swatch { position: relative; }
.palette-swatch:hover { transform: translateY(-1px); }
.palette-swatch.active {
border-color: #fff;
box-shadow: 0 0 0 3px var(--accent), 0 1px 4px rgba(0,0,0,0.4);
}
.palette-swatch .swatch-dot { display: none; } /* not needed when whole chip is colored */
/* Color picker layered over each swatch — transparent overlay that becomes
the actual click target in customize mode. Programmatic .click() on color
inputs is blocked in most browsers (requires a real user gesture), so we
make the input itself receive the click and let the browser open the OS
picker natively. Out of customize mode, pointer-events:none keeps the
swatch button as the click target for paint-action selection. */
.palette-swatch .swatch-picker {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
background: transparent;
opacity: 0;
cursor: pointer;
pointer-events: none;
}
.palette.customizing .palette-swatch .swatch-picker {
pointer-events: auto;
}
/* When customizing, the palette gets a dashed accent ring on each swatch so
the user knows clicks now open a color picker instead of selecting an
action for painting. The active-paint highlight is hidden in this mode
to avoid visual collision with the ring. */
.palette.customizing .palette-swatch {
outline: 2px dashed rgba(255,255,255,0.45);
outline-offset: 3px;
}
.palette.customizing .palette-swatch.active {
border-color: transparent;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* Wrapper holding the swatch + its ✕ remove corner. Sits inline like the
swatches themselves so flex-wrap on .palette still flows correctly. */
.palette-swatch-wrap {
position: relative;
display: inline-flex;
}
/* ✕ remove-from-this-profile button. Hidden outside customize mode. */
.palette-swatch-remove {
position: absolute;
top: -0.55rem;
right: -0.55rem;
width: 1.35rem;
height: 1.35rem;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--bg-card);
color: var(--text-dim);
font-size: 0.9rem;
font-family: inherit;
line-height: 1;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.palette.customizing .palette-swatch-remove { display: inline-flex; }
.palette-swatch-remove:hover {
background: rgba(248,113,113,0.15);
border-color: #f87171;
color: #f87171;
}
/* "+ Add action" tile — only present in customize mode. */
.palette-add-btn {
display: none;
align-items: center;
background: transparent;
color: var(--accent);
border: 1px dashed rgba(217, 119, 87, 0.5);
border-radius: 999px;
padding: 0.32rem 0.85rem;
font-size: 0.78rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
min-height: 30px;
letter-spacing: 0.01em;
transition: background 0.12s, border-color 0.12s;
}
.palette.customizing .palette-add-btn { display: inline-flex; }
.palette-add-btn:hover {
background: rgba(217, 119, 87, 0.1);
border-color: var(--accent);
}
/* Customize / Reset row sits below "Apply to all villains" in the
custom-actions strip. */
.palette-customize-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
.link-btn-strong.danger { color: #f87171; }
.link-btn-strong.danger:hover { color: #fca5a5; }
.pcb-icon { margin-right: 0.25rem; }
.custom-scenario-label {
margin: 0;
font-size: 0.92rem;
color: var(--text);
text-align: right;
font-weight: 600;
letter-spacing: 0.01em;
}
/* "Done" button — exit the focused custom-edit screen without losing paints. */
.custom-header {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.custom-header .palette-hint { flex: 1 1 auto; }
.custom-done-btn {
flex: 0 0 auto;
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
border-radius: 999px;
padding: 0.4rem 1rem;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background 0.12s, transform 0.06s;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.custom-done-btn:hover { background: var(--accent-dk); }
.custom-done-btn:active { transform: scale(0.97); }
/* ================================================================
DESKTOP overrides (≥820px)
================================================================ */
@media (min-width: 820px) {
html, body { height: 100dvh; overflow: hidden; }
body { display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto; padding: 0.45rem 1rem 0.2rem; }
.topbar h1 { font-size: 1.2rem; margin-bottom: 0.05rem; }
.subtitle { font-size: 0.75rem; }
footer { flex: 0 0 auto; padding: 0.2rem 1rem 0.3rem; font-size: 0.68rem; }
/* Two-column grid. Default layout (pct mode): range-bar on top of right
column, chart fills the rest below it. Custom mode flips this so the
chart sits on top with the palette below — that's the "focused edit
screen" the user wants. */
main {
flex: 1 1 0;
min-height: 0;
padding: 0.35rem 0.5rem;
gap: 0.45rem;
display: grid;
grid-template-columns: clamp(26rem, 35%, 44rem) 1fr;
grid-template-rows: auto 1fr;
align-items: stretch;
}
.left-col { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 0.4rem; min-height: 0; overflow: hidden; }
.range-bar { grid-column: 2; grid-row: 1; }
.grid-wrap { grid-column: 2; grid-row: 2; }
/* Custom mode flips the chart back on top so the focused painter has the
"big chart with choices below" layout. */
body.is-custom main { grid-template-rows: 1fr auto; }
body.is-custom .grid-wrap { grid-row: 1; }
body.is-custom .range-bar { grid-row: 2; }
.scenario {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
/* Extra bottom padding reserves a fixed slot for the hints-area, which
is absolutely positioned. That keeps hero-row and Next position
anchored at exactly the same spot whether or not a note is showing. */
padding: 0.55rem 0.75rem 4.6rem;
gap: 0.5rem;
position: relative;
}
/* Float the hints inside the reserved bottom padding so they never push
the hero-row up or shrink the table-graphic when they appear/disappear. */
.scenario .hints-area {
position: absolute;
bottom: 0.6rem;
left: 0.75rem;
right: 0.75rem;
min-height: 0;
}
.scenario-body {
flex: 1 1 0;
min-height: 0;
gap: 0.55rem;
}
.panel-title { font-size: 0.78rem; }
/* Bigger, equal-height form rows so the scenario panel doesn't have dead
space below the controls. All selects, the Advanced toggle, and the
vs/Stack rows share the same control height so each "line" reads the
same. Labels are bumped slightly too so the rows feel roomy. */
.scenario .field { gap: 0.3rem; }
.scenario .field label,
.scenario .vs-row .vs-label {
font-size: 0.72rem;
font-weight: 500;
}
.scenario select {
min-height: 44px;
font-size: 0.95rem;
padding: 0.55rem 1.9rem 0.55rem 0.75rem;
}
.scenario .advanced-toggle {
min-height: 44px;
padding: 0.5rem 0.85rem;
font-size: 0.78rem;
}
.scenario .icon-btn {
width: 2.4rem;
height: 2.4rem;
font-size: 1.05rem;
}
.scenario .vs-row { min-height: 44px; gap: 0.6rem; }
.scenario .vs-row select {
min-height: 44px;
padding: 0.55rem 1.9rem 0.55rem 0.75rem;
font-size: 0.92rem;
}
.scenario .vs-row .vs-label { min-width: 5.5rem; }
.scenario .action-row { padding: 3px; gap: 3px; }
.scenario .action-chip { padding: 0.42rem 0.2rem; font-size: 0.74rem; }
/* Center the poker oval inside the scenario panel using auto top/bottom
margins to absorb leftover vertical space symmetrically. */
.table-graphic {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 10;
max-height: 32vh;
max-width: calc(32vh * 1.6);
margin: auto;
}
.hero-row { flex-wrap: nowrap; gap: 0.5rem; }
.next-btn { padding: 0.4rem 0.75rem; font-size: 0.8rem; min-height: 36px; }
/* Bigger scenario label on desktop now that it includes the profile name. */
.custom-scenario-label { font-size: 1rem; }
/* Right column: grid + legend (no range-bar in here anymore) */
.grid-wrap {
align-items: center;
justify-content: flex-start;
padding: 0.4rem 0.5rem 0.5rem;
gap: 0.3rem;
min-height: 0;
overflow: hidden;
}
.grid {
aspect-ratio: auto;
width: auto;
flex-shrink: 0;
}
.legend { font-size: 1rem; gap: 0.4rem 1.5rem; }
.legend-item { gap: 0.25rem; }
.legend-swatch { width: 24px; height: 24px; }
/* Range-bar card sits below grid */
.range-bar { padding: 0; }
.range-bar-toggle { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
.range-bar-body { padding: 0.5rem 0.85rem 0.6rem; gap: 0.4rem; }
.stats { gap: 0.3rem; }
.stat dt { font-size: 0.6rem; }
.stat dd { font-size: 0.82rem; }
.preset { padding: 0.18rem 0.55rem; font-size: 0.72rem; min-height: 24px; }
/* Custom mode = focused edit screen: left column hides, chart fills width. */
body.is-custom main {
grid-template-columns: 1fr;
}
body.is-custom .left-col { display: none; }
body.is-custom .grid-wrap { grid-column: 1; }
body.is-custom .range-bar { grid-column: 1; }
body.is-custom .range-bar-toggle { display: none; }
body.is-custom .grid { max-width: 90vh; }
}
/* ================================================================
MOBILE compact layout (≤819px)
================================================================ */
@media (max-width: 819px) {
html, body { height: 100dvh; overflow: hidden; }
body { display: flex; flex-direction: column; }
.topbar {
padding: 0.5rem 1rem 0.45rem;
/* Min-height fits the 2rem absolutely-positioned account avatar
with breathing room. Without it the avatar's bottom half
overflowed into the first card. */
min-height: 2.8rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.topbar h1 { font-size: 1.1rem; }
.subtitle { font-size: 0.74rem; }
footer { display: none; }
main {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0.45rem 0.4rem;
gap: 0.4rem;
}
.left-col { display: contents; }
/* Mobile stack order: scenario (top) → range-bar (middle) → grid (bottom). */
.scenario { order: 1; padding: 0.4rem 0.65rem 0.45rem; gap: 0.28rem; }
.range-bar { order: 2; }
.grid-wrap { order: 3; }
/* Scenario manual-collapse toggle is only useful on mobile. */
.scenario-toggle { display: flex; }
/* Scenario manually collapsed: hide the bulky bits (profile dropdown,
seats dropdown, table graphic) but KEEP the advanced action chips +
villain/stack/UTG controls visible so the user can shuffle through
positions without re-expanding the whole panel. Painter mode hides
everything since the chart is the focus there. */
body.scenario-collapsed .scenario-body > .field,
body.scenario-collapsed .scenario-body > .table-graphic,
body.scenario-collapsed .scenario-body > .panel-title {
display: none;
}
body.is-custom .scenario-body {
display: none;
}
/* Hide the entire hints-area when the scenario panel is manually
collapsed — no point reserving space for notes the user can't see. */
body.scenario-collapsed .scenario .hints-area {
display: none;
}
/* Stable panel height when manually collapsed. */
body.scenario-collapsed .scenario {
padding: 0.35rem 0.65rem 0.5rem;
gap: 0.35rem;
min-height: 5.2rem;
}
/* Keep hero-row a consistent footprint regardless of position name length
so cycling between UTG and UTG+1/UTG+2 doesn't bump the box. */
.hero-row {
min-height: 2.4rem;
flex-wrap: nowrap;
gap: 0.4rem;
}
.hero-info {
flex-wrap: nowrap;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-info > * { flex-shrink: 0; }
/* "You're on" eats horizontal space — drop it on mobile. The accent-colored
position is enough context. */
.hero-label { display: none; }
/* Reserve a fixed slot for the position so UTG/UTG+1/UTG+2 don't change
the row width as the user cycles through hero positions. */
.hero-pos {
display: inline-block;
min-width: 3.2em;
font-size: 1rem;
}
.hero-buttons { flex-shrink: 0; gap: 0.2rem; }
/* Compact button labels on mobile so both Next villain and Next position
fit on the same row alongside the hero info, even when the action label
gets longer (e.g. "Call vs UTG 18.5%"). */
.next-btn {
padding: 0.2rem 0.45rem;
font-size: 0.65rem;
min-height: 24px;
border-radius: 5px;
font-weight: 600;
letter-spacing: 0;
}
.panel-title { display: none; }
.table-graphic { aspect-ratio: 8 / 3; }
.grid-wrap {
/* Anchored: don't grow/shrink with the surrounding flex layout, so
expanding or collapsing the scenario panel (or any other sub-menu)
doesn't reflow the chart. The chart's own size is set by the
.grid rules below — same in every state. */
flex: 0 0 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
gap: 0.35rem;
}
.grid {
/* Stable square sized off the viewport, not the container. Caps at
62% of viewport height so the chart never pushes the range-bar +
legend below the fold on common phones. Width-only so aspect-ratio
can derive height — setting both was producing a slight rectangle
when the parent clamped width via max-width. */
width: min(94vw, 62vh);
height: auto;
aspect-ratio: 1 / 1;
max-width: 100%;
}
/* Mobile: let the scenario summary use the full width of the range-bar
header so users can read the entire "Profile · Action · Pos · Stack"
string instead of an ellipsis-truncated stump. The "Custom / %" text
label gets dropped to free room — the toggle alone is clear enough. */
.rb-mode-label { display: none; }
.rb-custom-header .rb-summary {
white-space: normal;
overflow: visible;
text-overflow: clip;
font-size: 0.82rem;
line-height: 1.15;
}
/* Bump min-height so a wrapped two-line summary still aligns cleanly
and the Custom/% toggle + Edit button stay at the same Y across modes. */
.range-bar-header { min-height: 58px; }
/* Custom mode: scenario hidden, chart on top (big), palette below. */
body.is-custom .scenario { display: none; }
body.is-custom .range-bar-toggle { display: none; }
body.is-custom .grid-wrap { order: 2; min-height: 280px; }
body.is-custom .range-bar { order: 3; }
body.is-custom .range-bar-body { padding-top: 0.5rem; }
}
/* ================================================================
New-profile dialog
================================================================ */
.profile-dialog {
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
padding: 0;
max-width: 26rem;
width: 92vw;
}
.profile-dialog::backdrop {
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
}
.profile-dialog form {
padding: 1rem 1.1rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
}
.profile-dialog h2 {
margin: 0 0 0.1rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.dlg-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
}
.dlg-field input[type="text"] {
background: var(--bg-soft);
color: var(--text);
border: 1px solid var(--line);
border-radius: 7px;
padding: 0.5rem 0.7rem;
font: inherit;
font-size: 0.92rem;
letter-spacing: 0;
text-transform: none;
min-height: 38px;
}
.dlg-field input[type="text"]:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.dlg-fieldset {
border: 1px solid var(--line);
border-radius: 8px;
margin: 0;
padding: 0.45rem 0.7rem 0.55rem;
}
.dlg-fieldset legend {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
padding: 0 0.4rem;
}
.dlg-radio-list {
display: flex;
flex-direction: column;
gap: 0.18rem;
}
.dlg-radio-list label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
cursor: pointer;
padding: 0.15rem 0.1rem;
border-radius: 4px;
}
.dlg-radio-list label:hover { background: var(--bg-soft); }
.dlg-seat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem 0.6rem;
padding-top: 0.15rem;
}
.dlg-seat-grid label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
padding: 0.18rem 0.3rem;
border-radius: 4px;
}
.dlg-seat-grid label:hover { background: var(--bg-soft); }
/* Stack-sizes chip list inside the profile dialog. */
.dlg-stacks-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
min-height: 2.2rem;
padding: 0.35rem 0;
}
.dlg-stack-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.35rem 0.25rem 0.65rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
}
.dlg-stack-chip button {
width: 1.25rem;
height: 1.25rem;
padding: 0;
border: none;
background: transparent;
color: var(--text-dim);
font-size: 1rem;
line-height: 1;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
}
.dlg-stack-chip button:hover {
background: rgba(248,113,113,0.15);
color: #f87171;
}
.dlg-stacks-add {
display: flex;
gap: 0.4rem;
align-items: center;
margin-top: 0.2rem;
}
.dlg-stacks-add input[type="number"] {
flex: 1 1 auto;
min-width: 0;
background: var(--bg-soft);
color: var(--text);
border: 1px solid var(--line);
border-radius: 7px;
padding: 0.4rem 0.55rem;
font-family: inherit;
font-size: 0.9rem;
min-height: 36px;
}
.dlg-stacks-add input[type="number"]:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.dlg-stacks-add-btn {
flex-shrink: 0;
padding: 0.4rem 0.85rem;
border-radius: 7px;
border: 1px solid var(--line);
background: var(--bg-soft);
color: var(--text);
font: inherit;
font-weight: 600;
cursor: pointer;
min-height: 36px;
transition: background 0.12s, border-color 0.12s;
}
.dlg-stacks-add-btn:hover { background: var(--line); }
.dlg-hint {
margin: 0.4rem 0 0;
color: var(--text-dim);
font-size: 0.78rem;
line-height: 1.35;
}
.dlg-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.2rem;
}
.dlg-actions button {
padding: 0.5rem 1rem;
border-radius: 7px;
border: 1px solid var(--line);
background: var(--bg-soft);
color: var(--text);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
min-height: 38px;
}
.dlg-actions button:hover { background: var(--line); }
.dlg-actions button.primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.dlg-actions button.primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
/* Premium gate modal — info card with a star, used for New / Duplicate /
* Custom stack depth gating. */
.premium-gate-dialog form {
text-align: center;
}
.premium-gate-icon {
font-size: 2.4rem;
line-height: 1;
color: var(--accent);
margin-bottom: 0.4rem;
}
.premium-gate-dialog h2 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}
.premium-gate-dialog p {
margin: 0 0 1rem;
color: var(--text-dim);
line-height: 1.5;
font-size: 0.9rem;
white-space: pre-line;
}
.premium-gate-dialog .dlg-actions {
justify-content: center;
}
/* ================================================================
Login screen — full-viewport overlay, shown when no user is signed in
================================================================ */
.login-screen {
position: fixed;
inset: 0;
z-index: 1000;
background: radial-gradient(ellipse at 30% 0%, #2a2326 0%, transparent 50%),
radial-gradient(ellipse at 70% 100%, #1d1c20 0%, transparent 50%),
var(--bg);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.login-card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.55);
padding: 2rem 1.6rem 1.5rem;
max-width: 22rem;
width: 100%;
text-align: center;
}
.login-logo {
font-size: 2.6rem;
color: var(--accent);
line-height: 1;
margin-bottom: 0.6rem;
}
.login-title {
margin: 0 0 0.25rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.login-tagline {
margin: 0 0 1.4rem;
color: var(--text-dim);
font-size: 0.9rem;
}
.google-signin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
width: 100%;
padding: 0.7rem 1rem;
background: #ffffff;
color: #1f1f1f;
border: 1px solid #d4d4d8;
border-radius: 7px;
font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, transform 0.06s, box-shadow 0.12s;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.google-signin-btn:hover { background: #f7f7f8; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.google-signin-btn:active { transform: scale(0.98); }
.g-icon { width: 18px; height: 18px; flex-shrink: 0; }
.login-mock-note {
margin: 1rem 0 0;
font-size: 0.72rem;
line-height: 1.4;
color: var(--text-dim);
background: rgba(245,158,11,0.07);
border: 1px dashed rgba(245,158,11,0.3);
border-radius: 6px;
padding: 0.5rem 0.7rem;
}
.login-mock-note em { color: var(--accent); font-style: normal; font-weight: 600; }
.login-mock-note code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 3px; font-size: 0.72rem; }
.login-mock-note b { color: #e2e8f0; }
.use-demo-btn {
margin-top: 0.5rem;
background: none;
border: 1px solid var(--accent);
color: var(--accent);
padding: 5px 14px;
border-radius: 5px;
cursor: pointer;
font-size: 0.72rem;
font-weight: 600;
transition: background 0.15s, color 0.15s;
}
.use-demo-btn:hover { background: var(--accent); color: #1e293b; }
/* ---- Login: email form + divider ---- */
.login-divider {
display: flex;
align-items: center;
margin: 1rem 0 0.8rem;
color: var(--text-dim);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.login-divider::before, .login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.login-divider span { padding: 0 0.8rem; }
.email-auth-form {
display: flex;
flex-direction: column;
gap: 0.55rem;
width: 100%;
}
.email-auth-form input {
padding: 0.6rem 0.75rem;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
background: rgba(255,255,255,0.05);
color: var(--text);
font-size: 0.85rem;
outline: none;
transition: border-color 0.2s;
}
.email-auth-form input:focus { border-color: var(--accent); }
.email-auth-form input::placeholder { color: var(--text-dim); }
.auth-submit-btn {
padding: 0.6rem;
border: none;
border-radius: 6px;
background: var(--accent);
color: #1e293b;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s;
}
.auth-submit-btn:hover { opacity: 0.9; }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-links {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
}
.auth-links a { color: var(--text-dim); text-decoration: none; }
.auth-links a:hover { color: var(--accent); }
.auth-links a b { color: var(--accent); }
.auth-error {
margin: 0;
padding: 0.4rem 0.6rem;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
border-radius: 4px;
color: #fca5a5;
font-size: 0.72rem;
line-height: 1.4;
}
.auth-error.is-success {
background: rgba(34,197,94,0.1);
border-color: rgba(34,197,94,0.3);
color: #86efac;
}
/* ============================================================
Settings dialog
============================================================ */
.settings-dialog {
padding: 0;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--bg-card);
color: var(--text);
max-width: 580px;
width: calc(100vw - 32px);
max-height: calc(100vh - 64px);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.settings-dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.settings-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line);
position: sticky; top: 0;
background: var(--bg-card);
z-index: 1;
}
.settings-header h2 { margin: 0; font-size: 1.1rem; }
.settings-close {
background: none; border: none; color: var(--text-dim);
font-size: 1.75rem; line-height: 1;
cursor: pointer; padding: 0 0.4rem;
border-radius: 6px;
}
.settings-close:hover { background: var(--bg-soft); color: var(--text); }
.settings-section { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border-bottom: none; }
.settings-section h3 {
margin: 0 0 0.7rem 0;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
}
/* Theme picker */
.theme-picker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.6rem;
}
.theme-card {
display: flex; flex-direction: column; align-items: stretch;
gap: 0.45rem;
padding: 0.6rem;
background: var(--bg-soft);
border: 2px solid transparent;
border-radius: 8px;
cursor: pointer;
text-align: left;
color: var(--text);
transition: border-color 0.15s, transform 0.1s;
}
.theme-card:hover { border-color: var(--line); }
.theme-card.is-active { border-color: var(--accent); }
.theme-card:active { transform: scale(0.98); }
.theme-preview {
display: block;
height: 60px;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.theme-dot {
position: absolute; bottom: 8px; right: 8px;
width: 14px; height: 14px;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.theme-label { font-size: 0.85rem; font-weight: 600; }
.theme-desc { font-size: 0.7rem; color: var(--text-dim); line-height: 1.3; }
/* Generic settings rows (toggle + label + description) */
.settings-row {
display: flex; gap: 0.7rem; align-items: flex-start;
padding: 0.55rem 0;
cursor: pointer;
}
.settings-row input[type="checkbox"] {
margin-top: 0.2rem;
flex-shrink: 0;
width: 16px; height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.settings-row-text {
display: flex; flex-direction: column; gap: 0.15rem;
flex: 1;
}
.settings-row-label {
font-size: 0.88rem;
font-weight: 500;
}
.settings-row small {
font-size: 0.72rem;
color: var(--text-dim);
line-height: 1.4;
}
.settings-row small.warning { color: #fca5a5; }
.settings-row-action {
align-items: center;
}
.settings-row-action .settings-row-text { padding-right: 0.5rem; }
.settings-btn {
padding: 0.5rem 0.9rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--text);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s;
}
.settings-btn:hover { background: var(--line); }
.settings-btn.danger {
background: rgba(239,68,68,0.1);
border-color: rgba(239,68,68,0.4);
color: #fca5a5;
}
.settings-btn.danger:hover { background: rgba(239,68,68,0.2); }
/* Account dropdown icon for the Settings item */
.account-action .action-icon {
width: 16px; height: 16px;
vertical-align: -3px;
margin-right: 0.4rem;
}
/* ============================================================
Action edit / create dialog (palette customize)
============================================================ */
.action-edit-form .form-row {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.4rem 0;
}
.action-edit-form .form-row-label {
flex: 0 0 90px;
font-size: 0.8rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.action-edit-form input[type="text"] {
flex: 1;
padding: 0.5rem 0.7rem;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 5px;
color: var(--text);
font-size: 0.9rem;
outline: none;
}
.action-edit-form input[type="text"]:focus { border-color: var(--accent); }
.action-edit-form input[type="color"] {
width: 50px; height: 32px;
border: 1px solid var(--line);
border-radius: 5px;
background: var(--bg-soft);
cursor: pointer;
}
.split-control {
display: flex; align-items: center; gap: 0.6rem;
flex: 1;
}
/* Neutral slider — the colored "progress fill" portion native browsers
render is misleading here (the split number isn't a progress %), so we
force a flat grey track on both sides of the thumb. */
.split-control input[type="range"] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--line);
border-radius: 3px;
outline: none;
padding: 0;
margin: 0;
}
.split-control input[type="range"]::-webkit-slider-runnable-track {
height: 6px; background: var(--line); border-radius: 3px;
}
.split-control input[type="range"]::-moz-range-track {
height: 6px; background: var(--line); border-radius: 3px;
}
/* Mozilla shows a default fill before the thumb — override it. */
.split-control input[type="range"]::-moz-range-progress {
background: var(--line); height: 6px; border-radius: 3px;
}
.split-control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
margin-top: -5px;
}
.split-control input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px;
border: none;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
}
.split-control output {
font-size: 0.78rem;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
min-width: 80px;
text-align: right;
}
.form-fieldset {
margin-top: 0.5rem;
padding: 0.5rem 0.7rem;
border: 1px solid var(--line);
border-radius: 6px;
}
.form-fieldset legend {
padding: 0 0.3rem;
font-size: 0.74rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.form-radio-row {
display: flex; align-items: center; gap: 0.55rem;
padding: 0.35rem 0;
font-size: 0.85rem;
cursor: pointer;
}
.form-radio-row input[type="radio"] {
accent-color: var(--accent);
cursor: pointer;
}
.action-edit-footer {
display: flex; justify-content: flex-end; gap: 0.5rem;
}
.form-hint {
margin: 0.4rem 0 0;
padding: 0.5rem 0.7rem;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 5px;
font-size: 0.72rem;
color: var(--text-dim);
line-height: 1.45;
}
[data-theme="daylight"] .form-hint { background: rgba(0,0,0,0.03); }
/* Mix-cell dialog: tag for the hand name in the title */
.mix-hand-tag {
display: inline-block;
padding: 1px 7px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 4px;
font-family: ui-monospace, monospace;
font-size: 0.85em;
vertical-align: 2px;
}
/* Live preview of the gradient under the form */
.mix-preview {
margin-top: 0.6rem;
height: 40px;
border-radius: 6px;
border: 1px solid var(--line);
}
/* Long-press visual feedback while the user holds a cell */
.cell.is-longpress-armed {
outline: 2px solid var(--accent);
outline-offset: -1px;
transform: scale(1.05);
z-index: 2;
}
.action-edit-footer .auth-submit-btn { width: auto; padding: 0.5rem 1.4rem; }
/* ============================================================
Edit-icon button on each palette swatch (customize mode only)
============================================================ */
.palette-swatch-edit {
position: absolute;
top: -8px;
left: -8px;
width: 18px; height: 18px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg-card);
color: var(--text);
font-size: 0.7rem;
line-height: 1;
padding: 0;
cursor: pointer;
display: none;
align-items: center; justify-content: center;
z-index: 2;
}
.palette.customizing .palette-swatch-edit { display: flex; }
.palette-swatch-edit:hover { background: var(--accent); color: #1e293b; }
/* ============================================================
"Focus grid" floating button — small circle in the bottom-right
corner on mobile only. Tap to collapse Table Setup + range-bar
for a grid-only view; tap again to restore. Slight transparency
so it doesn't fight the legend visually.
============================================================ */
.focus-grid-btn {
position: fixed;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 50;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--accent);
color: #1e293b;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
cursor: pointer;
display: none;
align-items: center; justify-content: center;
opacity: 0.85;
transition: opacity 0.15s, transform 0.15s;
}
.focus-grid-btn:hover { opacity: 1; }
.focus-grid-btn:active { transform: scale(0.92); }
.focus-grid-btn svg { width: 18px; height: 18px; }
.focus-grid-btn.is-focused .fg-expand { display: none; }
.focus-grid-btn.is-focused .fg-collapse { display: block !important; }
@media (max-width: 819px) {
.focus-grid-btn:not([hidden]) { display: flex; }
}
/* ============================================================
Improved collapsible affordance on mobile
============================================================ */
.scenario-toggle,
.advanced-toggle,
.range-bar-toggle {
/* Slightly larger tap target + visible hover state */
transition: background 0.15s;
}
.scenario-toggle:hover,
.advanced-toggle:hover,
.range-bar-toggle:hover {
background: rgba(255,255,255,0.04);
}
[data-theme="daylight"] .scenario-toggle:hover,
[data-theme="daylight"] .advanced-toggle:hover,
[data-theme="daylight"] .range-bar-toggle:hover {
background: rgba(0,0,0,0.04);
}
/* Show explicit "Tap to hide / show" hint on mobile (chevron alone
isn't always obvious to first-time users). */
.st-hint, .rb-hint, .adv-hint {
display: none;
font-size: 0.65rem;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-right: 0.3rem;
}
@media (max-width: 819px) {
.st-hint, .rb-hint, .adv-hint { display: inline; }
}
/* ============================================================
Hide advanced-positioning when the setting is on.
The whole advanced section disappears; Stack moves inline next
to Seats via JS into #seats-stack-inline.
============================================================ */
body.hide-advanced .advanced-toggle,
body.hide-advanced .advanced-body { display: none !important; }
.seats-stack-inline {
display: flex;
gap: 0.7rem;
align-items: flex-end;
margin-bottom: 0.5rem;
}
.seats-stack-inline > * { flex: 1; min-width: 0; margin: 0; }
/* The stack picker uses .vs-row internally (label + select on one line);
when inline next to seats we want it to look like a .field column. */
.seats-stack-inline .vs-row.stack-row {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.seats-stack-inline .vs-row.stack-row .vs-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-dim);
margin: 0;
}
.seats-stack-inline .vs-row.stack-row select { width: 100%; }
/* ============================================================
Compact mobile layout toggle
============================================================ */
@media (max-width: 819px) {
body.compact-mobile .scenario { padding: 0.5rem; }
body.compact-mobile .range-bar-panel { padding: 0.5rem; }
body.compact-mobile h1 { font-size: 0.95rem; }
body.compact-mobile .subtitle { display: none; }
body.compact-mobile .grid .cell { font-size: 0.65rem; }
}
/* ============================================================
Hide BB chip when toggle is off — chip itself is still rendered
in DOM so position-cycling logic still finds it, just visually
hidden.
============================================================ */
body.hide-bb .seat-chip[data-position="BB"] { visibility: hidden; }
/* Hide "Open X% / Defend X%" badge next to the hero position when
the user has opted out in Settings. Useful on dynamic tables
where a single action % doesn't capture all the action options. */
body.hide-action-pct .hero-rec { display: none !important; }
/* ============================================================
Painter-open state (body.is-custom)
============================================================ */
/* Edit button in the range-bar header is redundant when the painter
is already open — hide it to remove the visual no-op. */
body.is-custom #edit-btn { display: none !important; }
/* Focus-grid floating button is also redundant in the painter view
(the user is already focused on the grid) and would just clutter
the corner of the painting tool. */
body.is-custom .focus-grid-btn { display: none !important; }
/* Hide everything except the login screen when logged out. */
body.is-logged-out > main,
body.is-logged-out > footer,
body.is-logged-out > .topbar { display: none !important; }
body.is-logged-out > .login-screen { display: flex; }
/* ================================================================
Account menu (top-right corner of topbar)
================================================================ */
.topbar { position: relative; }
.account-menu {
position: absolute;
top: 0.4rem;
right: 0.6rem;
z-index: 10;
}
.account-btn {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--accent);
color: #fff;
border: 1px solid var(--accent-dk);
font-family: inherit;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: -0.02em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.06s, box-shadow 0.12s;
}
.account-btn:hover { box-shadow: 0 0 0 3px rgba(217,119,87,0.25); }
.account-btn:active { transform: scale(0.94); }
.account-dropdown {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
min-width: 14rem;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
padding: 0.5rem 0;
z-index: 11;
}
.account-info {
padding: 0.5rem 0.85rem 0.6rem;
border-bottom: 1px solid var(--line);
margin-bottom: 0.3rem;
}
.account-name { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.account-email { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; word-break: break-all; }
.account-tier {
margin: 0 0.5rem 0.3rem;
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: var(--text-dim);
background: var(--bg-soft);
border-radius: 4px;
text-align: center;
}
.account-tier.is-premium { color: #fff; background: var(--accent); }
.account-action {
display: block;
width: 100%;
padding: 0.5rem 0.85rem;
background: none;
border: none;
color: var(--text);
font: inherit;
font-size: 0.85rem;
text-align: left;
cursor: pointer;
border-radius: 4px;
transition: background 0.1s;
}
.account-action:hover { background: var(--bg-soft); }
.account-action.subtle { color: var(--text-dim); font-size: 0.78rem; }
.account-action.danger { color: #f87171; }
.account-action.danger:hover { background: rgba(248,113,113,0.1); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
/* ============================================================
Custom color picker — replaces the OS-native
popup so behavior and look are identical on mobile and desktop.
Built as a non-modal