/* =====================================================================
Sales Bingo — Industry design system
White ground, navy-steel accent, Barlow Condensed over Barlow, a modular
grid, square corners, hairline dividers. No gradients, no rounded corners,
no emoji used as UI.
Class names are unchanged from the previous stylesheet on purpose: every
one of them is written from js/app.js or js/admin.js, and the redesign is
a restyle, not a rewrite of the application.
===================================================================== */
/* The fonts are loaded with +
in each page's , not with @import here. An @import inside a
render-blocking stylesheet is not discovered until this file has downloaded
and parsed, which serialises two round trips onto the critical path and
pushes out Largest Contentful Paint. */
:root {
/* --- Ground and ink ------------------------------------------------ */
--color-bg: #ffffff;
--color-surface: #ffffff;
--color-text: #1d1f20;
--color-divider: #d8dce1;
--color-neutral-100: #f7f8f9;
--color-neutral-200: #eceef1;
--color-neutral-300: #d4d4d7;
--color-neutral-400: #b7b7ba;
--color-neutral-500: #98989b;
--color-neutral-600: #7a7a7d;
--color-neutral-700: #5d5d60;
--color-neutral-900: #2b2b2d;
--color-accent: #2c455d;
--color-accent-100: #eef2f7;
--color-accent-200: #d7e0ea;
--color-accent-300: #b5d9fd;
--color-accent-400: #94bce3;
--color-accent-600: #597ea3;
--color-accent-700: #416180;
--color-accent-800: #2c455d;
--color-accent-900: #1d2d3d;
/* Semantic aliases the components below actually use. */
--bg: var(--color-bg);
--bg-tint: var(--color-neutral-100);
--surface: var(--color-surface);
--surface-2: var(--color-neutral-100);
--ink: var(--color-text);
--ink-2: var(--color-neutral-700);
/* The token sheet suggests neutral-600 for small labels, but on white that
is 4.3:1 — under the 4.5:1 floor for normal text, and `.muted` is used on
real content all over the app, not just decoration. One step darker. */
--muted: var(--color-neutral-700);
--line: var(--color-divider);
--line-2: var(--color-divider);
--brand: var(--color-accent);
--brand-ink: var(--color-accent-700);
--on-brand: #ffffff;
--field: var(--color-accent-900); /* the dark panel */
--amber: #8a5a00;
--amber-bg: var(--color-accent-100);
--green: #2f6b4f;
--green-bg: #eef4f1;
--red: #8c3a3a;
--red-bg: #f7efef;
/* --- Type ---------------------------------------------------------- */
--font-heading: "Barlow Condensed", system-ui, -apple-system, sans-serif;
--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
--font: var(--font-body);
/* --- Space: a 0.85x density scale ---------------------------------- */
--space-1: 3.4px;
--space-2: 6.8px;
--space-3: 10.2px;
--space-4: 13.6px;
--space-6: 20.4px;
--space-8: 27.2px;
/* Square corners are the system. These stay for anything genuinely
circular (avatars, the VS badge) and nothing else. */
--r-sm: 0;
--r: 0;
--r-lg: 0;
--shadow-1: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
--shadow-2: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
--shadow-3: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-underline-offset: 3px; }
h1, h2, h3, h4, h5 {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.015em;
}
h1 { font-size: 38px; }
h2 { font-size: 32px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }
p { margin: 0 0 var(--space-3); color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.center { text-align: center; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--space-6); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--space-6); }
/* Small uppercase label — the system's workhorse. */
.eyebrow {
font-family: var(--font-heading);
font-size: 11px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--color-accent-700);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }
/* --- Buttons -------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
font-family: var(--font-heading); font-weight: 600;
font-size: 14px; line-height: 1.2; letter-spacing: .02em;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-divider); background: transparent; color: var(--ink);
border-radius: 0; cursor: pointer; text-decoration: none;
white-space: nowrap; flex: none;
transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.btn:active { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary {
background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-900); border-color: var(--color-accent-900); }
.btn-ghost { border-color: transparent; color: var(--color-accent-700); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.btn-sm { padding: 5px var(--space-3); font-size: 12px; }
.btn-lg { padding: 12px var(--space-6); font-size: 15px; }
.btn-block { width: 100%; }
.btn-ok { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.btn-ok:hover { background: var(--color-accent-700); }
.btn-no { color: var(--ink); border-color: var(--color-divider); background: transparent; }
.btn-no:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
/* --- Cards / panels ------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--color-divider);
border-radius: 0;
}
.card-pad { padding: var(--space-6); }
.card-hd { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider); }
/* --- Form controls -------------------------------------------------- */
label.field { display: block; margin-bottom: var(--space-4); }
label.field > span {
display: block; font-size: 12px; font-weight: 500;
color: var(--color-neutral-700); margin-bottom: 5px;
}
/* Match by exclusion, not by listing types: an with no type attribute
is still a text box, and input[type="text"] does not match it. Every control
the app builds in JavaScript relies on this. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select, textarea {
width: 100%; min-height: 36px;
font-family: var(--font-body); font-size: 14px; color: var(--ink);
padding: 6px var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: 0;
caret-color: var(--color-accent);
transition: border-color .14s;
}
input:hover, select:hover, textarea:hover { border-color: var(--color-neutral-400); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
border-color: var(--color-accent); outline-offset: 0;
}
input::placeholder, textarea::placeholder { color: var(--color-neutral-500); }
textarea { resize: vertical; min-height: 90px; }
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a7a7d' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right var(--space-3) center;
padding-right: 32px;
}
.checkline { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-2); }
.checkline input { width: auto; min-height: 0; accent-color: var(--color-accent); }
/* --- Tags, pills, flags --------------------------------------------- */
.pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px var(--space-3); border-radius: 0;
font-family: var(--font-heading); font-size: 11px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
background: var(--color-accent-100); color: var(--color-accent-800);
}
.pill-amber { background: var(--color-accent-100); color: var(--color-accent-800); }
.pill-green { background: var(--color-accent); color: #fff; }
.pill-red { border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); }
.pill-grad { background: var(--color-accent); color: #fff; }
.flag {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 22px; padding: 0 6px;
border: 1px solid var(--color-divider); background: var(--color-neutral-100);
color: var(--color-accent-700);
font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: .06em;
}
/* --- Segmented control (was .chips) --------------------------------- */
.chips { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-divider); }
.chip {
padding: 7px var(--space-4); border: none; background: transparent; color: var(--ink-2);
font-family: var(--font-heading); font-size: 13px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
cursor: pointer; border-radius: 0;
transition: background .14s, color .14s;
}
.chip + .chip { border-left: 1px solid var(--color-divider); }
.chip:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.chip.on { background: var(--color-accent); color: #fff; }
/* --- App shell ------------------------------------------------------ */
.topbar {
position: sticky; top: 0; z-index: 40;
background: var(--color-bg);
border-bottom: 1px solid var(--color-divider);
}
.topbar-in { display: flex; align-items: center; gap: var(--space-6); min-height: 56px; }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.brand-mark { width: 30px; height: 30px; flex: none; background: #fff; object-fit: contain; }
.brand-name {
font-family: var(--font-heading); font-weight: 600; font-size: 17px;
letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
}
.brand-sub {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--color-neutral-600);
}
/* One bordered box, options divided by hairlines, active one a solid fill. */
.tabs { display: flex; border: 1px solid var(--color-divider); }
.tab {
position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
padding: 8px var(--space-4); border: none; background: transparent;
font-family: var(--font-heading); font-size: 13px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
cursor: pointer; border-radius: 0;
transition: background .14s, color .14s;
}
.tab + .tab { border-left: 1px solid var(--color-divider); }
.tab:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.tab.on { background: var(--color-accent); color: #fff; }
.tab svg { display: block; width: 15px; height: 15px; }
/* Part of the flex row, not floated over it: absolutely positioning this at
the tab's top-right printed the count on top of the label's last letter. */
.tab-badge {
min-width: 16px; height: 16px; margin-left: 2px;
background: var(--color-accent-700); color: #fff;
font-family: var(--font-body); font-size: 10px; font-weight: 600;
display: grid; place-items: center; padding: 0 4px; flex: none;
}
.tab.on .tab-badge { background: #fff; color: var(--color-accent); }
/* The icon rides along on every size; only the label text swaps. */
.tab-icon { display: block; flex: none; }
.tab-brief { display: none; }
.userpill {
display: flex; align-items: center; gap: var(--space-3);
padding: 4px 4px 4px var(--space-3);
border: 1px solid var(--color-divider); background: transparent;
cursor: pointer; font: inherit; border-radius: 0;
}
.userpill:hover { background: var(--color-neutral-100); }
.userpill-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.userpill-sub { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.userpill-pts {
background: var(--color-accent); color: #fff;
font-family: var(--font-heading); font-weight: 600; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase;
padding: 5px var(--space-3);
}
main { padding: var(--space-6) 0 var(--space-8); }
/* --- Season strip: four cells over a divider grid ------------------- */
.season-strip {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--color-divider); border: 1px solid var(--color-divider);
margin-bottom: var(--space-6);
}
.season-strip .seg { background: var(--color-bg); padding: var(--space-4) var(--space-6); }
.season-strip b {
display: block; font-family: var(--font-heading); font-weight: 600;
font-size: 26px; line-height: 1.05; letter-spacing: -0.01em;
}
.season-strip .seg span {
display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
color: var(--color-neutral-600); margin-top: var(--space-1);
}
.season-strip .urgent b { color: var(--color-accent-700); }
/* --- Missions ------------------------------------------------------- */
.missions {
display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
gap: var(--space-6); margin-bottom: var(--space-6); align-items: start;
}
.missions-side { display: flex; flex-direction: column; gap: var(--space-3); }
.mission {
position: relative; padding: var(--space-6);
border: 1px solid var(--color-divider); background: var(--color-bg);
}
.mission.live { background: var(--color-accent-100); border-color: var(--color-accent-200); }
.mission h3 { margin: var(--space-2) 0; font-size: 24px; }
.mission p { font-size: 14px; margin: 0; max-width: 62ch; color: var(--color-neutral-700); }
.mission.live p { color: var(--color-accent-900); }
.mission-x {
position: absolute; top: var(--space-6); right: var(--space-6);
border: 1px solid var(--color-accent); color: var(--color-accent);
font-family: var(--font-heading); font-weight: 600; font-size: 12px;
letter-spacing: .06em; padding: 2px var(--space-3);
}
.mission-cta {
margin-top: var(--space-4); padding: 0;
font-family: var(--font-heading); font-size: 14px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
background: none; border: none; cursor: pointer;
}
.mission-cta:hover { text-decoration: underline; }
.mission-mini {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border: 1px solid var(--color-divider); background: var(--color-neutral-100);
}
.mission-mini .lock { color: var(--color-neutral-500); flex: none; display: flex; }
.mission-mini b { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 600; }
.mission-mini span {
font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* --- Play layout ---------------------------------------------------- */
.play { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.legend { display: flex; gap: var(--space-4); font-size: 11px; letter-spacing: .06em;
text-transform: uppercase; color: var(--color-neutral-600); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.dot { width: 9px; height: 9px; display: inline-block; }
.dot-done { background: var(--color-accent); }
.dot-wait { background: var(--color-accent-200); }
.dot-open { border: 1px solid var(--color-neutral-400); }
/* The 5x5 card: hairline grid, no radius, no per-cell border. */
.grid25 {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
background: var(--color-divider);
border-top: 1px solid var(--color-divider);
}
.sq {
position: relative; display: flex; flex-direction: column;
min-height: 132px; padding: var(--space-3); text-align: left;
border: none; border-radius: 0; background: var(--color-bg); color: var(--ink);
font: inherit; cursor: pointer; overflow: hidden;
transition: background .14s;
}
.sq:hover { background: var(--color-neutral-100); }
.sq:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sq-tag {
font-family: var(--font-heading); font-size: 10px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500);
padding-right: 24px;
}
.sq-label { margin-top: auto; font-size: 13px; line-height: 1.3; }
.sq-mark {
position: absolute; top: var(--space-3); right: var(--space-3);
font-size: 13px; font-weight: 600; color: var(--color-neutral-500);
line-height: 1;
}
.sq.done { background: var(--color-accent); color: #fff; }
.sq.done:hover { background: var(--color-accent-700); }
.sq.done .sq-tag { color: var(--color-accent-200); }
.sq.done .sq-mark { color: #fff; }
.sq.wait { background: var(--color-accent-100); }
.sq.wait .sq-tag { color: var(--color-accent-700); }
.sq.open .sq-mark { opacity: 0; transition: opacity .14s; }
.sq.open:hover .sq-mark, .sq.open:focus-visible .sq-mark { opacity: 1; }
.sq.keystone::before {
content: "♛"; position: absolute; top: var(--space-3); right: 28px;
font-size: 12px; color: var(--color-accent-700);
}
.sq.done.keystone::before { color: var(--color-accent-200); }
@keyframes ping {
0%, 100% { box-shadow: inset 0 0 0 0 var(--color-accent); }
30% { box-shadow: inset 0 0 0 3px var(--color-accent); }
}
.sq.ping { animation: ping 1s ease-out 2; }
/* --- Score sidebar -------------------------------------------------- */
.score-big {
font-family: var(--font-heading); font-size: 56px; font-weight: 600;
line-height: 1; letter-spacing: -0.02em; color: var(--color-accent);
}
.bar { height: 6px; background: var(--color-neutral-200); overflow: hidden; margin: var(--space-4) 0 var(--space-2); }
.bar > i { display: block; height: 100%; background: var(--color-accent); transition: width .4s; }
.stat-3 {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--color-divider); border: 1px solid var(--color-divider);
margin-top: var(--space-4);
}
.stat { padding: var(--space-3); background: var(--color-bg); text-align: center; }
.stat b {
display: block; font-family: var(--font-heading); font-weight: 600;
font-size: 24px; line-height: 1.05;
}
.stat span {
font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600);
}
/* The strongest nudge on the page: a solid accent block. */
.nextmove {
display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
padding: var(--space-6); border: none; border-radius: 0;
background: var(--color-accent); color: #fff;
transition: background .14s;
}
.nextmove:hover { background: var(--color-accent-700); }
.nextmove .eyebrow { color: var(--color-accent-300); }
.nextmove strong {
display: block; margin: var(--space-2) 0 var(--space-1);
font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.15;
}
.nextmove em { font-style: normal; font-size: 12px; color: var(--color-accent-200); }
.h2h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); text-align: center; }
.h2h-vs {
width: 34px; height: 34px; border: 1px solid var(--color-divider);
display: grid; place-items: center;
font-family: var(--font-heading); font-size: 11px; font-weight: 600;
letter-spacing: .1em; color: var(--color-neutral-600);
}
.h2h-score { font-family: var(--font-heading); font-size: 32px; font-weight: 600; line-height: 1.05; }
.h2h-you { color: var(--color-accent); }
.note {
padding: var(--space-3) 0 0; margin-top: var(--space-3);
border-top: 1px solid var(--color-divider);
font-size: 13px; color: var(--color-neutral-700);
}
/* Rules panel, collapsed by default. */
.how { padding: 0; }
.how > summary {
list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6);
display: flex; align-items: center; justify-content: space-between;
}
.how > summary::-webkit-details-marker { display: none; }
.how > summary::after { content: "+"; color: var(--color-accent); font-size: 16px; }
.how[open] > summary::after { content: "−"; }
.how > summary:hover { background: var(--color-neutral-100); }
.how ul { padding: 0 var(--space-6) var(--space-6) calc(var(--space-6) + 18px); margin: 0; }
.how li { margin-bottom: var(--space-2); font-size: 13px; color: var(--color-neutral-700); }
.how b { color: var(--ink); }
/* --- Floor summary, above the board --------------------------------- */
.insights {
border: 1px solid var(--color-divider);
padding: var(--space-6); margin: var(--space-6) 0;
display: flex; flex-direction: column; gap: var(--space-6);
}
.insights-line {
margin: 0; font-family: var(--font-heading); font-weight: 600;
font-size: 21px; line-height: 1.25; color: var(--ink); max-width: 70ch;
}
.stat-strip {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
background: var(--color-divider); border: 1px solid var(--color-divider);
}
.stat-strip .stat { text-align: left; padding: var(--space-3) var(--space-4); }
.stat-strip .stat.warn b { color: var(--color-accent-700); }
.insight-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--color-divider); border: 1px solid var(--color-divider); }
.insight-sq { background: var(--color-bg); padding: var(--space-4) var(--space-6); }
.insight-sq.hot { background: var(--color-accent); color: #fff; }
.insight-sq.hot .eyebrow { color: var(--color-accent-300); }
.insight-sq.cold { background: var(--color-accent-100); }
.insight-sq strong {
display: block; margin: var(--space-2) 0 var(--space-1);
font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.2;
}
.insight-sq em { font-style: normal; font-size: 12px; }
.insight-sq.hot em { color: var(--color-accent-200); }
.insight-sq.cold em { color: var(--color-neutral-700); }
@media (max-width: 720px) {
.insights { padding: var(--space-4); gap: var(--space-4); }
.insights-line { font-size: 17px; }
.insight-pair { grid-template-columns: 1fr; }
}
/* --- Leaderboards --------------------------------------------------- */
.podium {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--color-divider); border: 1px solid var(--color-divider);
margin: var(--space-6) 0;
}
.pod { padding: var(--space-6); background: var(--color-bg); }
.pod.first { background: var(--field); color: #fff; }
.pod-rank {
font-family: var(--font-heading); font-size: 11px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700);
}
.pod.first .pod-rank { color: var(--color-accent-300); }
.pod-name { font-family: var(--font-heading); font-size: 26px; font-weight: 600; margin-top: var(--space-2); }
.pod-pts { font-family: var(--font-heading); font-size: 48px; font-weight: 600; line-height: 1; color: var(--color-accent); }
.pod.first .pod-pts { color: var(--color-accent-300); }
.pod .flag { margin-bottom: var(--space-3); }
.pod.first .flag { background: transparent; border-color: var(--color-accent-600); color: var(--color-accent-300); }
.lb-row {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.lb-row:first-child { border-top: 1px solid var(--color-divider); }
.lb-row.me { background: var(--color-accent-100); }
.lb-rank { width: 28px; font-family: var(--font-heading); font-weight: 600;
color: var(--color-neutral-600); text-align: center; }
.lb-name { font-weight: 600; }
.lb-sub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lb-pts { margin-left: auto; text-align: right; }
.lb-pts b { font-family: var(--font-heading); font-size: 21px; font-weight: 600; }
.pips { display: flex; gap: 2px; margin-top: 5px; }
.pip { width: 14px; height: 6px; background: var(--color-neutral-300); }
.pip.on { background: var(--color-accent); }
/* --- Tables --------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
text-align: left; padding: var(--space-2) var(--space-3);
font-family: var(--font-heading); font-size: 11px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600);
background: var(--color-neutral-200); border-bottom: 1px solid var(--color-divider);
position: sticky; top: 0;
}
table.data td {
padding: var(--space-3);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
table.data .num { font-variant-numeric: tabular-nums; }
/* --- Feed ----------------------------------------------------------- */
.feed-item {
display: flex; gap: var(--space-4); padding: var(--space-3) 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.feed-item:last-child { border-bottom: none; }
.avatar {
width: 32px; height: 32px; flex: none;
display: grid; place-items: center;
border: 1px solid var(--color-divider); background: var(--color-bg);
font-family: var(--font-heading); font-size: 12px; font-weight: 600;
color: var(--color-accent-700);
}
/* --- Admin square editor -------------------------------------------- */
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.season-form { display: grid; grid-template-columns: 2fr 1fr 1fr 90px 90px auto;
gap: var(--space-3); align-items: end; margin-top: var(--space-6); }
.mission-form{ display: grid; grid-template-columns: 150px 110px 1fr; gap: var(--space-3); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--color-divider); border: 1px solid var(--color-divider); }
.sq-edit {
border: 1px solid var(--color-divider); background: var(--color-bg);
padding: var(--space-4); margin-bottom: var(--space-3);
}
.sq-edit-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sq-num {
width: 26px; height: 26px; flex: none;
border: 1px solid var(--color-divider); background: var(--color-neutral-100);
color: var(--color-accent-700);
font-family: var(--font-heading); font-size: 12px; font-weight: 600;
display: grid; place-items: center;
}
.sq-edit-grid { display: grid; grid-template-columns: 170px 150px 1fr; gap: var(--space-3); }
.disclose {
margin-top: var(--space-3); padding: 0;
font-family: var(--font-heading); font-size: 12px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent);
background: none; border: none; cursor: pointer;
}
.disclose:hover { text-decoration: underline; }
/* --- Modal ---------------------------------------------------------- */
.modal-bg {
position: fixed; inset: 0; z-index: 100;
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
display: grid; place-items: center; padding: var(--space-6);
}
.modal {
width: 100%; max-width: 460px; background: var(--color-bg);
border: 1px solid var(--color-divider); box-shadow: var(--shadow-3);
max-height: 90vh; overflow: auto;
}
.modal-hd { padding: var(--space-6) var(--space-6) 0; }
.modal-bd { padding: var(--space-4) var(--space-6); }
.modal-ft { padding: 0 var(--space-6) var(--space-6); display: flex; gap: var(--space-2); justify-content: flex-end; }
/* --- Toast ---------------------------------------------------------- */
#toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 200;
display: flex; flex-direction: column; gap: var(--space-3); }
.toast {
padding: var(--space-3) var(--space-6); background: var(--field); color: #fff;
font-size: 14px; box-shadow: var(--shadow-2); max-width: 360px;
animation: rise .18s ease-out;
}
.toast.ok { background: var(--color-accent); }
.toast.err { background: #7a2f2f; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* --- Empty / loading ------------------------------------------------ */
.empty { padding: var(--space-8) var(--space-6); text-align: center; color: var(--muted); }
.empty-icon { display: flex; justify-content: center; margin-bottom: var(--space-3); color: var(--color-neutral-400); }
.skeleton {
background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
background-size: 200% 100%; animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
/* =====================================================================
Responsive
===================================================================== */
@media (max-width: 1000px) {
.play { grid-template-columns: 1fr; }
.missions { grid-template-columns: 1fr; }
.missions-side { flex-direction: row; }
.missions-side > * { flex: 1; }
.sq-edit-grid { grid-template-columns: 1fr; }
.season-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.form-2, .season-form, .mission-form, .plan-grid { grid-template-columns: 1fr; }
.season-form { align-items: stretch; }
.podium { grid-template-columns: 1fr; }
}
/* --- Phone ----------------------------------------------------------
The nav becomes a fixed bottom bar. The card stays five wide: a bingo
card that is not a square grid cannot show you a line, and the line is
the game. */
@media (max-width: 720px) {
.wrap, .wrap-narrow { padding: 0 var(--space-4); }
h1 { font-size: 30px; }
h2 { font-size: 25px; }
/* backdrop-filter or transform here would make the header a containing
block for its position:fixed descendants and pin the bottom bar to it. */
.topbar { background: var(--color-bg); }
.topbar-in { min-height: 52px; gap: var(--space-3); }
.brand-sub { display: none; }
.brand { flex: none; }
.brand-name { font-size: 15px; white-space: nowrap; }
.userpill { padding: 3px 3px 3px var(--space-2); gap: var(--space-2); min-width: 0; }
.userpill-name { max-width: 82px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; display: block; }
.userpill-sub { display: none; }
.userpill-pts { white-space: nowrap; padding: 4px var(--space-2); font-size: 11px; }
.tabs {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; border: none; border-top: 1px solid var(--color-divider);
background: var(--color-bg);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
padding: var(--space-2) var(--space-1); min-height: 50px;
font-size: 10px; letter-spacing: .04em;
}
.tab + .tab { border-left: 1px solid var(--color-divider); }
.tab-brief { display: block; }
.tab-long { display: none; }
.tab svg { width: 18px; height: 18px; margin: 0 auto; }
/* On the bottom bar there is no room beside the label, so it rides the icon. */
.tab-badge { position: absolute; top: 3px; right: 50%; margin: 0 -18px 0 0; }
main { padding-bottom: 84px; }
.grid25 { grid-template-columns: repeat(5, 1fr); }
.sq { min-height: 0; aspect-ratio: 1; padding: var(--space-2);
justify-content: center; align-items: center; text-align: center; }
.sq:hover { background: var(--color-bg); }
.sq.done:hover { background: var(--color-accent); }
.sq-label { display: none; }
.sq-tag { font-size: 9px; letter-spacing: .02em; line-height: 1.15; padding: 0;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
.sq-mark { position: static; margin-top: 2px; font-size: 12px; }
.sq.open .sq-mark { opacity: .45; }
.sq.keystone::before { top: 2px; right: 3px; font-size: 10px; }
/* Everything you tap is at least a fingertip — including the bare