/*
* MapTap Rivals — app styles.
*
* Loaded after assets/css/main.css. Site chrome (#header / #footer / #menu)
* keeps its dark styling from main.css; this file enforces the dark theme on
* the body and supplies the dashboard surfaces, charts, tables, and modal.
*
* Color tokens align with rising-shows (consistent across apps).
*/
:root {
color-scheme: dark;
/* Background tokens.
- --bg-grad: subtle indigo/green corner washes, same vibe as
Rising Shows.
- --bg-dots: faint inline-SVG dot-grid overlay applied on body::before
so the page surface picks up the same texture the site chrome uses
(main.css lays a bg.jpg overlay; we use a self-contained SVG dot
pattern instead so it works even without the image asset). */
--bg: #0b0d12;
--bg-grad:
radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.10), transparent 55%),
radial-gradient(circle at 82% 0%, rgba(74, 222, 128, 0.06), transparent 55%);
--bg-dots: url("data:image/svg+xml;utf8,");
--surface: #161922;
--surface-2: #1f232f;
--surface-3: #2a2f3d;
--text: #e7e9ee;
--muted: #9aa3b2;
--muted-2: #6b7280;
--accent: #6366f1; /* indigo */
--accent-2: #818cf8;
--accent-soft: rgba(99, 102, 241, 0.16);
--accent-strong: rgba(99, 102, 241, 0.4);
--accent-ink: #fff;
--good: #4ade80;
--good-soft: rgba(74, 222, 128, 0.14);
--good-ink: #052e1c;
--bad: #f87171;
--bad-soft: rgba(248, 113, 113, 0.14);
--bad-ink: #2a0606;
--tie: #9aa3b2;
--tie-soft: rgba(154, 163, 178, 0.16);
--warn: #fb923c;
--border: #252938;
--border-strong: #353a4b;
--radius: 14px;
--radius-sm: 8px;
--ctrl-h: 40px;
--ctrl-radius: 8px;
--ctrl-pad-x: 0.95rem;
--ctrl-font: 0.9rem;
/* Monospace stack used for numeric values in the predictions table so
digits march in lockstep — gives the dashboard a sports-board feel
without changing the body font. */
--mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace,
"Roboto Mono", "Menlo", monospace;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* Lock dark background so main.css can't override it */
html {
background: var(--bg);
background-image: var(--bg-grad);
background-attachment: fixed;
background-color: var(--bg);
min-height: 100%;
}
body.maptap-rivals-app {
background: transparent !important;
color: var(--text);
line-height: 1.5;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
/* main.css sets `body { padding-top: 3.25rem }` to clear the fixed
#header partial; preserve that explicitly so our scoped body rule
can never accidentally swallow it. */
padding-top: 3.25rem;
}
/* Use main.css's shared bg.jpg overlay (5% opacity, fixed). We don't
redefine ::before here — letting the body:before rule from main.css
apply directly keeps every Shevato app on the same subtle texture. */
body.maptap-rivals-app a { color: var(--accent-2); text-decoration: none; }
body.maptap-rivals-app a:hover { text-decoration: underline; }
body.maptap-rivals-app h1,
body.maptap-rivals-app h2,
body.maptap-rivals-app h3,
body.maptap-rivals-app h4 {
color: var(--text);
margin: 0;
letter-spacing: -0.01em;
text-transform: none;
font-weight: 600;
line-height: 1.25;
}
body.maptap-rivals-app input,
body.maptap-rivals-app select,
body.maptap-rivals-app textarea,
body.maptap-rivals-app button {
font-family: inherit;
/* Baseline text colour so main.css's `input,select,textarea { color:#555 }`
can't gray out controls we don't otherwise paint (radios, file inputs). */
color: var(--text);
}
/* Focus baseline. main.css paints every text input/select/textarea focus
with the theme red (`:focus { border-color:#ce1b28; box-shadow:0 0 0 1px
#ce1b28 }`). Neutralize it app-wide here; this rule sits EARLY on purpose
so the specific focus styles further down (profile input, modal fields,
history filters, paste textareas) win their ties by order. */
body.maptap-rivals-app input:focus,
body.maptap-rivals-app select:focus,
body.maptap-rivals-app textarea:focus {
border-color: var(--accent);
box-shadow: none;
}
/* ---------- Buttons ----------
main.css line ~322 has `button:hover { color: #ce1b28 !important }`.
We force our colors with !important so the site's red link hover loses. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: var(--ctrl-h);
padding: 0 var(--ctrl-pad-x);
border: 1px solid var(--border);
border-radius: var(--ctrl-radius);
background: var(--surface);
color: var(--text) !important;
font: inherit;
font-size: var(--ctrl-font);
font-weight: 500;
line-height: 1;
cursor: pointer;
user-select: none;
white-space: nowrap;
box-shadow: none !important;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.btn:hover {
background: var(--surface-2);
border-color: var(--border-strong);
color: var(--text) !important;
box-shadow: none !important;
}
.btn:active { transform: translateY(1px); }
/* Pressed: main.css `button:hover:active { background-color: rgba(206,27,40,.25) }`
would flash the theme red; keep the hover surface instead. Variant press
pins below (same specificity) win by order. */
.btn:hover:active { background-color: var(--surface-2); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Defeat `.btn { display: inline-flex }` overriding UA `[hidden] { display: none }`. */
.btn[hidden] { display: none !important; }
.btn-primary, .btn-primary:hover {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff !important;
border-color: transparent;
font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.1); }
/* Gradient is opaque; pin the color layer so the red press tint can't sit
underneath it. */
.btn-primary:hover:active { background-color: transparent; }
.btn-ghost, .btn-ghost:hover {
background: var(--surface-2);
color: var(--text) !important;
}
.btn-ghost:hover { background: var(--surface-3); }
.btn-ghost:hover:active { background-color: var(--surface-3); }
.btn-danger, .btn-danger:hover {
background: var(--bad);
color: var(--bad-ink) !important;
border-color: transparent;
font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.05); }
.btn-danger:hover:active { background-color: var(--bad); }
/* Ghost variant for destructive actions — subtle until hovered. */
.btn-danger-ghost,
.btn-danger-ghost:hover {
background: var(--surface-2);
color: var(--bad) !important;
border-color: var(--border);
}
.btn-danger-ghost:hover {
background: var(--bad-soft);
border-color: rgba(248, 113, 113, 0.45);
}
.btn-danger-ghost:hover:active { background-color: var(--bad-soft); }
/* ---------- Layout ---------- */
.page {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem 3rem;
}
.hero {
padding: 2.25rem 0 0.5rem;
text-align: center;
background: none !important;
}
.hero h1 {
font-size: clamp(1.9rem, 5vw, 2.8rem);
background: linear-gradient(135deg, var(--accent-2), var(--good));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tagline {
margin: 0.25rem 0 0;
color: var(--muted);
font-size: 1rem;
}
/* ---------- View tabs ---------- */
.view-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
padding: 1.25rem 0 0.75rem;
}
.view-tab,
.view-tab:hover {
display: inline-flex;
align-items: center;
gap: 0.4rem;
height: var(--ctrl-h);
padding: 0 1rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: #fff !important;
font: inherit;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
box-shadow: none !important;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.view-tab:hover { background: var(--surface-2); border-color: var(--border-strong); }
/* Pressed: defeat main.css red press tint; .is-active:hover below outranks
this by order for the active tab. */
.view-tab:hover:active { background-color: var(--surface-2); }
.view-tab.is-active,
.view-tab.is-active:hover {
background: var(--accent-soft);
border-color: var(--accent-strong);
color: #fff !important;
}
/* ---------- Section bits ---------- */
.section-title {
margin: 0;
font-size: 1.08rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.empty-state {
text-align: center;
color: var(--muted);
padding: 2rem 1rem;
border: 1px dashed var(--border);
border-radius: var(--radius);
background: var(--surface);
margin-top: 1rem;
}
/* ---------- Your-profile card ---------- */
.profile-card {
background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(74,222,128,0.05));
border: 1px solid var(--accent-strong);
border-radius: var(--radius);
padding: 1rem 1.1rem;
margin-bottom: 1.25rem;
}
.profile-card.is-unverified {
background: var(--surface);
border-color: var(--border);
}
.profile-card-head {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.profile-card-title {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1 1 auto;
min-width: 0;
}
.profile-card-title h2 {
font-size: 1rem;
font-weight: 600;
}
.profile-card-icon {
font-size: 1.2rem;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent-soft);
}
.profile-card-actions {
display: inline-flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.profile-card-body { margin-top: 0.65rem; }
.profile-prompt {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.profile-prompt-label {
flex: 0 0 auto;
font-size: 0.85rem;
color: var(--muted);
}
.profile-prompt input[type="text"] {
flex: 1 1 14rem;
min-width: 0;
height: var(--ctrl-h);
padding: 0 0.7rem;
border: 1px solid var(--border);
border-radius: var(--ctrl-radius);
background: var(--surface-2);
color: var(--text);
font-size: 0.95rem;
}
.profile-prompt input[type="text"]:focus {
outline: 2px solid var(--accent);
outline-offset: -1px;
border-color: var(--accent);
}
.profile-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.5rem;
margin-top: 0.25rem;
}
.profile-info-cell {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.5rem 0.7rem;
}
.profile-info-cell .k {
font-size: 0.65rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.profile-info-cell .v {
margin-top: 0.15rem;
font-size: 1.05rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.15;
}
.profile-info-cell .s {
font-size: 0.72rem;
color: var(--muted);
margin-top: 0.1rem;
}
.profile-status-line {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.55rem;
font-size: 0.82rem;
flex-wrap: wrap;
}
.profile-status-line .tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
}
.profile-status-line .tag.ok { background: var(--good-soft); color: var(--good); }
.profile-status-line .tag.err { background: var(--bad-soft); color: var(--bad); }
.profile-status-line .tag.warn { background: rgba(251,146,60,0.15); color: var(--warn); }
.profile-status-line .username { font-weight: 700; color: var(--text); }
.profile-status-line .syncing-spinner {
display: inline-block;
animation: spin 0.9s linear infinite;
color: var(--accent-2);
}
.profile-hint {
margin-top: 0.55rem;
padding: 0.55rem 0.8rem;
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.78rem;
color: var(--muted);
line-height: 1.5;
}
.profile-hint strong { color: var(--text); font-weight: 600; }
/* ---------- Paste-mode dashboard entry ---------- */
.paste-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
/* Kept in place above the dashboard (the hint references the profile
card "above") but rendered deliberately compact when collapsed —
owner request: this is a secondary, optional entry path. */
padding: 0.6rem 0.9rem;
margin-bottom: 1.25rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.paste-collapse[open] { padding: 0.4rem 0.2rem 0; }
.paste-collapse > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.15rem 0;
}
.paste-collapse > summary::-webkit-details-marker { display: none; }
.paste-collapse > summary::after {
content: '';
margin-left: auto;
width: 0.6rem;
height: 0.6rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform 0.18s ease, border-color 0.18s ease;
}
.paste-collapse > summary:hover::after { border-color: var(--text); }
.paste-collapse[open] > summary::after { transform: rotate(-135deg); }
.paste-collapse > summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.paste-collapse-title {
font-size: 0.88rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--muted);
}
.paste-collapse-hint {
color: var(--muted-2);
font-size: 0.72rem;
}
.paste-collapse > summary:hover .paste-collapse-title { color: var(--text); }
.paste-collapse-body { margin-top: 0.9rem; }
.paste-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.65rem;
}
.paste-date-field {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--muted);
}
.paste-date-field span {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 0.7rem;
}
.paste-date-field input {
height: var(--ctrl-h);
padding: 0 0.6rem;
border: 1px solid var(--border);
border-radius: var(--ctrl-radius);
background: var(--surface-2);
color: var(--text);
font-size: 0.9rem;
}
.paste-mine {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem 0.8rem;
margin-bottom: 0.85rem;
}
.paste-mine-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.45rem;
}
.paste-mine-label {
font-size: 0.72rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.paste-status {
font-size: 0.78rem;
color: var(--muted);
}
.paste-status.is-success { color: var(--good); }
.paste-status.is-error { color: var(--bad); }
.paste-status.is-warn { color: var(--warn); }
.paste-section textarea {
width: 100%;
min-height: 4.2rem;
resize: vertical;
padding: 0.55rem 0.7rem;
border: 1px solid var(--border);
border-radius: var(--ctrl-radius);
background: var(--surface);
color: var(--text);
font: 13.5px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
line-height: 1.4;
}
.paste-section textarea:focus {
outline: 2px solid var(--accent);
outline-offset: -1px;
border-color: var(--accent);
}
.paste-section textarea.is-parsed { border-color: var(--good); }
.paste-section textarea.is-error { border-color: var(--bad); }
.paste-mine-rounds {
display: grid;
grid-template-columns: repeat(5, 1fr) auto;
gap: 0.35rem;
margin-top: 0.55rem;
font-size: 0.85rem;
}
.paste-round-chip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.3rem 0.2rem;
font-variant-numeric: tabular-nums;
}
.paste-round-chip .pc-label {
font-size: 0.6rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.paste-round-chip .pc-val {
font-size: 1rem;
font-weight: 700;
margin-top: 0.05rem;
}
.paste-round-chip.is-perfect { border-color: var(--good); background: var(--good-soft); }
.paste-round-chip.is-zero { border-color: var(--bad); background: var(--bad-soft); }
.paste-total-chip {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.3rem 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 4rem;
font-variant-numeric: tabular-nums;
}
.paste-total-chip .pc-label {
font-size: 0.6rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.paste-total-chip .pc-val {
font-size: 1.05rem;
font-weight: 700;
margin-top: 0.05rem;
color: var(--accent-2);
}
.paste-rivals {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.paste-rival-row {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.65rem 0.8rem;
display: grid;
grid-template-columns: minmax(8rem, 0.9fr) 2fr 7rem;
gap: 0.6rem;
align-items: stretch;
position: relative;
overflow: hidden;
}
.paste-rival-row.is-saved {
border-color: rgba(74, 222, 128, 0.55);
background: var(--good-soft);
}
@keyframes paste-row-save {
0% { transform: scale(1); }
50% { transform: scale(1.005); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25); }
100% { transform: scale(1); }
}
.paste-rival-row.is-saved-flash { animation: paste-row-save 0.55s ease; }
.paste-rival-row::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--rival-color, var(--accent));
}
.paste-rival-info {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.paste-rival-info .pri-icon {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--rival-color, var(--accent));
font-size: 1rem;
flex: 0 0 auto;
filter: brightness(0.95);
}
.paste-rival-info .pri-icon.tinted {
background: color-mix(in srgb, var(--rival-color, var(--accent)) 28%, var(--surface-3));
}
.paste-rival-info .pri-name {
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.paste-rival-info .pri-meta {
font-size: 0.72rem;
color: var(--muted);
margin-top: 0.05rem;
}
.paste-rival-textarea {
min-height: 3.4rem;
width: 100%;
resize: vertical;
}
.paste-rival-side {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 0.3rem;
min-width: 0;
}
.paste-rival-result {
display: flex;
align-items: center;
justify-content: center;
height: 2.2rem;
border-radius: 999px;
background: var(--surface-3);
color: var(--muted);
font-size: 0.85rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
padding: 0 0.7rem;
white-space: nowrap;
}
.paste-rival-result.W { background: var(--good-soft); color: var(--good); }
.paste-rival-result.L { background: var(--bad-soft); color: var(--bad); }
.paste-rival-result.T { background: var(--tie-soft); color: var(--tie); }
.paste-rival-result.error { background: var(--bad-soft); color: var(--bad); }
/* The bottom action bar that holds the single Save-day button */
.paste-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.paste-actions[hidden] { display: none; }
.paste-summary {
flex: 1 1 12rem;
font-size: 0.85rem;
color: var(--muted);
min-width: 0;
}
.paste-summary.is-ready { color: var(--text); }
.paste-summary.is-success { color: var(--good); }
.paste-summary.is-error { color: var(--bad); }
.paste-save-all {
flex: 0 0 auto;
min-width: 12rem;
height: 2.6rem;
font-size: 0.95rem;
}
.paste-save-all .pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4rem;
height: 1.4rem;
padding: 0 0.4rem;
margin-left: 0.5rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
}
.paste-rival-rounds {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.15rem;
font-size: 0.78rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.paste-rival-rounds .prr-chip {
display: inline-flex;
align-items: center;
gap: 0.2rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.15rem 0.55rem;
}
.paste-rival-rounds .prr-chip.W { border-color: rgba(74,222,128,0.45); color: var(--good); }
.paste-rival-rounds .prr-chip.L { border-color: rgba(248,113,113,0.45); color: var(--bad); }
.paste-empty {
text-align: center;
color: var(--muted);
padding: 1rem;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
/* Mobile: stack the per-rival row vertically */
@media (max-width: 720px) {
.paste-rival-row {
grid-template-columns: 1fr;
}
.paste-rival-side {
flex-direction: row;
align-items: stretch;
min-width: 0;
}
.paste-rival-result { flex: 1 1 auto; }
.paste-actions { flex-direction: column; align-items: stretch; }
.paste-save-all { width: 100%; }
}
/* ---------- Dashboard summary ---------- */
.dash-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.65rem;
margin-bottom: 1.4rem;
}
/* Aligned with .stat-card on the rival page so the dashboard's quick
stats and the rival detail stats read as the same visual family. */
.dash-summary-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem 0.85rem;
min-height: 78px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.05rem;
}
.dash-summary-card .label {
font-size: 0.68rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.dash-summary-card .value {
font-size: 1.4rem;
font-weight: 700;
margin-top: 0.15rem;
color: var(--text);
line-height: 1.1;
letter-spacing: -0.01em;
}
.dash-summary-card .sub {
font-size: 0.74rem;
color: var(--muted);
margin-top: 0.15rem;
}
/* ---------- Today's predictions card ----------
Head-to-head card comparing each player's predicted total against
their actual once results sync. Visual language mirrors the rival
detail page: surface card, soft section header underline, muted
labels, premium pill states. City names from the daily puzzle are
intentionally never rendered — only scores. */
.todays-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.05rem 1.15rem 1.15rem;
margin-bottom: 1.4rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.todays-card[hidden] { display: none; }
.todays-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.65rem 1rem;
flex-wrap: wrap;
padding-bottom: 0.85rem;
margin-bottom: 0.9rem;
border-bottom: 1px solid var(--border);
}
.todays-card-title { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; }
.todays-card-title .section-title {
margin: 0;
letter-spacing: -0.01em;
}
.todays-card-sub {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.01em;
}
.todays-card-status {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.22rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--muted);
background: var(--surface-2);
white-space: nowrap;
}
.todays-card-status.is-loading {
color: var(--accent-2);
background: var(--accent-soft);
border-color: var(--accent-strong);
}
.todays-card-status.is-warn {
color: var(--warn);
background: rgba(251, 146, 60, 0.10);
border-color: rgba(251, 146, 60, 0.30);
}
.todays-card-status.is-good {
color: var(--good);
background: var(--good-soft);
border-color: rgba(74, 222, 128, 0.30);
}
.todays-card-status.is-accent {
color: var(--accent-2);
background: var(--accent-soft);
border-color: var(--accent-strong);
}
.todays-card-status.is-muted {
color: var(--muted);
background: var(--surface-2);
border-color: var(--border);
}
.todays-card-body { display: flex; flex-direction: column; gap: 0.55rem; }
/* Tiny inline-SVG slot used for column headers, delta arrows, and chip
chevrons. Width-bound so the icon always pairs cleanly with adjacent
text without nudging the baseline. */
.pred-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.92em;
height: 0.92em;
flex-shrink: 0;
}
.pred-ic > svg { width: 100%; height: 100%; display: block; }
.pred-col-ic { color: var(--muted-2); margin-right: 0.32rem; }
.pred-row-head .pred-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; }
.pred-row {
display: grid;
grid-template-columns: minmax(140px, 1.6fr) repeat(3, minmax(74px, 1fr));
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.8rem 0.65rem 0.85rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
border-left: 3px solid var(--row-accent, transparent);
}
.pred-row-head {
background: transparent;
border-left: 0;
padding: 0 0.85rem 0.4rem;
color: var(--muted-2);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--border);
margin-bottom: 0.2rem;
}
.pred-row-head .pred-cell { text-align: right; color: var(--muted-2); font-family: inherit; }
.pred-row-you { background: var(--accent-soft); }
.pred-label {
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.005em;
}
.pred-cell {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: -0.005em;
font-family: var(--mono);
}
.pred-predicted { color: var(--accent-2); }
.pred-actual { color: var(--text); }
.pred-delta-cell { display: flex; justify-content: flex-end; }
.pred-empty {
margin: 0;
padding: 0.65rem 0.2rem;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.5;
}
/* Pill-shaped delta badge for the Δ column. Soft tint + matching arrow
so direction reads instantly even at small sizes. */
.pred-delta-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.84rem;
letter-spacing: -0.01em;
padding: 0.18rem 0.5rem 0.18rem 0.42rem;
border-radius: 999px;
border: 1px solid transparent;
line-height: 1;
}
.pred-delta-badge.is-pos {
color: var(--good);
background: var(--good-soft);
border-color: rgba(74, 222, 128, 0.28);
}
.pred-delta-badge.is-neg {
color: var(--bad);
background: var(--bad-soft);
border-color: rgba(248, 113, 113, 0.26);
}
.pred-delta-badge.is-zero {
color: var(--muted);
background: var(--tie-soft);
border-color: rgba(154, 163, 178, 0.24);
}
.pred-delta-badge.is-na {
color: var(--muted-2);
background: transparent;
border-color: transparent;
padding: 0 0.4rem;
font-family: inherit;
}
.pred-delta-num { display: inline-block; }
@media (max-width: 520px) {
.pred-row { grid-template-columns: minmax(100px, 1.3fr) repeat(3, minmax(58px, 1fr)); gap: 0.45rem; font-size: 0.92rem; padding: 0.55rem 0.6rem; }
.pred-row-head { font-size: 0.6rem; padding: 0 0.6rem 0.3rem; }
.pred-delta-badge { font-size: 0.78rem; padding: 0.15rem 0.4rem; }
}
/* On the very narrowest phones the totals row's fixed column minimums
(100px label + 3×58px) outgrow the available width and push the Δ badge
off the right edge. Tighten the minimums so all four columns fit. */
@media (max-width: 360px) {
.pred-row { grid-template-columns: minmax(74px, 1.1fr) repeat(3, minmax(42px, 1fr)); gap: 0.3rem; }
}
/* Wraps a player row + its per-round chip strip into one visual block
so the strip reads as belonging to the totals above. Inherits the
per-player left accent so the totals row and chip strip share it. */
.pred-row-wrap {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0.7rem 0.85rem 0.75rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
border-left: 3px solid var(--row-accent, transparent);
}
.pred-row-wrap-you { background: var(--accent-soft); }
.pred-row-wrap > .pred-row { background: transparent; padding: 0; gap: 0.75rem; border-left: 0; }
/* Day-tab strip across the top of the predictions body. Inactive pills
sit on surface-2, today wears a subtle accent ring, and the selected
pill uses accent-soft + accent border to match the rest of the
"selected state" treatment elsewhere in the app — no harsh fills. */
/* ---------- Predictions day selector ----------
The 7-day strip is the centrepiece of the predictions view, so the
tabs read as premium pills: resting tabs are quiet, the selected day
blooms into a larger accent-gradient pill with a soft glow + raised
number, and "Today" carries a distinct dot marker. Horizontal scroll
is preserved for narrow viewports. Click/aria semantics are untouched. */
.pred-day-tabs {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding: 0.35rem 0.2rem 0.85rem;
margin: -0.2rem -0.2rem 0.7rem;
scrollbar-width: thin;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.pred-day-tab {
position: relative;
flex: 0 0 auto;
min-width: 66px;
padding: 0.5rem 0.7rem 0.55rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-2);
/* !important pins: main.css paints every button gray (#555 !important +
inset ring) and red on hover (#ce1b28 !important + red ring + red
press tint). */
color: var(--muted) !important;
box-shadow: none !important;
font: inherit;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.12rem;
line-height: 1.05;
scroll-snap-align: center;
transition: border-color 0.18s ease, background 0.18s ease,
color 0.18s ease, transform 0.16s ease, box-shadow 0.18s ease;
}
.pred-day-tab:hover {
border-color: var(--border-strong);
background: var(--surface-3);
color: var(--text) !important;
box-shadow: none !important;
transform: translateY(-1px);
}
.pred-day-tab:active { transform: translateY(0); }
.pred-day-tab:hover:active { background-color: var(--surface-3); }
/* Today (when not the selected day): subtle accent text so the current
day is locatable at a glance. (The little dot marker was removed —
owner request; the accent-colored text and "Today" label suffice.) */
.pred-day-tab.is-today { color: var(--text) !important; }
.pred-day-tab.is-today .pred-day-tab-num { color: var(--accent-2); }
/* Selected day: the centrepiece. Larger pill via scale, accent gradient
fill, layered glow, and a brighter raised number. */
.pred-day-tab.is-active {
background:
radial-gradient(120% 140% at 50% 0%,
rgba(129, 140, 248, 0.30) 0%, rgba(99, 102, 241, 0.10) 60%,
rgba(99, 102, 241, 0.06) 100%),
linear-gradient(180deg, var(--surface-3), var(--surface-2));
border-color: var(--accent);
color: var(--accent-2) !important;
transform: translateY(-2px) scale(1.06);
/* !important so the base `box-shadow: none !important` pin above doesn't
strip the selected-day glow. */
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(99, 102, 241, 0.35),
0 8px 22px -8px rgba(99, 102, 241, 0.55) !important;
}
.pred-day-tab.is-active:hover { transform: translateY(-2px) scale(1.06); }
.pred-day-tab.is-active::after {
content: '';
position: absolute;
left: 50%;
bottom: -0.5rem;
transform: translateX(-50%);
width: 26px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}
.pred-day-tab.is-active .pred-day-tab-num { color: var(--accent-ink); }
.pred-day-tab.is-loading { opacity: 0.6; cursor: progress; }
.pred-day-tab.is-loading .pred-day-tab-num { color: var(--muted-2); }
.pred-day-tab.is-error {
border-color: rgba(251, 146, 60, 0.45);
color: var(--warn);
}
.pred-day-tab.is-error .pred-day-tab-name,
.pred-day-tab.is-error .pred-day-tab-num { color: var(--warn); }
.pred-day-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.pred-day-tab-name {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
color: var(--muted);
transition: color 0.18s ease;
}
.pred-day-tab.is-active .pred-day-tab-name { color: var(--accent-2); }
.pred-day-tab.is-today .pred-day-tab-name { color: var(--accent-2); }
.pred-day-tab-num {
font-size: 1.12rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
transition: color 0.18s ease;
}
.pred-day-tab.is-active .pred-day-tab-num { font-size: 1.22rem; }
/* Per-round chips — premium compact stat modules. A thin top accent
line keys the chip to its Δ direction; the background carries a
gentle tint of the same semantic so the eye reads five chips in a
single sweep without any harsh strokes. ×weight rides as a small
superscript badge in the top-right corner. */
.pred-round-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.45rem;
}
.prc {
position: relative;
background: rgba(255, 255, 255, 0.015);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.55rem 0.5rem 0.5rem;
display: grid;
grid-template-rows: auto auto auto;
row-gap: 0.22rem;
align-items: center;
justify-items: center;
text-align: center;
overflow: hidden;
}
/* Thin top accent line drawn via ::before so border-radius keeps clean
rounded corners on the chip itself. Hidden by default; the Δ status
modifiers below promote it. */
.prc::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.prc-head {
display: flex;
align-items: baseline;
gap: 0.3rem;
font-size: 0.58rem;
color: var(--muted-2);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.prc-slot { font-weight: 700; color: var(--muted); }
.prc-weight {
position: absolute;
top: 0.32rem;
right: 0.4rem;
font-size: 0.54rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--muted);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.06rem 0.22rem;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.prc-nums {
display: flex;
align-items: center;
gap: 0.32rem;
font-family: var(--mono);
font-size: 0.98rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.prc-pred { color: var(--accent-2); }
.prc-actual { color: var(--text); }
.prc-arrow {
color: var(--muted-2);
width: 0.72em;
height: 0.72em;
opacity: 0.85;
}
.prc-delta {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
min-height: 0.85rem;
line-height: 1;
}
.prc-delta-ic { width: 0.78em; height: 0.78em; }
.prc-pos {
background: var(--good-soft);
border-color: rgba(74, 222, 128, 0.30);
}
.prc-pos::before { background: linear-gradient(90deg,
transparent 0%, var(--good) 50%, transparent 100%); opacity: 0.65; }
.prc-pos .prc-delta { color: var(--good); }
.prc-pos .prc-weight { color: var(--good); border-color: rgba(74, 222, 128, 0.25); background: rgba(74, 222, 128, 0.07); }
.prc-neg {
background: var(--bad-soft);
border-color: rgba(248, 113, 113, 0.28);
}
.prc-neg::before { background: linear-gradient(90deg,
transparent 0%, var(--bad) 50%, transparent 100%); opacity: 0.6; }
.prc-neg .prc-delta { color: var(--bad); }
.prc-neg .prc-weight { color: var(--bad); border-color: rgba(248, 113, 113, 0.22); background: rgba(248, 113, 113, 0.06); }
.prc-zero {
background: var(--tie-soft);
border-color: rgba(154, 163, 178, 0.28);
}
.prc-zero::before { background: linear-gradient(90deg,
transparent 0%, var(--muted) 50%, transparent 100%); opacity: 0.4; }
.prc-zero .prc-delta { color: var(--muted); }
/* Synced actual without a prediction (rival played today, predictor lacks
history or user hasn't played). The chip stays in a neutral tone — no
W/L colouring since there's no comparison — but a soft accent ring marks
it as "real data, just no prediction to delta against". */
.prc.prc-actual-only {
background: rgba(74, 222, 128, 0.04);
border-color: rgba(74, 222, 128, 0.22);
}
.prc.prc-actual-only::before { background: linear-gradient(90deg,
transparent 0%, var(--good) 50%, transparent 100%); opacity: 0.45; }
.prc.prc-actual-only .prc-actual { color: var(--good); }
@media (max-width: 520px) {
.pred-round-strip { gap: 0.32rem; }
/* Five equal-width chips have to share a phone's width, which leaves each
one too narrow to hold "predicted → actual" side by side (a 3-digit 100
overflowed and clipped). Stack the two numbers vertically instead so
every value stays fully visible; predicted (accent) sits above actual
(text), with the Δ below. The horizontal arrow is dropped — the colour
split + the Predicted/Actual column headers carry the distinction. */
.prc { padding: 0.4rem 0.18rem 0.4rem; }
.prc-nums {
flex-direction: column;
align-items: center;
gap: 0.04rem;
font-size: 0.92rem;
line-height: 1.08;
}
.prc-arrow { display: none; }
.prc-head { font-size: 0.55rem; }
/* Keep the ×weight badge clear of the round label: left-align the label so
the corner badge no longer lands on top of it on the narrowest chips. */
.prc-head { justify-content: flex-start; width: 100%; padding-left: 0.05rem; }
.prc-weight { font-size: 0.48rem; top: 0.28rem; right: 0.2rem; padding: 0.04rem 0.16rem; }
.prc-delta { font-size: 0.64rem; }
}
/* ---------- Location reveal strip ----------
Day-level "Locations" row shown only after the user has logged their own
game for the selected day. One toggle per round; revealing fills in the
city name in place. Buttons must pin their own colour/box-shadow on hover
and focus because site-wide main.css paints `button:hover` red !important. */
.pred-loc {
margin-top: 0.35rem;
padding-top: 0.65rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pred-loc-head {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
}
.pred-loc-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.45rem;
}
.pred-loc-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.18rem;
min-width: 0;
overflow: hidden;
/* Override main.css button defaults that break this component:
main.css sets height:3.25rem and white-space:nowrap on all buttons;
neither works for a multi-line location chip. */
height: auto;
line-height: inherit;
white-space: normal;
padding: 0.42rem 0.35rem;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--muted) !important;
font: inherit;
cursor: pointer;
text-align: center;
box-shadow: none !important;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pred-loc-btn:hover {
border-color: var(--border-strong) !important;
background: var(--surface-3);
color: var(--text) !important;
box-shadow: none !important;
}
/* Pressed: defeat main.css red press tint; .is-revealed:hover below wins
its tie by order. */
.pred-loc-btn:hover:active { background-color: var(--surface-3); }
.pred-loc-btn:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
color: var(--text) !important;
box-shadow: none !important;
}
.pred-loc-slot {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-2);
}
.pred-loc-name {
font-size: 0.72rem;
font-weight: 600;
line-height: 1.15;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
width: 100%;
}
.pred-loc-btn.is-revealed {
background: var(--accent-soft);
border-color: var(--accent-strong) !important;
color: var(--accent-2) !important;
}
.pred-loc-btn.is-revealed .pred-loc-slot { color: var(--accent-2); }
.pred-loc-btn.is-revealed .pred-loc-name { color: var(--text); }
.pred-loc-btn.is-revealed:hover {
background: var(--accent-soft);
border-color: var(--accent) !important;
color: var(--accent-2) !important;
}
.pred-loc-btn.is-loading .pred-loc-name { color: var(--muted-2); }
.pred-loc-btn.is-error {
border-color: rgba(251, 146, 60, 0.45) !important;
}
.pred-loc-btn.is-error .pred-loc-name { color: var(--warn); }
@media (max-width: 520px) {
/* 3+2 grid: five ~65px columns force mid-word breaks in long names
("Normand y, France"); three ~108px columns let names wrap at
spaces instead. */
.pred-loc-strip { gap: 0.32rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pred-loc-btn { padding: 0.36rem 0.22rem; }
.pred-loc-name { font-size: 0.66rem; }
.pred-loc-slot { font-size: 0.5rem; }
}
/* ---------- Dashboard rival grid ---------- */
.dash-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.rival-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.85rem;
}
.rival-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem;
text-align: left;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
position: relative;
overflow: hidden;
}
.rival-card:hover {
border-color: var(--border-strong);
background: var(--surface-2);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.rival-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--rival-color, var(--accent));
}
.rival-card-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.65rem;
}
.rival-icon {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rival-color, var(--accent-soft));
font-size: 1.25rem;
flex: 0 0 auto;
}
.rival-card-name {
font-size: 1.05rem;
font-weight: 600;
}
.rival-card-meta {
font-size: 0.78rem;
color: var(--muted);
margin-top: 0.05rem;
}
/* Row actions on a rival card — Linear/Raycast style. Tiny square icon
buttons sharing one center line with the avatar, low contrast at rest,
gentle hover so they feel integrated into the card. */
.rival-card-actions {
margin-left: auto;
display: inline-flex;
gap: 2px;
align-self: center;
}
.rival-card-edit,
.rival-card-sync {
width: 26px;
height: 26px;
padding: 0;
border: 0;
background: transparent;
/* !important pins vs main.css gray/red button theme (color + inset ring
+ press tint). */
color: var(--muted) !important;
box-shadow: none !important;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.rival-card-edit:hover,
.rival-card-sync:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text) !important;
box-shadow: none !important;
}
.rival-card-edit:hover:active,
.rival-card-sync:hover:active { background-color: rgba(255, 255, 255, 0.06); }
.rival-card-edit:focus-visible,
.rival-card-sync:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
.rival-card-edit svg,
.rival-card-sync svg {
width: 14px;
height: 14px;
display: block;
}
.rival-card-sync[disabled] { opacity: 0.45; cursor: not-allowed; }
.rival-card-sync.is-loading { color: var(--accent-2) !important; animation: spin 0.9s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.rival-sync-status {
display: inline-flex;
align-items: center;
margin-top: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
padding: 0.1rem 0.5rem;
border-radius: 999px;
white-space: nowrap;
}
.rival-sync-status.ok { background: var(--good-soft); color: var(--good); }
.rival-sync-status.flat { background: var(--surface-3); color: var(--muted); }
.rival-sync-status.err { background: var(--bad-soft); color: var(--bad); }
.rival-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
margin: 0.5rem 0 0.65rem;
}
.rival-stat {
background: var(--surface-2);
border-radius: 6px;
padding: 0.45rem 0.5rem;
text-align: center;
}
.rival-stat .v { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.rival-stat .k { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem; }
.rival-stat.win .v { color: var(--good); }
.rival-stat.loss .v { color: var(--bad); }
.rival-stat.tie .v { color: var(--tie); }
.rival-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
flex-wrap: wrap;
font-size: 0.8rem;
color: var(--muted);
}
.rival-card-note {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin-top: 0.55rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border);
font-size: 0.74rem;
color: var(--muted);
}
.rival-card-note-emoji {
flex: none;
font-size: 0.8rem;
line-height: 1;
}
.rival-card-note-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-pills {
display: inline-flex;
gap: 3px;
}
.form-pill {
width: 16px;
height: 16px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
font-weight: 700;
color: #fff;
}
.form-pill.W { background: var(--good); color: var(--good-ink); }
.form-pill.L { background: var(--bad); color: var(--bad-ink); }
.form-pill.T { background: var(--tie); color: #1a1d24; }
.leaderboard-form {
display: inline-flex;
gap: 2px;
align-items: center;
}
.lb-form-pill {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.58rem;
font-weight: 700;
color: #fff;
}
.lb-form-W { background: var(--good); color: var(--good-ink); }
.lb-form-L { background: var(--bad); color: var(--bad-ink); }
.lb-form-T { background: var(--tie); color: #1a1d24; }
.lb-form-empty {
background: transparent;
border: 1px solid var(--border);
opacity: 0.35;
}
.streak-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
}
.streak-tag.win { background: var(--good-soft); color: var(--good); }
.streak-tag.loss { background: var(--bad-soft); color: var(--bad); }
.streak-tag.hot { background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; box-shadow: 0 0 0 1px rgba(249,115,22,0.4); }
.win-pct-bar {
height: 6px;
background: var(--surface-3);
border-radius: 999px;
overflow: hidden;
margin: 0.3rem 0 0.55rem;
}
.win-pct-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--good), var(--accent-2));
}
.drama-callout {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
padding: 0.3rem 0.6rem;
border-radius: 6px;
margin-bottom: 0.55rem;
}
.drama-callout-win {
background: rgba(249, 115, 22, 0.15);
color: #fb923c;
border: 1px solid rgba(249, 115, 22, 0.25);
}
.drama-callout-loss {
background: rgba(96, 165, 250, 0.12);
color: #60a5fa;
border: 1px solid rgba(96, 165, 250, 0.22);
}
.drama-callout-comeback {
background: rgba(250, 204, 21, 0.12);
color: #fbbf24;
border: 1px solid rgba(250, 204, 21, 0.22);
}
.drama-callout-milestone {
background: rgba(168, 85, 247, 0.15);
color: #c084fc;
border: 1px solid rgba(168, 85, 247, 0.25);
}
.drama-callout-tie {
background: rgba(148, 163, 184, 0.15);
color: #cbd5e1;
border: 1px solid rgba(148, 163, 184, 0.25);
}
.drama-callout-urgent {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.25);
}
/* ---------- Rival detail ---------- */
.rival-header {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.1rem;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
}
.rival-header::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--rival-color, var(--accent));
}
.rival-header .rival-icon { width: 3rem; height: 3rem; font-size: 1.5rem; }
.rival-header h2 { font-size: 1.5rem; }
.rival-header .meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.1rem; }
.rival-header-actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.6rem;
margin-bottom: 1rem;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem 0.85rem;
min-height: 78px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.05rem;
}
.stat-card .label {
font-size: 0.68rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.stat-card .value {
font-size: 1.4rem;
font-weight: 700;
margin-top: 0.15rem;
line-height: 1.1;
letter-spacing: -0.01em;
}
.stat-card .sub {
font-size: 0.74rem;
color: var(--muted);
margin-top: 0.15rem;
}
/* Multi-line subs (e.g. the No-multiplier H2H card showing the actual
record above its flips note) stack each .sub-line on its own row. */
.stat-card .sub .sub-line { display: block; }
.stat-card.is-good .value { color: var(--good); }
.stat-card.is-bad .value { color: var(--bad); }
.stat-card.is-accent .value { color: var(--accent-2); }
/* Grouped stat cards (rival view): Performance / Momentum / Key Insights.
When #rival-stat-cards holds groups it stacks them vertically; each group
keeps its own .stat-cards grid inside, so the card mechanics are unchanged.
The takeaway-led cards run longer than the old metric cards, so the value
shrinks a touch to read as a sentence rather than a single big number. */
#rival-stat-cards {
display: block;
}
.stat-card-group { margin-bottom: 1rem; }
.stat-card-group:last-child { margin-bottom: 0; }
.stat-card-group > .stat-cards { margin-bottom: 0; }
.stat-card-group-title {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted-2);
margin: 0 0 0.5rem;
}
.stat-card-group .stat-card .value {
font-size: 1.04rem;
line-height: 1.25;
}
.charts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-bottom: 1.25rem;
/* Don't stretch shorter cards (e.g. the calendar heatmap) to match
taller siblings — that leaves dead space inside the shorter card. */
align-items: start;
}
.chart-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem;
}
.chart-card-wide { grid-column: 1 / -1; }
.chart-card-head { margin-bottom: 0.5rem; }
.chart-card-head h3 { font-size: 0.95rem; font-weight: 600; }
.chart-card-head .chart-sub { font-size: 0.78rem; color: var(--muted); }
/* Chart.js needs a parent that is (a) relatively positioned, (b) of a fixed
height, and (c) dedicated to the canvas. Without this, responsive:true +
maintainAspectRatio:false enters a resize feedback loop where the canvas
keeps growing each frame as you scroll — eventually crashing the tab.
The wrapper below satisfies all three rules. */
.chart-canvas-wrap {
position: relative;
width: 100%;
height: 240px;
}
.chart-canvas-wrap.is-tall { height: 280px; }
.chart-canvas-wrap > canvas {
display: block !important;
width: 100% !important;
height: 100% !important;
}
@media (max-width: 540px) {
.chart-canvas-wrap { height: 220px; }
.chart-canvas-wrap.is-tall { height: 260px; }
}
/* ---------- Location breakdown section ---------- */
.loc-section { margin: 0.5rem 0 1.25rem; }
.loc-section[hidden] { display: none; }
.loc-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.6rem;
}
.loc-section-sub { color: var(--muted); font-size: 0.85rem; }
.loc-callouts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.loc-callouts[hidden] { display: none; }
/* Insight groups: top-of-section, scannable. Each group leads with one big
plain-language headline; supporting numbers sit smaller below it. A left
accent rail color-codes the category (good / bad / warn / neutral). */
.loc-insight-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.7rem;
margin-bottom: 1.25rem;
}
.loc-insight-groups[hidden] { display: none; }
.loc-insight-group {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
padding: 0.75rem 0.9rem 0.8rem;
}
.loc-insight-group.good { border-left-color: var(--good); }
.loc-insight-group.bad { border-left-color: var(--bad); }
.loc-insight-group.warn { border-left-color: var(--warn); }
.lig-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted-2);
}
.lig-headline {
font-size: 1.02rem;
font-weight: 600;
color: var(--text);
line-height: 1.3;
margin-top: 0.25rem;
}
.lig-headline strong { color: var(--accent-2); font-weight: 700; }
.loc-insight-group.good .lig-headline strong { color: var(--good); }
.loc-insight-group.bad .lig-headline strong { color: var(--bad); }
.loc-insight-group.warn .lig-headline strong { color: var(--warn); }
.lig-stats {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.55rem;
}
.lig-stat {
font-size: 0.72rem;
color: var(--muted);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.12rem 0.5rem;
font-variant-numeric: tabular-nums;
}
/* Sub-headings that demote the dense data (charts, per-round cards) below the
insight groups. */
.loc-subhead {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin: 0.25rem 0 0.7rem;
}
.loc-card-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
margin-top: 1rem;
}
.loc-card {
/* --loc-tint (set inline per card) layers a subtle win-rate tint over the
surface: greenest = best round, reddest = worst. Unset → plain surface. */
background:
linear-gradient(var(--loc-tint, transparent), var(--loc-tint, transparent)),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem 0.65rem;
text-align: center;
position: relative;
overflow: hidden;
}
.loc-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--loc-color, var(--accent));
}
.loc-card .lc-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.loc-card .lc-mult {
font-size: 0.65rem;
color: var(--muted-2);
margin-top: 0.05rem;
}
.loc-card .lc-avg {
font-size: 1.4rem;
font-weight: 700;
margin-top: 0.3rem;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.loc-card .lc-avg-them {
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-2);
font-variant-numeric: tabular-nums;
margin-top: 0.1rem;
}
.loc-card .lc-rate {
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--muted);
}
.loc-card .lc-rate strong {
display: block;
font-size: 1rem;
color: var(--text);
margin-top: 0.05rem;
}
.loc-card .lc-pct-bar {
height: 4px;
background: var(--surface-3);
border-radius: 999px;
overflow: hidden;
margin-top: 0.35rem;
}
.loc-card .lc-pct-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--good), var(--accent-2));
}
.loc-card .lc-record {
font-size: 0.7rem;
color: var(--muted);
margin-top: 0.4rem;
font-variant-numeric: tabular-nums;
}
/* ---------- Continent breakdown ---------- */
.continent-section { margin: 0.5rem 0 1.25rem; }
.continent-section[hidden] { display: none; }
.continent-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.6rem;
margin-top: 0.5rem;
}
.continent-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem 0.85rem;
position: relative;
overflow: hidden;
}
.continent-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--cont-color, var(--accent));
}
.continent-head {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.4rem;
}
.continent-icon {
width: 1.8rem;
height: 1.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: color-mix(in srgb, var(--cont-color, var(--accent)) 22%, var(--surface-3));
font-size: 1.1rem;
}
.continent-name {
font-weight: 600;
font-size: 0.95rem;
}
.continent-rounds {
margin-left: auto;
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.continent-scores {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3rem;
font-variant-numeric: tabular-nums;
margin-bottom: 0.4rem;
}
.continent-scores .col .k {
font-size: 0.62rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.continent-scores .col .v {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.15;
}
/* Winner green / loser red, set per continent by renderContinentSection;
ties carry neither class and stay neutral. */
.continent-scores .col .v.is-win { color: var(--good); }
.continent-scores .col .v.is-lose { color: var(--bad); }
.continent-record {
font-size: 0.72rem;
color: var(--muted);
margin-bottom: 0.3rem;
font-variant-numeric: tabular-nums;
}
.continent-record .gw { color: var(--good); font-weight: 600; }
.continent-record .gl { color: var(--bad); font-weight: 600; }
.continent-record .gt { color: var(--tie); font-weight: 600; }
.continent-winbar {
height: 6px;
background: var(--surface-3);
border-radius: 999px;
overflow: hidden;
}
.continent-winbar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--good), var(--accent-2));
}
.continent-winpct {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.78rem;
font-weight: 600;
}
.continent-winpct.good { color: var(--good); }
.continent-winpct.bad { color: var(--bad); }
/* ---------- Calendar heatmap (game history) ---------- */
/* When hidden via JS, the chart-card the heatmap lives in disappears.
Sibling chart-card in the same charts-grid row still renders. */
#heatmap-section[hidden] { display: none; }
/* The heatmap lives inside a .chart-card slot in the round-by-round
charts-grid. The grid below fills the card width via `1fr` columns and
`aspect-ratio: 1` cells; the body just stacks header + grid + legend.
No min-height — the card sizes to its content (the parent grid sets
align-items: start so it doesn't stretch to match the sibling card). */
.heatmap-card-body {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.heatmap-scroll-wrap {
padding-bottom: 4px;
/* Grid uses 1fr columns + width: 100%, so it always fills the wrap.
No scroll, no flex centering needed. */
}
.heatmap-cell {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 2px;
flex-shrink: 0;
}
.heatmap-W { background: var(--good); }
.heatmap-L { background: var(--bad); }
.heatmap-T { background: var(--tie); }
.heatmap-none { background: var(--surface-3); }
.heatmap-empty { background: transparent; }
.heatmap-legend {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
margin-top: 0.55rem;
}
.heatmap-legend-item {
display: flex;
align-items: center;
gap: 0.3rem;
}
.heatmap-legend-lbl {
font-size: 0.72rem;
color: var(--muted);
}
/* Calendar heatmap cells stretch to fill their `1fr` grid column (JS sets
`grid-template-columns: repeat(N, 1fr)` and `width: 100%` on the grid).
`aspect-ratio: 1 / 1` keeps each cell square so row height follows column
width — no JS measurement needed and the grid fills the card's full width.
Scoped to #heatmap-grid so legend dots and round-by-round cells keep
their own sizing. */
#heatmap-grid .heatmap-cell {
width: 100%;
height: auto;
min-width: 0;
aspect-ratio: 1 / 1;
}
/* Heatmap: rows = games, cols = rounds. Cell color = my raw score 0-100. */
.loc-heatmap {
display: grid;
gap: 4px;
font-size: 0.72rem;
}
.heatmap-row {
display: grid;
grid-template-columns: 4.5rem repeat(5, 1fr) 4rem;
gap: 4px;
align-items: center;
}
.heatmap-row.is-header {
font-size: 0.65rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
text-align: center;
}
.heatmap-row.is-header .heatmap-rowlabel,
.heatmap-row.is-header .heatmap-totalcol { text-align: left; }
.heatmap-rowlabel {
font-size: 0.72rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Date links out to maptap.gg — same quiet dotted-underline treatment as
the history table's date column (and pinned against main.css link reds). */
.heatmap-rowlabel .maptap-day-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
padding-bottom: 1px;
}
.heatmap-rowlabel .maptap-day-link:hover,
.heatmap-rowlabel .maptap-day-link:focus-visible {
color: var(--accent-2);
border-bottom-style: solid;
outline: none;
}
/* Round-by-round cells live inside .heatmap-row's 1fr grid columns.
Scoped to .heatmap-row so the calendar-heatmap dots (.heatmap-cell at
the top of this file, 11px square) keep their fixed size. */
.heatmap-row .heatmap-cell {
width: auto;
min-width: 0;
height: 1.9rem;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #0b0d12;
position: relative;
overflow: hidden;
padding: 0 0.25rem;
font-size: 0.78rem;
}
.heatmap-cell.lost {
outline: 1px solid rgba(248, 113, 113, 0.55);
outline-offset: -1px;
}
.heatmap-cell.tied {
outline: 1px dashed rgba(154, 163, 178, 0.6);
outline-offset: -1px;
}
.heatmap-cell.empty {
background: var(--surface-2) !important;
color: var(--muted-2);
}
.heatmap-totalcol {
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
background: var(--surface-2);
border-radius: 5px;
padding: 0.3rem 0.25rem;
font-size: 0.85rem;
}
.heatmap-totalcol.win { color: var(--good); }
.heatmap-totalcol.loss { color: var(--bad); }
.heatmap-totalcol.tie { color: var(--tie); }
.heatmap-row:not(.is-header) .heatmap-totalcol {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
justify-content: center;
}
.heatmap-total-num { font-weight: 700; }
.heatmap-total-result {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.05em;
opacity: 0.7;
}
/* Round-dot strip used inside the games tables */
.round-dots {
display: inline-flex;
align-items: center;
gap: 3px;
vertical-align: middle;
}
.round-dot {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
}
.round-dot.W { background: var(--good); }
.round-dot.L { background: var(--bad); }
.round-dot.T { background: var(--tie); }
.round-dot.empty { background: rgba(255, 255, 255, 0.06); }
.callouts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.6rem;
margin-bottom: 1.25rem;
}
.callout {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.65rem 0.85rem;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.callout .ic { font-size: 1.1rem; flex: 0 0 auto; }
.callout .txt { font-size: 0.85rem; color: var(--text); line-height: 1.35; }
.callout .txt strong { color: var(--accent-2); }
.callout.good { border-color: rgba(74, 222, 128, 0.35); background: var(--good-soft); }
.callout.bad { border-color: rgba(248, 113, 113, 0.35); background: var(--bad-soft); }
/* ---------- Tables ----------
Modern dashboard data table: light borders, tight rhythm, refined
header, hover-revealed row actions. */
.games-table-wrap, .leaderboard-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
.games-table, .leaderboard-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
min-width: 640px;
}
/* Header — small caps, low contrast, no heavy bg. Sits as a quiet legend
above the data rather than as a chrome bar. */
.games-table thead th, .leaderboard-table thead th {
text-align: left;
font-weight: 500;
color: var(--muted-2);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.09em;
padding: 0.65rem 0.7rem;
border-bottom: 1px solid var(--border);
background: transparent;
white-space: nowrap;
font-feature-settings: "ss01";
}
.games-table thead th:first-child,
.leaderboard-table thead th:first-child { padding-left: 0.95rem; }
.games-table thead th:last-child,
.leaderboard-table thead th:last-child { padding-right: 0.95rem; }
/* Data cells — slightly tighter padding, almost-invisible row dividers
so the rhythm comes from typography, not chrome. */
.games-table td, .leaderboard-table td {
padding: 0.5rem 0.7rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.035);
vertical-align: middle;
letter-spacing: 0.005em;
}
.games-table td:first-child, .leaderboard-table td:first-child { padding-left: 0.95rem; }
.games-table td:last-child, .leaderboard-table td:last-child { padding-right: 0.95rem; }
.games-table tr:last-child td, .leaderboard-table tr:last-child td { border-bottom: 0; }
.games-table tbody tr, .leaderboard-table tbody tr {
transition: background 0.12s ease;
}
.games-table tbody tr:hover td,
.leaderboard-table tbody tr:hover td {
background: rgba(255, 255, 255, 0.025);
}
/* Date column — secondary information, muted, tabular */
.games-table tbody td:first-child {
color: var(--muted);
font-variant-numeric: tabular-nums;
font-size: 0.825rem;
}
.games-table tbody td:first-child .maptap-day-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
padding-bottom: 1px;
}
.games-table tbody td:first-child .maptap-day-link:hover,
.games-table tbody td:first-child .maptap-day-link:focus-visible {
color: var(--accent-2);
border-bottom-style: solid;
outline: none;
}
/* Score cells: when the player has a linked maptap.gg profile the score
number itself links to it. Same dotted affordance as the day links, but
keeps the score's own (non-muted) color until hover. */
.games-table tbody td .score-profile-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted var(--muted);
padding-bottom: 1px;
}
.games-table tbody td .score-profile-link:hover,
.games-table tbody td .score-profile-link:focus-visible {
color: var(--accent-2);
border-bottom: 1px solid currentColor;
outline: none;
}
/* History thead — a distinct, intentional legend row. Layered surface +
bottom border lift it off the data; small-caps letterspacing matches the
section labels elsewhere. Sticky within the table's own scroll so the
columns stay legible on long days. Scoped to #history-table so the
leaderboard header is untouched. */
#history-table thead th {
position: sticky;
top: 0;
z-index: 1;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.11em;
background:
linear-gradient(180deg, var(--surface-2), var(--surface));
border-bottom: 1px solid var(--border-strong);
box-shadow: inset 0 -1px 0 var(--border);
}
#history-table thead th:first-child {
border-top-left-radius: 12px;
}
#history-table thead th:last-child {
border-top-right-radius: 12px;
}
/* ---------- History day grouping ----------
The Full Game History is grouped by day so it reads date-by-date
instead of as a continuous rival-by-rival mix. Each day opens with a
full-width header row carrying the maptap.gg day link; member rows drop
their repeated date (first cell left empty as a quiet gutter). Stronger
top spacing/divider separates one day from the next. */
#history-table tbody tr.history-day-header td {
padding: 1.05rem 0.95rem 0.5rem;
border-bottom: 1px solid var(--border-strong);
background: linear-gradient(180deg,
rgba(99, 102, 241, 0.07), rgba(99, 102, 241, 0));
}
/* No big top gap before the very first day group on a page. */
#history-table tbody tr.history-day-header:first-child td {
padding-top: 0.55rem;
}
.history-day-head-inner {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
}
#history-table .history-day-link,
#history-table .history-day-label {
color: var(--text);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
text-decoration: none;
border-bottom: 1px dotted var(--border-strong);
padding-bottom: 1px;
}
#history-table .history-day-label { border-bottom: 0; }
#history-table .history-day-link:hover,
#history-table .history-day-link:focus-visible {
color: var(--accent-2);
border-bottom-color: var(--accent-2);
border-bottom-style: solid;
outline: none;
}
/* Member rows: the empty leading cell becomes a thin accent gutter so the
eye still tracks the day group down the left edge. */
#history-table tbody tr.history-day-row td.history-row-date {
width: 0;
padding: 0;
border-left: 2px solid var(--accent-soft);
}
/* Tighten the divider between rows inside a day; the day header carries
the strong divider so member rows stay airy and grouped. */
#history-table tbody tr.history-day-row td {
border-bottom-color: rgba(255, 255, 255, 0.025);
}
.rounds-cell { width: 0; }
.rounds-cell .round-dots { display: inline-flex; }
.row-note-cell {
width: 0;
white-space: nowrap;
text-align: center;
}
.row-note {
color: var(--muted);
font-size: 0.82rem;
}
.row-note-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
color: var(--muted-2);
cursor: help;
transition: background 0.12s ease, color 0.12s ease;
}
.row-note-pill:hover {
background: var(--surface-3);
color: var(--muted);
}
.row-note-pill svg { width: 11px; height: 11px; display: block; }
.row-action-cell {
width: 0;
text-align: right;
white-space: nowrap;
}
/* Result token — refined square pill with thin border ring. Reads as a
token, not a bubble. */
.result-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 0.4rem;
border-radius: 5px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
border: 1px solid transparent;
font-feature-settings: "tnum";
}
.result-badge.W {
background: rgba(74, 222, 128, 0.10);
color: var(--good);
border-color: rgba(74, 222, 128, 0.22);
}
.result-badge.L {
background: rgba(248, 113, 113, 0.10);
color: var(--bad);
border-color: rgba(248, 113, 113, 0.22);
}
.result-badge.T {
background: rgba(255, 255, 255, 0.04);
color: var(--tie);
border-color: var(--border);
}
/* Only one side played — no W/L semantics, render as a quiet token. */
.result-badge.NA {
background: rgba(255, 255, 255, 0.02);
color: var(--muted);
border-color: var(--border);
}
.row-one-sided {
opacity: 0.78;
}
.row-one-sided td:first-child {
font-style: italic;
}
.delta-pos { color: var(--good); font-variant-numeric: tabular-nums; font-weight: 600; }
.delta-neg { color: var(--bad); font-variant-numeric: tabular-nums; font-weight: 600; }
.delta-zero { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Leaderboard sortable column headers */
.lb-th-sortable {
cursor: pointer;
user-select: none;
}
.lb-th-sortable:hover {
color: var(--text);
}
.lb-th-sorted {
color: var(--accent-2);
}
.lb-th-sorted::after {
content: ' \25BC'; /* down triangle (descending) */
font-size: 0.55rem;
vertical-align: middle;
opacity: 0.7;
}
.lb-th-sorted[aria-sort="ascending"]::after {
content: ' \25B2'; /* up triangle (ascending) */
}
/* Rivalry score tooltip trigger */
.lb-th-hint {
font-size: 0.65rem;
color: var(--muted-2);
cursor: help;
border-bottom: 1px dotted currentColor;
}
/* Rivalry score data cells — tabular numerics, same weight as Win % */
.lb-rivalry-score {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Row action — compact icon button. Reads as clearly interactive at rest
(defined surface + border + legible stroke) and brightens on row
hover/focus. Used in Full Game History and rival Recent games. */
.icon-btn {
width: 24px;
height: 24px;
min-width: 36px;
min-height: 36px;
padding: 0;
border: 1px solid var(--border-strong);
background: var(--surface-2);
/* !important pins vs main.css gray/red button theme (color + inset ring
+ press tint); every color/box-shadow in this icon-btn family carries
one for the same reason. */
color: var(--muted) !important;
box-shadow: none !important;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: background 0.12s ease, color 0.12s ease,
border-color 0.12s ease, box-shadow 0.12s ease;
}
.icon-btn svg { width: 13px; height: 13px; display: block; }
.icon-btn:hover {
background: var(--surface-3);
border-color: var(--border-strong);
color: var(--text) !important;
box-shadow: none !important;
}
.icon-btn:hover:active { background-color: var(--surface-3); }
.icon-btn:focus-visible {
outline: none;
background: var(--surface-3);
color: var(--text) !important;
box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
/* Row hover lifts the action affordance a touch further. */
tr:hover .icon-btn,
tr:focus-within .icon-btn {
border-color: var(--border-strong);
color: var(--text) !important;
}
/* Danger keeps a persistent red tint so destructive intent reads at rest. */
.icon-btn-danger {
color: var(--bad) !important;
border-color: rgba(248, 113, 113, 0.28);
background: rgba(248, 113, 113, 0.07);
}
.icon-btn-danger:hover,
tr:hover .icon-btn-danger,
tr:focus-within .icon-btn-danger {
background: rgba(248, 113, 113, 0.16);
border-color: rgba(248, 113, 113, 0.45);
color: var(--bad) !important;
}
.icon-btn-danger:hover:active { background-color: rgba(248, 113, 113, 0.16); }
.icon-btn-danger:focus-visible {
background: rgba(248, 113, 113, 0.16);
box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.3) !important;
}
/* Share leans into the indigo accent. */
.icon-btn-share {
color: var(--accent-2) !important;
border-color: rgba(99, 102, 241, 0.28);
background: rgba(99, 102, 241, 0.07);
}
.icon-btn-share:hover,
tr:hover .icon-btn-share,
tr:focus-within .icon-btn-share {
background: rgba(99, 102, 241, 0.16);
border-color: rgba(99, 102, 241, 0.45);
color: var(--accent-2) !important;
}
.icon-btn-share:hover:active { background-color: rgba(99, 102, 241, 0.16); }
.icon-btn-share:focus-visible {
background: rgba(99, 102, 241, 0.16);
box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
/* Floating clipboard-confirmation pill — bottom center, doesn't affect layout. */
.share-toast {
position: fixed;
left: 50%;
bottom: 1.75rem;
transform: translateX(-50%);
padding: 0.5rem 1rem;
border-radius: 999px;
background: var(--surface-3);
border: 1px solid var(--border-strong);
color: var(--good);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
z-index: 9999;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
animation: share-toast-in 0.18s ease;
}
@keyframes share-toast-in {
from { opacity: 0; transform: translate(-50%, 6px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* Post-save share button in the paste actions bar */
.paste-share-btn {
height: 2.6rem;
font-size: 0.85rem;
gap: 0.35rem;
}
.paste-share-icon {
display: inline-flex;
align-items: center;
}
.paste-share-icon svg { width: 14px; height: 14px; }
.history-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.75rem;
}
/* ---------- Pagination ---------- */
/* ---------- Pagination footer ----------
Two cohesive bordered pills sit side-by-side on the right: a per-page
pill ("Per page [25 ▼]") and a pager pill ([‹ 1 / 2 ›]). Meta text
floats to the left of the pills as quiet status. The whole footer
reads as two intentional controls, not five floating fragments. */
.pagination {
--pg-h: 26px;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.3rem 0.4rem;
margin-top: 0.7rem;
padding: 0.45rem 0.1rem 0;
border-top: 1px solid var(--border);
}
.pagination[hidden] { display: none; }
.pagination-meta {
font-size: 0.755rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
white-space: nowrap;
line-height: 1;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
line-height: 0;
font-size: 0;
}
/* Per-page section — left half of the merged toolbar. Shares its right
border with the pager pill on the right (gap: 0), so the dropdown and
pager read as one continuous segmented control. */
.pagination-pagesize {
box-sizing: border-box;
display: inline-flex;
align-items: center;
height: var(--pg-h);
min-height: var(--pg-h);
max-height: var(--pg-h);
margin: 0;
padding: 0 0.25rem 0 0.55rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 5px;
gap: 0.4rem;
font-size: 0.755rem;
color: var(--muted);
font-weight: 400;
letter-spacing: 0.01em;
white-space: nowrap;
line-height: 1;
vertical-align: middle;
cursor: pointer;
flex-shrink: 0;
transition: border-color 0.15s ease, background 0.15s ease;
}
.pagination-pagesize:hover {
border-color: var(--border-strong);
background: var(--surface-3);
}
.pagination-pagesize:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.pagination-pagesize > span {
user-select: none;
color: var(--muted);
}
.pagination-pagesize select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0 0.75rem 0 0;
height: 100%;
color: var(--text);
font: inherit;
font-size: 0.755rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.015em;
line-height: 1;
cursor: pointer;
outline: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position:
calc(100% - 0.28rem) calc(50% - 1px),
calc(100% - 0.12rem) calc(50% - 1px);
background-size: 4px 4px;
background-repeat: no-repeat;
}
/* Pager section — right half of the merged toolbar. Its left border
visually serves as the hairline divider between the dropdown and the
pager trio. Chevron / indicator / chevron sit flush inside the shell. */
.pagination-pager {
box-sizing: border-box;
display: inline-flex;
align-items: center;
height: var(--pg-h);
min-height: var(--pg-h);
max-height: var(--pg-h);
margin: 0;
padding: 0 2px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 0 5px 5px 0;
gap: 0;
line-height: 1;
vertical-align: middle;
flex-shrink: 0;
transition: border-color 0.15s ease, background 0.15s ease;
}
.pagination-pager:hover {
border-color: var(--border-strong);
background: var(--surface-3);
}
.pagination-pager:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Chevron buttons inside the pager pill — text-style hover, no
independent background, so they don't pop out of the pill. */
.pagination-btn,
.pagination-btn:hover {
width: 20px;
height: 20px;
padding: 0;
background: transparent;
color: var(--muted-2) !important;
border: 0;
border-radius: 4px;
font: inherit;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none !important;
transition: color 0.15s ease, background 0.15s ease;
}
.pagination-btn:hover {
background: transparent !important;
color: var(--text) !important;
}
.pagination-btn:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
.pagination-btn:disabled {
opacity: 0.2;
pointer-events: none;
color: var(--muted-2) !important;
}
.pagination-btn svg {
width: 10px;
height: 10px;
display: block;
}
/* Slightly heavier stroke to keep the chevrons crisp at 10px. */
.pagination-btn svg polyline { stroke-width: 2.15; }
/* Optical centering: the tip of `<` / `>` is the visual anchor, so nudge
each chevron ~0.5px toward its tip to balance the open-side mass. */
.pagination-btn[aria-label*="Previous"] svg { transform: translateX(-0.5px); }
.pagination-btn[aria-label*="Next"] svg { transform: translateX(0.5px); }
/* Page indicator — quiet tabular text between the two chevrons */
.pagination-current {
font-size: 0.755rem;
color: var(--text);
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0.03em;
white-space: nowrap;
padding: 0 0.15rem;
min-width: 1.25rem;
text-align: center;
line-height: 1;
}
/* Numbered pager (ported from rising-shows): Prev, page numbers with
ellipsis gaps, Next. Adapted to maptap's dark tokens. The accent-tinted
current page replaces rising-shows' amber. Hover is pinned on .page-btn
to defeat the sitewide red button:hover. The parent .pagination-controls
zeroes font-size/line-height for its segmented pill, so reset both here. */
.pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.25rem;
font-size: 0.82rem;
line-height: 1;
}
.pager[hidden] { display: none; }
.pager .page-btn,
.pager .page-btn:hover {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 28px;
padding: 0 0.5rem;
background: transparent;
color: var(--muted) !important;
border: 1px solid transparent;
border-radius: 6px;
font: inherit;
font-size: 0.8rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
cursor: pointer;
box-shadow: none !important;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pager .page-btn:hover {
background: var(--surface-2) !important;
border-color: var(--border-strong);
color: var(--text) !important;
}
.pager .page-btn:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.pager .page-btn[aria-current="page"],
.pager .page-btn[aria-current="page"]:hover {
background: var(--accent-soft) !important;
color: var(--accent-2) !important;
border-color: var(--accent-strong);
font-weight: 700;
}
.pager .page-btn:disabled,
.pager .page-btn[aria-disabled="true"] {
opacity: 0.3;
cursor: not-allowed;
color: var(--muted) !important;
background: transparent !important;
border-color: transparent;
}
.pager .page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 28px;
color: var(--muted-2);
user-select: none;
font-size: 0.8rem;
}
@media (max-width: 540px) {
.pagination {
justify-content: center;
gap: 0.4rem;
}
.pagination-meta {
width: 100%;
text-align: center;
order: -1;
}
.pagination-controls { gap: 0.3rem; }
.pager .page-ellipsis { display: none; }
}
.history-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Premium filter pills — custom chevron, layered surface, lit accent ring on
focus. The trailing-chevron SVG is inlined so the control needs no markup
change and no extra request. */
.history-filters select {
-webkit-appearance: none;
appearance: none;
height: var(--ctrl-h);
padding: 0 2rem 0 0.85rem;
border: 1px solid var(--border-strong);
border-radius: 999px;
background-color: var(--surface-2);
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center, right 0.7rem center;
color: var(--text);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: border-color 0.12s ease, background-color 0.12s ease,
box-shadow 0.12s ease;
}
.history-filters select:hover {
border-color: var(--accent-strong);
background-color: var(--surface-3);
}
.history-filters select:focus,
.history-filters select:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Native