/*
* This is a manifest file that'll be compiled into application.css.
*
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
* depending on specificity.
*
* Consider organizing styles into separate files for maintainability.
*/
:root {
--bg: #0a0a0a;
--fg: #d0d0d0;
--accent: #e87722;
--muted: #777;
--border: #222;
--surface: #111;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;
font-size: 13px;
line-height: 1.5;
background: var(--bg);
color: var(--fg);
padding: 0.5rem 1.25rem 1rem;
overflow-x: clip;
}
main.page-main { margin-top: 1rem; }
body.season-page main.page-main { margin-top: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header h1, header h1.nav-title { font-size: 1.4rem; margin: 0; display: inline-flex; align-items: baseline; gap: 0; line-height: 1; }
header h1 a, header h1 a:hover, header h1 a:visited { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0; }
header .title-retro { color: var(--accent); letter-spacing: -0.03em; margin-right: 0.3rem; }
header .title-compact {
display: none;
color: var(--bg);
background-color: var(--accent);
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20188%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%22184%22%20height%3D%2296%22%2F%3E%3Cline%20x1%3D%2294%22%20y1%3D%222%22%20x2%3D%2294%22%20y2%3D%2298%22%2F%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%2250%22%20r%3D%2212%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2232%22%20width%3D%2236%22%20height%3D%2236%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2250%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%208%20L26%208%20A47%2047%200%200%201%2026%2092%20L2%2092%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2232%22%20width%3D%2236%22%20height%3D%2236%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2250%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M186%208%20L162%208%20A47%2047%200%200%200%20162%2092%20L186%2092%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0.05rem 0.4rem;
letter-spacing: -0.03em;
border-radius: 3px;
}
header .title-live {
color: var(--bg);
background-color: var(--accent);
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20188%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%22184%22%20height%3D%2296%22%2F%3E%3Cline%20x1%3D%2294%22%20y1%3D%222%22%20x2%3D%2294%22%20y2%3D%2298%22%2F%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%2250%22%20r%3D%2212%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2232%22%20width%3D%2236%22%20height%3D%2236%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2250%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%208%20L26%208%20A47%2047%200%200%201%2026%2092%20L2%2092%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2232%22%20width%3D%2236%22%20height%3D%2236%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2250%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M186%208%20L162%208%20A47%2047%200%200%200%20162%2092%20L186%2092%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0.05rem 0.4rem;
letter-spacing: -0.03em;
margin-right: 0.5rem;
border-radius: 3px;
}
header .title-year { color: var(--fg); letter-spacing: -0.03em; }
header nav.nav-main { margin: 0 -1.25rem 0.5rem; padding: 0 1.25rem 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; border-bottom: 1px solid #333; }
header nav.nav-main h1.nav-title { margin-right: 0.6rem; }
header nav.nav-main a.nav-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--accent);
text-decoration: none;
padding: 0.25rem 0.65rem;
border-radius: 999px;
line-height: 1.4;
}
header nav.nav-main a.nav-link:hover { background: rgba(232, 119, 34, 0.1); text-decoration: none; }
header nav.nav-main a.nav-link.active { background: var(--accent); color: var(--bg); }
header nav.nav-main a.nav-link.active:hover { background: var(--accent); }
header nav.nav-main a.nav-link i { font-size: 0.95em; }
header nav.nav-main form { display: inline; margin: 0; }
header nav.nav-main button {
font-family: inherit;
font-size: inherit;
background: none;
border: none;
color: var(--accent);
cursor: pointer;
padding: 0;
}
header nav.nav-main button:hover { text-decoration: underline; color: var(--accent); }
header nav.nav-main .nav-auth { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 0.8rem; border-left: 1px solid #333; }
header nav.nav-main a.nav-user-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7em;
height: 1.7em;
padding: 0;
border: none;
border-radius: 999px;
overflow: hidden;
font-size: 0.85rem;
text-decoration: none;
}
header nav.nav-main a.nav-user-chip .user-avatar--xs {
width: 100%;
height: 100%;
margin: 0;
border: none;
}
header nav.nav-main a.nav-user-chip.active {
box-shadow: 0 0 0 2px var(--accent);
}
header nav.nav-main a.nav-user-chip:hover {
box-shadow: 0 0 0 2px rgba(232, 119, 34, 0.45);
}
header nav.nav-main a.nav-user-chip.active:hover {
box-shadow: 0 0 0 2px var(--accent);
}
header nav.nav-main a.nav-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.7em;
border: 1px solid var(--accent);
border-radius: 999px;
padding: 0.05rem 0.3rem;
color: var(--accent);
text-decoration: none;
font-size: 0.85rem;
}
header nav.nav-main a.nav-bell:hover { background: rgba(232, 119, 34, 0.1); color: var(--fg); }
header nav.nav-main a.nav-bell.has-unread { background: var(--accent); color: var(--bg); }
header nav.nav-main a.nav-bell.has-unread:hover { background: var(--accent); }
header nav.nav-main a.nav-bell.active { background: var(--accent); color: var(--bg); }
header nav.nav-main a.nav-bell.active:hover { background: var(--accent); }
header nav.nav-main .nav-bell-badge {
position: absolute;
top: -0.4rem;
right: -0.55rem;
background: var(--danger, #c0392b);
color: var(--bg);
border-radius: 999px;
font-size: 0.65rem;
line-height: 1;
padding: 0.15rem 0.35rem;
min-width: 1rem;
text-align: center;
font-weight: bold;
}
.notifications-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.notifications-header h2 { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.notifications-header .notifications-clear-form { margin-left: auto; }
ul.notifications-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.notifications-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid var(--border);
}
.notifications-item--unread { background: rgba(232, 119, 34, 0.05); }
.notifications-list .notifications-item:last-child { border-bottom: 0; }
.notifications-list li::before { content: none; }
.notifications-item__body { flex: 1; min-width: 0; }
.notifications-item__sentence { line-height: 1.35; }
.notifications-item__meta { margin-top: 0.1rem; font-size: 0.8rem; }
.notifications-item__dismiss { padding: 0.15rem 0.6rem; line-height: 1.2; }
.notifications-clear-form { display: inline; margin: 0; }
header nav.nav-sub { margin: 0 -1.25rem 0.75rem; padding: 0 1.25rem 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--border); }
header nav.nav-sub a.nav-sub-link,
header nav.nav-sub button.nav-sub-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--accent);
text-decoration: none;
padding: 0.2rem 0.55rem;
border-radius: 999px;
line-height: 1.3;
font-size: 0.95em;
}
header nav.nav-sub a.nav-sub-link:hover,
header nav.nav-sub button.nav-sub-link:hover { background: rgba(232, 119, 34, 0.08); text-decoration: none; }
header nav.nav-sub a.nav-sub-link.active { color: var(--fg); border-bottom: 2px solid var(--accent); border-radius: 0; padding-bottom: 0.05rem; }
header nav.nav-sub .nav-sub-form { display: inline; margin: 0; }
header nav.nav-sub .nav-sub-button { background: none; border: 0; margin: 0; font: inherit; cursor: pointer; }
nav.nav-sim { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.25rem; column-gap: 1rem; margin-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
nav.nav-sim.nav-sim--flush { border-bottom: 0; padding-bottom: 0; }
nav.nav-sim.nav-sim--months { border-bottom: none; padding-bottom: 0; }
nav.nav-sim a { color: var(--accent); white-space: nowrap; }
nav.nav-sim a:hover { text-decoration: none; color: var(--fg); }
nav.nav-sim a.active { color: var(--fg); }
h2 { color: var(--accent); font-size: 1rem; margin: 0 0 0.25rem; }
/* Standard page-section heading: icon + label, used on Skills, Trade Machine,
Wire, etc. so every cross-phase landing has the same color/size/spacing. */
.page-section-header {
color: var(--accent);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.6rem;
}
h3 { font-size: 0.9rem; margin: 0 0 0.5rem; }
h4 { font-size: 0.85rem; margin: 0 0 0.25rem; color: var(--accent); }
h5 { font-size: 0.8rem; margin: 0.5rem 0 0.25rem; color: var(--muted); }
ul { list-style: none; margin-bottom: 0.5rem; }
li::before { content: "› "; color: var(--muted); }
table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
th, td { padding: 0.4rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: normal; font-size: 0.75rem; text-transform: uppercase; }
th a { color: var(--muted); }
th a:hover { color: var(--accent); }
th.num, td.num { text-align: center; }
td { font-size: 0.8rem; }
tr:hover td { background: #1a1a1a; }
form { margin: 0.75rem 0 1rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
form.form-vertical { flex-direction: column; align-items: stretch; max-width: 36rem; }
form.form-vertical div { display: flex; flex-direction: column; gap: 0.2rem; }
form.form-vertical label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
form.form-vertical input[type="text"],
form.form-vertical input[type="email"],
form.form-vertical input[type="password"],
form.form-vertical input[type="number"],
form.form-vertical textarea { width: 100%; }
form.form-vertical input[type="submit"] { align-self: flex-start; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
font-family: inherit;
font-size: 0.8rem;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
padding: 0.3rem 0.5rem;
outline: none;
}
textarea {
resize: vertical;
line-height: 1.4;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border-color: var(--accent);
}
input:disabled,
textarea:disabled,
select:disabled {
color: var(--muted);
opacity: 0.6;
cursor: not-allowed;
}
label:has(+ input:disabled),
label:has(+ select:disabled),
label:has(+ textarea:disabled) {
opacity: 0.6;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 0.65rem;
padding-right: 1.6rem;
}
input[type="submit"],
.btn-danger button,
button.btn-danger,
a.btn-primary,
label.btn-primary,
.btn-primary button,
button.btn-primary {
font-family: inherit;
font-size: 0.8rem;
background: var(--accent);
color: var(--bg);
border: none;
padding: 0.3rem 0.75rem;
border-radius: 3px;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
input[type="submit"]:hover,
.btn-danger button:hover,
button.btn-danger:hover,
a.btn-primary:hover,
label.btn-primary:hover,
.btn-primary button:hover,
button.btn-primary:hover { opacity: 0.85; }
.btn-primary button:disabled,
button.btn-primary:disabled,
.btn-danger button:disabled,
button.btn-danger:disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.6);
}
.btn-primary button:disabled:hover,
button.btn-primary:disabled:hover,
.btn-danger button:disabled:hover,
button.btn-danger:disabled:hover { opacity: 0.45; }
input[type="submit"].btn-danger,
.btn-danger button,
button.btn-danger { background: #cc3333; color: #fff; }
/* Discord blurple — used for the lobby "Recruit via Discord" button. */
a.btn-discord,
label.btn-discord,
.btn-discord button,
button.btn-discord {
font-family: inherit;
font-size: 0.8rem;
background: #5865F2;
color: #fff;
border: none;
padding: 0.3rem 0.75rem;
border-radius: 3px;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
a.btn-discord:hover,
label.btn-discord:hover,
.btn-discord button:hover,
button.btn-discord:hover { background: #4752c4; }
.btn-discord button:disabled,
button.btn-discord:disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.6);
}
.lobby-discord-recruited {
display: inline-flex;
align-items: center;
font-size: 0.8rem;
padding: 0.3rem 0.75rem;
}
.lobby-discord-hint {
font-size: 0.8rem;
padding: 0.3rem 0;
margin: 0;
}
.lobby-discord-hint .icon-leading {
margin-right: 0.35rem;
}
.lobby-discord-hint a {
color: #5865F2;
}
.lobby-discord-hint a:hover {
color: #4752c4;
}
a.btn-secondary,
label.btn-secondary,
.btn-secondary button,
button.btn-secondary {
font-family: inherit;
font-size: 0.8rem;
background: none;
border: 1px solid var(--accent);
color: var(--accent);
padding: 0.25rem 0.6rem;
border-radius: 3px;
cursor: pointer;
display: inline-block;
line-height: 1.2;
vertical-align: middle;
text-decoration: none;
}
a.btn-secondary:hover,
label.btn-secondary:hover,
.btn-secondary button:hover,
button.btn-secondary:hover { background: var(--accent); color: var(--bg); }
.btn-secondary button:disabled,
button.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
button.btn-secondary:disabled:hover { background: none; color: var(--accent); }
.btn-small button,
button.btn-small { font-size: 0.7rem; padding: 0.15rem 0.5rem; }
button.btn-icon, label.btn-icon {
font-size: 0.9rem;
line-height: 1;
padding: 0.15rem 0.4rem;
font-weight: 700;
}
td.action-col, th.action-col {
width: 1%;
white-space: nowrap;
padding-right: 0.5rem;
}
.players-table th, .players-table td { padding: 0.55rem 0.5rem; }
.players-table button.btn-icon, .players-table label.btn-icon { font-size: 1rem; padding: 0.45rem 0.75rem; min-width: 2.25rem; }
.pause-banner {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.5rem 0;
padding: 0.5rem 0.75rem;
border: 1px dashed #d4a800;
background: color-mix(in srgb, #d4a800 12%, transparent);
border-radius: 4px;
font-size: 0.9rem;
line-height: 1.2;
}
.pause-banner__text { flex: 1 1 auto; min-width: 0; }
.pause-banner__countdown { white-space: nowrap; }
.pause-banner__resume { margin-left: auto; flex-shrink: 0; }
.pause-banner form { margin: 0; }
.pause-banner .btn-small { font-size: 0.75rem; padding: 0.2rem 0.6rem; }
.info-banner {
margin: 1rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--accent);
background: rgba(0, 0, 0, 0.02);
border-radius: 4px;
text-align: center;
}
.info-banner p { margin: 0.25rem 0; }
.manage-pause-control {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0.5rem 0 1rem;
}
.manage-pause-control form { margin: 0; }
td form { display: inline; margin: 0; }
td form button, td input[type="submit"] {
font-family: inherit;
font-size: 0.8rem;
background: none;
border: 1px solid var(--accent);
color: var(--accent);
padding: 0.15rem 0.5rem;
border-radius: 3px;
cursor: pointer;
}
td form button:hover, td input[type="submit"]:hover { background: var(--accent); color: var(--bg); }
p { margin: 0.5rem 0; }
.muted { color: var(--muted); }
.user-profile-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.user-profile-header h2 { margin-bottom: 0.1rem; }
.user-profile-identity { flex: 1; min-width: 0; }
.user-profile-joined { font-size: 0.85rem; margin: 0 0 0.35rem; cursor: help; }
.user-avatar {
flex: 0 0 auto;
width: 3.5rem;
height: 3.5rem;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
color: #fff;
border: 2px solid var(--border);
user-select: none;
overflow: hidden;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.user-avatar--xs {
width: 1.7em;
height: 1.7em;
font-size: 0.7em;
border-width: 1px;
display: inline-flex;
vertical-align: middle;
margin-right: 0.35em;
}
/* Inline manager indicator next to a team name (lobby + standings +
draft tables). Both variants render into a fixed-size slot so the
gap to the team name lines up regardless of human/CPU.
The avatar variant has its own font-size: 0.7em, so we can't just
match em widths between the two — instead, the slot dimensions are
in parent units and the avatar fills the slot via width/height: 100%. */
.manager-icon-only {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
width: 1.4em;
height: 1.4em;
margin-right: 0.4em;
flex-shrink: 0;
text-decoration: none;
}
.manager-icon-only .user-avatar--xs {
width: 100%;
height: 100%;
margin-right: 0;
}
.manager-icon-only--cpu {
color: var(--muted);
}
.user-avatar--on-fire {
position: relative;
overflow: visible;
border-color: #ffb347;
animation: avatar-fire-flicker 1.6s ease-in-out infinite;
}
.user-avatar--on-fire img {
border-radius: 999px;
}
.user-avatar--on-fire::before,
.user-avatar--on-fire::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 999px;
pointer-events: none;
z-index: -1;
}
.user-avatar--on-fire::before {
background:
radial-gradient(circle at 50% 100%, rgba(255, 200, 60, 0.85) 0%, rgba(255, 120, 30, 0.55) 35%, rgba(180, 40, 10, 0) 70%),
radial-gradient(circle at 30% 90%, rgba(255, 220, 80, 0.7) 0%, rgba(255, 100, 20, 0) 60%),
radial-gradient(circle at 70% 90%, rgba(255, 220, 80, 0.7) 0%, rgba(255, 100, 20, 0) 60%);
filter: blur(2px);
animation: avatar-fire-wisp 1.1s ease-in-out infinite alternate;
}
.user-avatar--on-fire::after {
inset: -3px;
box-shadow:
0 0 6px 2px rgba(255, 180, 60, 0.9),
0 0 14px 4px rgba(255, 110, 20, 0.7),
0 0 22px 8px rgba(220, 60, 10, 0.45);
animation: avatar-fire-glow 0.85s ease-in-out infinite alternate;
}
.user-avatar--on-fire.user-avatar--xs::before { inset: -3px; }
.user-avatar--on-fire.user-avatar--xs::after { inset: -1px; }
@keyframes avatar-fire-flicker {
0%, 100% { border-color: #ffb347; }
50% { border-color: #ff7a18; }
}
@keyframes avatar-fire-glow {
0% { opacity: 0.8; transform: scale(1); }
100% { opacity: 1; transform: scale(1.04); }
}
@keyframes avatar-fire-wisp {
0% { transform: scale(1) translateY(0); opacity: 0.85; }
100% { transform: scale(1.08) translateY(-2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.user-avatar--on-fire,
.user-avatar--on-fire::before,
.user-avatar--on-fire::after { animation: none; }
}
.avatar-section { margin: 1rem 0 1.5rem; }
.avatar-section h3 { margin-bottom: 0.5rem; }
.avatar-edit {
display: flex;
align-items: center;
gap: 1rem;
}
.avatar-edit__controls { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.avatar-edit__controls .avatar-form { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.avatar-edit__controls .small { font-size: 0.75rem; margin: 0; }
.btn-link {
background: none;
border: none;
color: var(--accent);
text-decoration: underline;
cursor: pointer;
padding: 0;
font: inherit;
}
/* Rafters: NBA-arena-style championship banners */
.banners-rafters-wrap {
margin: 0.5rem 0 1.5rem;
}
.banners-tier + .banners-tier {
margin-top: 0.5rem;
}
.banners-tier-heading {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 0.35rem 0.5rem;
color: var(--muted, #888);
}
.banners-tier-count {
font-weight: 400;
}
.banners-tier .banners-rafters {
margin: 0;
}
.banners-rafters {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
padding: 1rem 0.5rem 1.5rem;
margin: 0.5rem 0 1.5rem;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 8px);
}
.banner {
--banner-primary: #1D1D1D;
--banner-secondary: #FFFFFF;
--banner-text: #FFFFFF;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
width: 9rem;
min-height: 10rem;
background: var(--banner-primary);
color: var(--banner-text);
border: 1px solid #FFFFFF;
text-align: center;
font-family: 'Helvetica Neue', Arial, sans-serif;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
transform: translateY(0);
transition: transform 0.15s ease, box-shadow 0.15s ease;
overflow: hidden;
}
.banner:hover {
transform: translateY(-3px);
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.55);
}
.banner-team {
background: var(--banner-secondary);
color: var(--banner-strip-text);
padding: 0.4rem 0.3rem;
font-weight: bold;
font-size: 0.7rem;
letter-spacing: 0.05em;
line-height: 1.15;
border-bottom: 1px solid var(--banner-strip-text);
}
.banner-headline {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.3rem 0.3rem;
}
.banner-year {
font-size: 1.6rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0.02em;
}
.banner-caption {
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1.1;
padding: 0 0.2rem;
text-transform: uppercase;
}
.banner-count {
background: var(--banner-secondary);
color: var(--banner-strip-text);
font-weight: bold;
font-size: 0.85rem;
padding: 0.25rem 0.3rem;
border-top: 1px solid var(--banner-strip-text);
letter-spacing: 0.02em;
}
.stat-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
gap: 0.5rem;
margin: 0.5rem 0 1rem;
}
.stat-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.5rem 0.75rem;
text-align: center;
}
.stat-card-label { font-size: 0.65rem; letter-spacing: 0.05rem; color: var(--muted); }
.stat-card-value { font-size: 1.6rem; font-weight: bold; margin-top: 0.15rem; white-space: nowrap; }
.stat-card-value--meter { display: flex; justify-content: center; align-items: center; margin-top: 0.15rem; min-height: 2.6rem; }
.stat-card-value--meter .morale-meter__bar { width: 14px; height: 2.4rem; }
a.stat-card--link {
display: block;
color: inherit;
text-decoration: none;
transition: background 0.12s ease, border-color 0.12s ease;
}
a.stat-card--link:hover,
a.stat-card--link:focus-visible {
background: rgba(255, 255, 255, 0.06);
border-color: var(--accent, #6cf);
text-decoration: none;
}
.user-profile-detail-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.5rem 0.75rem;
margin: 0.5rem 0;
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.detail-card-label { font-size: 0.65rem; letter-spacing: 0.05rem; color: var(--muted); }
.detail-card-value { font-size: 1rem; }
.recent-seasons { margin: 1rem 0 1.5rem; }
.recent-seasons-heading { margin: 0 0 0.5rem; font-size: 1rem; }
.recent-seasons-view-all { margin-left: 0.5rem; font-size: 0.85rem; font-weight: normal; }
.recent-seasons-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.recent-seasons-list li::before { content: none; }
.recent-season-row {
display: grid;
grid-template-columns: 4.5rem 1fr 5rem 17rem;
align-items: center;
gap: 0.85rem;
padding: 0.55rem 0.75rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: 4px;
font-size: 0.9rem;
}
.recent-season-row--champion {
border-left-color: #ffd700;
background: rgba(255, 215, 0, 0.05);
}
.recent-season-row--missed {
opacity: 0.7;
}
.recent-season-year { font-weight: bold; color: var(--accent); letter-spacing: 0.02rem; white-space: nowrap; }
.recent-season-sim { font-weight: 500; }
.recent-season-team { font-size: 0.78rem; margin-top: 0.05rem; }
.recent-season-created { font-size: 0.7rem; margin-top: 0.1rem; }
.recent-season-record { text-align: right; }
.recent-season-result { text-align: left; }
.recent-season-record-label,
.recent-season-result-label { font-size: 0.6rem; letter-spacing: 0.05rem; }
.recent-season-record-value,
.recent-season-result-value { font-size: 0.95rem; font-weight: 500; }
.recent-season-row--champion .recent-season-result-value { color: #ffd700; }
@media (max-width: 600px) {
.recent-season-row { grid-template-columns: 4.5rem 1fr auto; }
.recent-season-result { grid-column: 2 / 4; text-align: left; }
.recent-season-result-label { display: inline; margin-right: 0.4rem; }
}
.achievements { margin-top: 0; }
.achievements h3 { margin-bottom: 0.5rem; }
.achievement-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.achievement-list li::before { content: none; }
.achievement-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
border: 1px solid var(--accent);
border-radius: 999px;
color: var(--fg);
background: rgba(232, 119, 34, 0.08);
}
.achievement-emoji { font-size: 0.95rem; }
.user-profile-stats { margin-top: 1.25rem; }
.user-profile-counts { margin: 0.25rem 0 0.5rem; }
.user-profile-counts a { color: inherit; margin-right: 0; }
.user-profile-actions { margin: 0.5rem 0 0; }
.user-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.user-list li { padding: 0.4rem 0; border-bottom: 1px dashed var(--border); }
.user-list li:last-child { border-bottom: none; }
.user-list li .muted { margin-left: 0.5rem; font-size: 0.8rem; }
td.win { color: var(--fg); }
td.loss { color: var(--muted); }
/* Flash toasts. Fixed-position, top-right; out of document flow so
dismissing them never shifts the page underneath. The container is
pointer-events: none so the gap between toasts doesn't block clicks
on the page below; each toast re-enables pointer events on itself.
The container is marked data-turbo-permanent in the layout so a
stream broadcast re-rendering the page (Turbo morph) can't yank
active toasts out from under the user. */
#flash-toasts {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: min(28rem, calc(100vw - 2rem));
pointer-events: none;
}
.flash {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
border-left: 3px solid;
border-radius: 4px;
background: #141414;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
animation: flash-slide-in 0.18s ease-out;
}
.flash--leaving { animation: flash-slide-out 0.2s ease-in forwards; }
.flash-notice { border-color: var(--accent); color: var(--accent); }
.flash-alert { border-color: #cc3333; color: #cc3333; }
.flash__body { flex: 1; }
.flash__close {
background: none;
border: 0;
cursor: pointer;
color: inherit;
font-size: 1.1rem;
line-height: 1;
padding: 0 0.15rem;
opacity: 0.65;
}
.flash__close:hover { opacity: 1; }
@keyframes flash-slide-in {
from { transform: translateX(120%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes flash-slide-out {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.flash, .flash--leaving { animation: none; }
}
.form-errors { border-left: 3px solid #cc3333; background: rgba(204, 51, 51, 0.08); padding: 0.4rem 0.75rem; margin-top: 0.5rem; font-size: 0.8rem; color: #cc3333; }
.form-errors p { margin: 0.15rem 0; }
.pagination { margin: 1rem 0; }
.pagination a, .pagination em, .pagination span {
margin-right: 0.5rem;
font-size: 0.8rem;
}
.pagination em { color: var(--fg); font-style: normal; }
.pagination .disabled { color: var(--muted); }
/* Mobile */
@media (max-width: 768px) {
body { padding: 0.4rem 0.75rem 0.75rem; font-size: 12px; }
.table-scroll { -webkit-overflow-scrolling: touch; }
header nav.nav-main, header nav.nav-sub { flex-wrap: wrap; gap: 0.3rem; }
}
@media (max-width: 600px) {
header nav.nav-main .nav-label,
header nav.nav-sub .nav-label { display: none; }
header nav.nav-main a.nav-link,
header nav.nav-sub a.nav-sub-link,
header nav.nav-sub button.nav-sub-link { padding: 0.3rem 0.5rem; }
header nav.nav-main a.nav-link i,
header nav.nav-sub a.nav-sub-link i,
header nav.nav-sub button.nav-sub-link i { font-size: 1.05em; }
header nav.nav-main .nav-auth { padding-left: 0.5rem; gap: 0.4rem; }
}
@media (max-width: 480px) {
header h1 .title-retro,
header h1 .title-live,
header h1 .title-year { display: none; }
header h1 .title-compact { display: inline-block; }
header nav.nav-main h1.nav-title { margin-right: 0.4rem; }
}
/* Playoff Bracket */
.bracket {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 0.75rem;
}
.bracket-conference { }
.bracket-conference h4 { margin-bottom: 0.5rem; }
.bracket-finals { }
.bracket-finals h4 { margin-bottom: 0.5rem; }
.bracket-finals .matchup { width: 100%; }
.bracket-rounds {
display: flex;
gap: 1rem;
align-items: stretch;
overflow-x: auto;
padding-bottom: 0.25rem;
}
.bracket-round {
flex: 1 1 0;
min-width: 13rem;
display: flex;
flex-direction: column;
}
.bracket-round h5 { text-align: center; margin-bottom: 0.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.bracket-round-matchups { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 0.5rem; }
.bracket-round-matchups .matchup { margin-bottom: 0; }
.matchup {
border: 1px solid var(--border);
margin-bottom: 0.5rem;
background: var(--surface);
display: block;
color: inherit;
position: relative;
}
a.matchup:hover {
text-decoration: none;
border-color: var(--accent);
}
.matchup-team {
display: flex;
align-items: center;
padding: 0.25rem 0.4rem;
font-size: 0.8rem;
border-bottom: 1px solid var(--border);
}
.matchup-team:last-child { border-bottom: none; }
.matchup-team .seed {
color: var(--muted);
width: 1.5rem;
text-align: center;
font-size: 0.7rem;
flex-shrink: 0;
}
.matchup-team .team-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.matchup-team .mgr {
color: var(--muted);
font-size: 0.7rem;
margin-right: 0.4rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 6rem;
flex-shrink: 0;
}
.matchup-team .wins {
font-weight: bold;
min-width: 2rem;
margin: -0.25rem -0.4rem -0.25rem 0.4rem;
padding: 0.25rem 0.5rem;
text-align: center;
background: #050505;
border-left: 1px solid var(--border);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
}
.matchup-team.winner { color: var(--fg); }
.matchup-team.loser { color: var(--muted); }
.matchup.decided { border-color: #333; }
.matchup.placeholder { opacity: 0.5; border-style: dashed; }
.matchup.placeholder.preview { opacity: 0.78; }
/* Next-up: the series the sim will play next. Uses a soft warm tint
plus a small "Next" pill in the top-right corner so it stays clearly
distinct from the orange hover border on neighboring matchups. */
.matchup.matchup--next-up {
background: rgba(232, 119, 34, 0.09);
}
.matchup-next-badge {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
background: var(--accent);
color: #fff;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 3px;
line-height: 1.2;
pointer-events: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.matchup-team.preview-team .team-name { color: var(--fg); font-style: italic; }
.matchup-team.tbd .seed,
.matchup-team.tbd .team-name { color: var(--muted); }
/* Compact bracket card — strips edges + manager chip and gives the
team name a bit more room. Used by the bracket overview to keep
matchups scannable. The series page passes compact: false to
restore the busy at-a-glance view. */
/* Bracket card sizing — applied to both compact (overview) and full
(series page) views so the proportions are consistent. */
.matchup .matchup-team .team-name { font-weight: 500; }
.matchup .matchup-team .seed { font-size: 0.78rem; }
.matchup .matchup-team .wins { font-size: 0.95rem; }
/* Human-managed team indicator — left border accent + soft tint so any
user-controlled team in the bracket is easy to spot at a glance,
regardless of whether the viewer is the manager. */
.matchup-team--managed { border-left: 3px solid var(--accent, #f5c518); padding-left: calc(0.4rem - 3px); background: rgba(245, 197, 24, 0.06); }
/* Icon-only manager chip used in compact bracket cards — strips the
login text and shows just the user's avatar (with hover title). */
.matchup-team .mgr--icon-only { max-width: none; margin: 0; padding: 0; display: inline-flex; align-items: center; flex-shrink: 0; }
.bracket-champion {
margin-top: 0.75rem;
text-align: center;
padding: 0.5rem 0.75rem;
border: 1px solid var(--accent);
background: rgba(232, 119, 34, 0.08);
}
.champion-label {
display: block;
font-size: 0.7rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.2rem;
}
.champion-team {
display: block;
font-size: 0.85rem;
color: var(--fg);
font-weight: bold;
}
@media (max-width: 768px) {
.bracket-rounds { flex-direction: column; }
}
/* Home page */
.stats-strip {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.stat-tile {
flex: 1 1 0;
min-width: 8rem;
border: 1px solid var(--border);
background: var(--surface);
padding: 0.75rem 1rem;
border-radius: 3px;
}
.stat-tile .stat-value {
font-size: 1.6rem;
color: var(--accent);
line-height: 1.1;
font-weight: bold;
}
.stat-tile .stat-label {
font-size: 0.75rem;
color: var(--muted);
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.resume-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 1px solid var(--accent);
background: var(--surface);
padding: 0.75rem 1rem;
margin-bottom: 1rem;
border-radius: 3px;
}
.resume-card .resume-label {
font-size: 0.7rem;
color: var(--accent);
letter-spacing: 0.1em;
margin-bottom: 0.15rem;
}
.resume-card .resume-name {
color: var(--fg);
font-size: 1rem;
margin-bottom: 0.15rem;
}
.resume-card .resume-link {
white-space: nowrap;
border: 1px solid var(--accent);
padding: 0.4rem 0.9rem;
border-radius: 3px;
}
.resume-card .resume-link:hover {
background: var(--accent);
color: var(--bg);
text-decoration: none;
}
.resume-card .resume-body { flex: 1; min-width: 0; }
.resume-card .resume-counter {
color: var(--fg);
opacity: 0.65;
font-weight: normal;
letter-spacing: 0;
}
.resume-card .resume-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--accent);
border-radius: 3px;
font-size: 1.2rem;
line-height: 1;
text-decoration: none;
}
.resume-card .resume-arrow:hover {
background: var(--accent);
color: var(--bg);
text-decoration: none;
}
.resume-card .resume-arrow.disabled {
opacity: 0.3;
cursor: not-allowed;
}
.start-sim-bar--anon {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 1rem;
margin-bottom: 1.5rem;
border: 1px dashed var(--border);
border-radius: 6px;
background: var(--surface);
text-align: center;
}
.start-sim-bar__tagline { margin: 0; font-size: 0.9rem; }
.start-sim-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: stretch;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1.5rem;
padding: 0;
gap: 0;
}
.start-sim-label-panel {
background: var(--border);
color: var(--fg);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.85rem 1.25rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.start-sim-content {
display: flex;
align-items: stretch;
gap: 0.6rem;
padding: 0;
min-width: 0;
}
.start-sim-season {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 1.05rem;
padding: 0.65rem 2rem 0.65rem 1rem;
border: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-size: 0.8rem;
background-position: right 0.85rem center;
border-radius: 0;
}
.start-sim-season:focus {
outline: 1px solid var(--accent);
outline-offset: -1px;
border-color: transparent;
}
input[type="submit"].start-sim-submit {
font-weight: 700;
letter-spacing: 0.08em;
padding: 0 1.6rem;
border-radius: 0 3px 3px 0;
align-self: stretch;
}
@media (max-width: 600px) {
.start-sim-card {
grid-template-columns: 1fr;
}
.start-sim-label-panel {
font-size: 0.85rem;
padding: 0.5rem 1rem;
letter-spacing: 0.12em;
}
.start-sim-content {
flex-direction: column;
align-items: stretch;
}
.start-sim-season {
font-size: 1.1rem;
padding: 0.8rem 2rem 0.8rem 1rem;
}
input[type="submit"].start-sim-submit {
width: 100%;
font-size: 1.05rem;
padding: 0.6rem 1.4rem;
border-radius: 0 0 3px 3px;
}
}
/* Guest landing */
.hero {
text-align: center;
padding: 1.25rem 0 0.5rem;
}
.hero-tagline {
font-size: 1.6rem;
color: var(--fg);
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.hero-sub {
color: var(--muted);
margin-bottom: 1rem;
}
.why-2005 {
border-left: 3px solid var(--accent);
padding: 0.25rem 0 0.25rem 0.9rem;
margin: 1.25rem 0;
overflow: hidden;
}
.why-2005 h3 {
color: var(--accent);
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
.why-2005 p {
margin-bottom: 0.6rem;
line-height: 1.5;
}
.why-2005 strong {
color: var(--fg);
}
.why-2005-figure {
float: left;
width: 32%;
max-width: 240px;
min-width: 160px;
margin: 0.2rem 1rem 0.6rem 0;
padding: 0;
}
.why-2005-figure img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 3px;
}
@media (max-width: 600px) {
.why-2005-figure {
float: none;
width: 100%;
max-width: 240px;
margin: 0.6rem auto;
}
}
.player-card {
border: 1px solid var(--accent);
background: var(--surface);
border-radius: 3px;
padding: 0;
margin: 1.25rem 0;
overflow: hidden;
}
.player-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.9rem;
background: rgba(232, 119, 34, 0.08);
border-bottom: 1px solid var(--accent);
}
.player-card-eyebrow {
color: var(--accent);
font-size: 0.75rem;
letter-spacing: 0.1em;
}
.player-card-overall {
font-size: 1.5rem;
font-weight: bold;
color: var(--accent);
line-height: 1;
}
.player-card-body {
padding: 0.9rem;
}
.player-card-name {
font-size: 1.3rem;
color: var(--fg);
margin-bottom: 0.25rem;
}
.player-card-abilities {
margin-left: 0.4rem;
}
.player-card-meta {
color: var(--muted);
font-size: 0.85rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.9rem;
}
.player-card-meta > span + span::before {
content: "•";
margin-right: 0.75rem;
color: var(--border);
}
.player-card-ratings {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 0.35rem;
}
.player-card-ratings .rating {
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.35rem 0;
text-align: center;
background: var(--bg);
}
.player-card-ratings .rating-label {
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.05em;
}
.player-card-ratings .rating-value {
font-size: 1rem;
color: var(--fg);
font-weight: bold;
}
.player-card-footer {
margin-top: 0.75rem;
font-size: 0.75rem;
text-align: center;
}
.stat-section-heading {
margin-top: 1.5rem;
}
.sim-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--bg);
padding: 0.5rem 1.25rem 0;
margin: 0 -1.25rem 0.75rem;
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.6);
}
.table-scroll {
overflow-x: auto;
max-width: 100%;
}
.lobby-managers { margin: 0.75rem 0 1rem; }
.lobby-managers h3 { color: var(--accent); margin-bottom: 0.35rem; }
.lobby-last-activity { font-size: 0.8rem; margin: 0 0 0.4rem; cursor: help; }
.auth-switch { margin-top: 1rem; font-size: 0.75rem; }
.draft-roster-picker { display: flex; align-items: stretch; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.draft-roster-picker label { font-size: 0.85rem; align-self: center; }
.draft-roster-picker .btn-secondary { display: inline-flex; align-items: center; padding: 0.25rem 0.8rem; line-height: 1.2; }
.draft-actions-bar { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.draft-actions-bar form { margin: 0; }
.manage-roster-team-form { display: flex; align-items: stretch; gap: 0.5rem; }
.manage-roster-team-form .btn-secondary { display: inline-flex; align-items: center; padding: 0.25rem 0.8rem; line-height: 1.2; }
.draft-roster-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
padding: 0.5rem 0.75rem;
margin: 0 0 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
background: color-mix(in srgb, var(--text) 4%, transparent);
}
.draft-roster-summary__positions,
.draft-roster-summary__abilities {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.position-pill {
display: inline-flex;
align-items: baseline;
gap: 0.25rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.8rem;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.position-pill__label { font-weight: 600; }
.position-pill__count { font-variant-numeric: tabular-nums; }
.position-pill__secondary { font-size: 0.7rem; opacity: 0.75; }
.position-pill--gap {
background: color-mix(in srgb, #c0392b 12%, transparent);
border-color: color-mix(in srgb, #c0392b 45%, transparent);
}
.superstar-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.45rem;
border-radius: 4px;
font-size: 0.8rem;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.superstar-chip__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.superstar-chip--zero { opacity: 0.4; background: transparent; }
.conference-section + .conference-section { margin-top: 2rem; }
.sim-my-rest-banner {
margin: 0.5rem 0;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 4px;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
line-height: 1.2;
}
.sim-my-rest-banner form { margin: 0; padding: 0; display: inline; }
.sim-my-rest-banner form.sim-my-rest-banner__cta {
margin: 0 0 0 auto;
padding: 0;
display: inline-flex;
align-items: stretch;
flex-shrink: 0;
}
.sim-my-rest-banner__cta .btn-primary { display: inline-flex; align-items: center; }
.sim-my-rest-banner .btn-link {
background: none;
border: none;
color: var(--accent);
text-decoration: underline;
cursor: pointer;
padding: 0;
padding: 0;
font: inherit;
}
.sim-rest-badge { font-size: 0.75rem; color: var(--muted); margin-left: 0.25rem; }
.on-the-clock-banner {
margin: 0.5rem 0;
padding: 0.5rem 0.75rem;
border: 1px dashed var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-radius: 4px;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
line-height: 1.2;
}
.on-the-clock-banner__cta { margin-left: auto; flex-shrink: 0; }
.lobby-managers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.lobby-managers-list li::before { content: none; }
.lobby-managers-list li { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.lobby-managers-list li form { margin: 0; display: inline-flex; }
.lobby-manager-name { color: var(--fg); }
.lobby-manager-badge { font-size: 0.75rem; color: var(--accent); }
.invite-card {
margin: 0 0 1rem;
padding: 0.6rem 0.75rem;
border: 1px dashed var(--border);
border-radius: 6px;
background: rgba(255, 255, 255, 0.02);
}
.invite-card-label { margin: 0 0 0.35rem; color: var(--muted); font-size: 0.85rem; }
.invite-card-row { display: flex; gap: 0.4rem; align-items: stretch; flex-wrap: wrap; }
.invite-card-input {
flex: 1 1 280px;
min-width: 0;
font-family: monospace;
font-size: 0.85rem;
padding: 0.3rem 0.5rem;
background: var(--bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 4px;
}
.invite-confirm { margin: 1rem 0; }
.invite-confirm-meta { display: grid; grid-template-columns: max-content 1fr; column-gap: 0.75rem; row-gap: 0.25rem; margin: 0.5rem 0 1rem; }
.invite-confirm-meta dt { color: var(--muted); font-size: 0.85rem; }
.invite-confirm-meta dd { margin: 0; }
.invite-confirm-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.invite-confirm-actions form { margin: 0; }
.sim-header h2 { display: inline-block; margin: 0; }
.sim-header-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.sim-header-status { margin: 0 0 0.25rem; }
.sim-header nav.nav-sim.sim-subnav { margin-top: 0.5rem; padding-top: 0.4rem; padding-bottom: 0.5rem; border-top: 1px dashed var(--border); border-bottom: none; font-size: 0.75rem; column-gap: 0.85rem; }
.sim-header nav.nav-sim.sim-subnav a { color: var(--muted); }
.sim-header nav.nav-sim.sim-subnav a.active,
.sim-header nav.nav-sim.sim-subnav a:hover { color: var(--fg); }
.sim-subnav__group { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 0.85rem; row-gap: 0.25rem; }
.sim-subnav__group--with-divider { padding-left: 0.85rem; border-left: 1px dashed var(--border); }
.sim-subnav__badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.05rem 0.3rem;
min-width: 0.85rem;
border-radius: 999px;
background: var(--danger, #c0392b);
color: var(--bg);
font-size: 0.6rem;
font-weight: 700;
line-height: 1;
vertical-align: middle;
margin-left: 0.15rem;
}
@media (max-width: 600px) {
.sim-subnav__group--with-divider { padding-left: 0; border-left: none; }
}
.your-team-chip {
display: inline-flex;
align-items: center;
width: fit-content;
height: 1.5rem;
line-height: 1;
font-size: 0.8rem;
color: var(--fg);
background: #1a1a1a;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0 0.6rem;
white-space: nowrap;
}
a.your-team-chip { text-decoration: none; }
a.your-team-chip:hover { border-color: var(--accent); color: var(--accent); }
a.your-team-chip.your-team-chip-on-clock:hover { color: var(--accent); }
.your-team-chip-viewer { color: var(--muted); background: transparent; }
.your-team-chip-on-clock {
background: color-mix(in srgb, var(--accent) 20%, #1a1a1a);
border-color: var(--accent);
color: var(--accent);
}
.your-team-badges {
display: inline-flex;
align-items: center;
width: fit-content;
height: 1.5rem;
line-height: 1;
padding: 0 0.35rem;
background: #141414;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.8rem;
gap: 0.35rem;
}
.your-team-badges .edge-badges,
.your-team-badges { gap: 0.35rem; margin-left: 0; }
.champion-banner {
display: block;
font-size: 0.85rem;
color: var(--fg);
background: transparent;
border: none;
border-left: 2px solid var(--accent);
border-radius: 0;
padding: 0.1rem 0.6rem;
margin: 0.1rem 0 0.35rem;
}
.champion-banner strong { color: var(--accent); }
.lifecycle-stepper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin: 0.5rem 0 0.5rem;
padding: 0;
list-style: none;
}
.lifecycle-stepper li::before { content: none; }
.lifecycle-step {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0 0.55rem;
height: 1.5rem;
line-height: 1;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.75rem;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
a.lifecycle-step:hover { text-decoration: none; color: var(--fg); border-color: var(--accent); }
.lifecycle-step-icon { font-size: 0.8rem; line-height: 1; }
.lifecycle-step-done { color: var(--fg); border-color: #2c3a2c; }
.lifecycle-step-done .lifecycle-step-icon { color: #6db36d; }
.lifecycle-step-current { color: var(--accent); border-color: var(--accent); background: #1a1207; }
.lifecycle-step-upcoming { opacity: 0.55; }
.lifecycle-step-utility { color: var(--muted); border-color: transparent; padding: 0.1rem 0.4rem; }
.lifecycle-step-utility .lifecycle-step-icon { opacity: 0.8; }
a.lifecycle-step-utility:hover { color: var(--fg); border-color: var(--border); }
.lifecycle-step-active { color: var(--fg); border-color: var(--accent); background: #1a1207; }
a.lifecycle-step-utility.lifecycle-step-active { border-color: var(--accent); }
button.lifecycle-step-share { background: none; cursor: pointer; font: inherit; }
button.lifecycle-step-share:hover { color: var(--fg); border-color: var(--border); }
button.lifecycle-step-share .share-flash { display: none; font-size: 0.75rem; padding: 0 0.2rem; }
button.lifecycle-step-share.clipboard-copied .share-icon { display: none; }
button.lifecycle-step-share.clipboard-copied .share-flash { display: inline; }
.cta-block {
text-align: center;
margin: 1.5rem 0 1rem;
}
.cta-primary {
display: inline-block;
padding: 0.6rem 1.4rem;
background: var(--accent);
color: var(--bg);
border-radius: 3px;
font-size: 1rem;
letter-spacing: 0.02em;
}
.cta-primary:hover {
text-decoration: none;
background: #ffae66;
}
@media (max-width: 700px) {
.player-card-ratings {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.your-team-chip {
white-space: normal;
height: auto;
min-height: 1.5rem;
line-height: 1.25;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
border-radius: 0.85rem;
}
}
/* Footer */
.site-footer {
position: relative;
margin-top: 2.5rem;
padding: 1rem 0 0.5rem;
border-top: 1px solid #333;
text-align: center;
font-size: 0.8rem;
}
.site-footer .footer-easter-egg {
position: absolute;
right: 0.75rem;
bottom: 0.4rem;
color: var(--muted);
text-decoration: none;
font-size: 1rem;
opacity: 0.4;
transition: opacity 120ms ease, color 120ms ease;
}
.site-footer .footer-easter-egg:hover,
.site-footer .footer-easter-egg:focus {
opacity: 1;
color: var(--accent);
}
.site-footer .footer-links {
margin-bottom: 0.4rem;
}
.site-footer .footer-links a {
color: var(--accent);
}
.site-footer .footer-sep {
color: var(--muted);
margin: 0 0.4rem;
}
.site-footer .footer-meta {
font-size: 0.75rem;
}
/* Contact form / honeypot */
.contact-form { max-width: 36rem; }
.contact-details {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 0.4rem 1rem;
margin: 1rem 0 2rem;
font-size: 0.9rem;
}
.contact-details dt {
color: var(--muted);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
padding-top: 0.15rem;
}
.contact-details dd { margin: 0; word-break: break-word; }
.contact-message-heading {
margin-top: 2rem;
margin-bottom: 0.5rem;
}
.contact-message-body {
background: var(--surface);
border: 1px solid var(--border);
padding: 1rem;
border-radius: 3px;
white-space: pre-wrap;
}
.contact-message-body p { margin: 0 0 0.75rem; }
.contact-message-body p:last-child { margin-bottom: 0; }
.contact-actions { margin-top: 2rem; }
.contact-actions button {
font-family: inherit;
font-size: 0.85rem;
background: var(--accent);
color: var(--bg);
border: none;
padding: 0.5rem 1rem;
border-radius: 3px;
cursor: pointer;
}
.contact-actions button:hover { opacity: 0.85; }
.honeypot {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Danger zone */
.danger-zone {
margin-top: 2rem;
padding: 0.75rem 1rem;
border: 1px solid #cc3333;
border-radius: 3px;
background: rgba(204, 51, 51, 0.05);
max-width: 36rem;
}
.danger-zone h3 {
color: #cc3333;
margin-bottom: 0.4rem;
}
.danger-zone p {
margin-bottom: 0.6rem;
}
.lobby-close-actions { margin-top: 1.5rem; }
.lobby-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0; }
.lobby-actions form { margin: 0; }
/* Staff zone (mirrors danger-zone styling, accent color) */
.staff-zone {
margin-top: 1.5rem;
padding: 0.75rem 1rem;
border: 1px solid var(--accent);
border-radius: 3px;
background: rgba(232, 119, 34, 0.05);
}
.staff-zone h3 {
color: var(--accent);
margin-bottom: 0.4rem;
}
.staff-zone p {
margin-bottom: 0.6rem;
}
/* Staff contacts table */
.contacts-table .contact-message {
white-space: pre-wrap;
max-width: 30rem;
}
/* News Wire */
.news-composer {
border: 1px solid var(--border);
background: var(--surface);
padding: 1rem;
border-radius: 3px;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.news-composer h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.news-composer textarea { width: 100%; }
.news-feed {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.news-feed li::before { content: none; }
.news-post {
border: 1px solid var(--border);
background: var(--surface);
padding: 0.5rem 0.75rem;
border-radius: 3px;
font-size: 0.9rem;
display: flex;
align-items: baseline;
gap: 0.5rem 0.6rem;
}
@media (max-width: 640px) {
.news-post {
flex-direction: column;
align-items: flex-start;
}
}
.news-feed__date-heading {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
padding: 0.4rem 0 0.1rem;
border-bottom: 1px solid var(--border);
list-style: none;
}
.news-feed__date-heading:first-child { padding-top: 0; }
.player-team-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
margin-bottom: 0.75rem;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--surface);
}
.player-team-banner__team { font-size: 0.95rem; }
.player-team-banner__link { font-weight: 600; }
.player-team-banner__actions form { margin: 0; }
.news-post__kicker {
font-size: 0.7rem;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 0.25rem;
}
.news-post__lead { flex: 1 1 auto; min-width: 0; }
.news-post__byline {
font-size: 0.85rem;
flex: 1 1 auto;
}
.news-post__badge {
display: inline-flex;
align-items: center;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--surface-2, var(--surface)) 80%, var(--fg) 5%);
color: var(--muted);
white-space: nowrap;
}
.news-post__badge > i { font-size: 0.65rem; line-height: 1; }
.news-post__badge--signed { background: #2e7d32; color: #ffffff; }
.news-post__badge--released { background: #c62828; color: #ffffff; }
.news-post__badge--traded { background: #1565c0; color: #ffffff; }
.news-post__badge--statement { background: #455a64; color: #ffffff; }
.news-post__badge--storyline { background: #7c3aed; color: #ffffff; }
.form-fieldset--group {
margin: 1rem 0;
padding: 0.75rem 1rem 1rem;
border: 1px solid var(--border, #d0d7de);
border-radius: 6px;
}
.form-fieldset--group > legend {
padding: 0 0.5rem;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted, #57606a);
}
.form-fieldset--test-options {
margin: 1rem 0;
padding: 0.75rem 1rem 1rem;
border: 1px dashed #c084fc;
border-radius: 6px;
background: rgba(124, 58, 237, 0.05);
}
.form-fieldset--test-options > legend {
padding: 0 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: #7c3aed;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-fieldset--discord {
margin: 1rem 0;
padding: 0.75rem 1rem 1rem;
border: 1px solid #5865f2;
border-radius: 6px;
background: rgba(88, 101, 242, 0.05);
}
.form-fieldset--discord > legend {
padding: 0 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: #5865f2;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.discord-actions {
display: flex;
gap: 0.75rem;
align-items: center;
margin-top: 0.75rem;
}
.form-checkbox--brag { margin-top: 0.75rem; }
.hidden-form { display: none; }
.news-post--player-signed,
.news-post--player-released,
.news-post--player-traded,
.news-post--storyline {
font-size: 0.8rem;
padding: 0.35rem 0.6rem;
}
.news-post--player-signed .news-post__badge,
.news-post--player-released .news-post__badge,
.news-post--player-traded .news-post__badge,
.news-post--storyline .news-post__badge {
font-size: 0.6rem;
padding: 0.1rem 0.4rem;
}
.news-post--manager-post {
border-left: 3px solid var(--accent);
}
.news-post--manager-post .news-post__statement { flex-basis: 100%; }
.news-post--unread {
box-shadow: inset 3px 0 0 var(--accent-muted, var(--accent));
background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
}
.news-post--manager-post.news-post--unread { box-shadow: none; }
.news-post__statement {
margin: 0;
padding: 0.4rem 0 0.2rem 1rem;
border-left: 2px solid var(--border);
font-style: italic;
color: var(--fg);
}
.news-post__statement p { margin: 0 0 0.5rem; }
.news-post__statement p:last-child { margin-bottom: 0; }
form.form-vertical div.form-checkbox { flex-direction: row; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.form-checkbox label { font-size: 0.85rem; color: var(--text); text-transform: none; margin: 0; }
.form-checkbox:has(input[type="checkbox"]:disabled) label,
.form-checkbox:has(input[type="checkbox"]:disabled) .form-hint { opacity: 0.6; }
.form-checkbox input[type="checkbox"] { margin: 0; }
.form-checkbox .form-hint { flex-basis: 100%; margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--muted); }
/* Manage > Roster cap header */
.cap-header {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
align-items: baseline;
margin: 0.75rem 0;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--surface);
}
.cap-header .cap-diff { font-weight: 600; }
.cap-header .cap-diff--over { color: #cc3333; }
.cap-header .cap-diff--under { color: #2a9d4a; }
.cap-header .cap-header__deadline { flex-basis: 100%; font-size: 0.8rem; }
.badge-min {
display: inline-block;
margin-left: 0.25rem;
padding: 0 0.3rem;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #2a9d4a;
border: 1px solid #2a9d4a;
border-radius: 3px;
vertical-align: middle;
}
form.rankings-search { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
form.rankings-search input[type="text"] {
font-family: inherit;
font-size: 0.85rem;
background: var(--bg);
border: 1px solid var(--border);
color: var(--fg);
padding: 0.25rem 0.6rem;
border-radius: 3px;
width: 14rem;
}
form.rankings-search input[type="text"]:focus { outline: none; border-color: var(--accent); }
.podium-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
margin: 1.5rem 0 0.6rem;
text-align: center;
}
.podium-header__icon { color: #d4af37; font-size: 1.4rem; }
.podium-header__title {
margin: 0;
font-size: 1.1rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #d4af37;
}
.podium-header__subtitle { margin: 0; font-size: 0.8rem; }
.leaderboard-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
margin: 1.75rem 0 0.75rem;
text-align: center;
}
.leaderboard-header__icon { color: var(--accent); font-size: 1.3rem; }
.leaderboard-header__title {
margin: 0;
font-size: 1.05rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
}
.leaderboard-header__subtitle { margin: 0; font-size: 0.8rem; }
.achievement-legend {
margin: 0 auto 1rem;
max-width: 56rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface);
}
.achievement-legend > summary {
cursor: pointer;
padding: 0.6rem 0.9rem;
font-weight: 600;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.achievement-legend > summary::-webkit-details-marker { display: none; }
.achievement-legend__icon { color: var(--accent); }
.achievement-legend__body {
padding: 0.25rem 1rem 1rem;
display: grid;
gap: 1rem 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.achievement-legend__section { min-width: 0; }
.achievement-legend__title {
margin: 0.5rem 0 0.25rem;
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.achievement-legend__description { margin: 0 0 0.5rem; }
.achievement-legend__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.3rem;
}
.achievement-legend__list li::before { content: none; }
.achievement-legend__item {
display: grid;
grid-template-columns: 1.4rem 1fr auto;
align-items: baseline;
gap: 0.5rem;
font-size: 0.85rem;
line-height: 1.25;
}
.achievement-legend__chip { text-align: center; }
.achievement-legend__label { min-width: 0; overflow-wrap: anywhere; }
.achievement-legend__req { white-space: nowrap; }
.podium {
list-style: none;
padding: 0;
margin: 0 0 1rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem;
}
.podium li::before { content: none; }
.podium__card {
border: 1px solid var(--border);
border-top: 4px solid var(--border);
background: var(--surface);
padding: 0.6rem 0.75rem;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 0.3rem;
position: relative;
min-width: 0;
}
.podium__card--gold { border-top-color: #d4af37; }
.podium__card--silver { border-top-color: #b0b7bf; }
.podium__card--bronze { border-top-color: #a47148; }
.podium__rank {
position: absolute;
top: 0.3rem;
right: 0.6rem;
display: flex;
align-items: baseline;
gap: 0.1rem;
font-weight: 800;
line-height: 1;
color: var(--muted);
}
.podium__rank-hash { font-size: 1.1rem; opacity: 0.65; }
.podium__rank-num { font-size: 2rem; }
.podium__card--gold .podium__rank { color: #d4af37; }
.podium__card--silver .podium__rank { color: #8a929b; }
.podium__card--bronze .podium__rank { color: #a47148; }
.podium__user { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding-right: 2.75rem; }
.podium__name { font-weight: 600; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__titles { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.podium__titles .muted { font-size: 0.7rem; font-weight: 500; margin-left: 0.25rem; }
.podium__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: 0.7rem; letter-spacing: 0.05em; }
@media (max-width: 600px) {
.podium { grid-template-columns: 1fr; }
}
.achievement-inline { display: inline-flex; gap: 0.3rem; margin-left: 0.4rem; vertical-align: middle; }
.achievement-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.3rem;
height: 1.3rem;
font-size: 0.95rem;
}
.achievement-chip:hover { filter: brightness(1.15); }
/* Decorative icon prefix inside a link.
inline-block creates its own line box so the parent link's
hover underline doesn't extend through the icon or the gap. */
.link-icon {
display: inline-block;
margin-right: 0.35rem;
text-decoration: none;
}
.sim-card-list {
list-style: none;
padding: 0;
margin: 0.75rem 0 1rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sim-card-list li::before { content: none; }
.sim-card {
border: 1px solid var(--border);
background: var(--surface);
padding: 0.7rem 0.9rem;
border-radius: 3px;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sim-card-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.sim-card-name {
font-weight: 600;
font-size: 1rem;
}
.sim-card-status {
font-size: 0.85rem;
text-align: right;
}
.sim-card-team {
font-size: 0.9rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
}
.sim-card-meta { font-size: 0.8rem; }
.sims-section { margin: 1rem 0 1.5rem; }
.sims-section h3 { margin: 0 0 0.25rem; }
.sims-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.25rem 0 1rem; flex-wrap: wrap; font-size: 0.85rem; }
.sims-filter-user { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; vertical-align: middle; }
.sims-filter-toggle { font-weight: 500; }
.sims-filter-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.sims-filter-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; line-height: 1.4; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: inherit; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease; }
.sims-filter-pill:hover, .sims-filter-pill:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); text-decoration: none; }
.sims-filter-pill.is-active { background: var(--accent, #6cf); border-color: var(--accent, #6cf); color: #0b0f17; font-weight: 600; }
.sims-filter-clear { font-size: 0.85rem; }
.sims-filter-form { display: flex; gap: 0.4rem; align-items: stretch; flex-wrap: wrap; margin: 0.5rem 0; }
.sims-filter-input { flex: 1 1 220px; min-width: 180px; padding: 0.35rem 0.6rem; }
.sims-filter-form .btn-primary,
.sims-filter-form .btn-secondary { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; line-height: 1.2; }
.sim-card--mine { border-left: 3px solid var(--accent, #f5c518); padding-left: calc(0.9rem - 3px); background: rgba(245, 197, 24, 0.06); }
.sim-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.sim-card-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.sim-card-title { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.sim-card-meta { display: flex; gap: 0.75rem; align-items: center; }
.sim-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; margin-left: auto; }
.sim-card-managers-list { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.sim-card-manager-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.4rem; font-size: 0.78rem; border: 1px solid var(--border); border-radius: 999px; }
.sim-card-manager-chip:hover { background: rgba(245, 197, 24, 0.08); }
/* Font Awesome icon utilities */
.icon-leading { margin-right: 0.35em; }
.player-ability { margin-right: 0.15em; }
.player-ability:last-child { margin-right: 0; }
.player-ability.fa-lock { color: #f5c518; }
.player-ability.fa-foot-wing { color: #4cc9f0; }
.player-ability.fa-circle-3 { color: #ee6730; }
/* Staff icon gallery */
.icon-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.5rem;
list-style: none;
padding: 0;
}
.icon-gallery li {
border: 1px solid var(--border);
background: var(--surface);
padding: 0.4rem 0.6rem;
border-radius: 3px;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
}
.icon-gallery li::before { content: none; }
.icon-gallery .fa-solid,
.icon-gallery .fa-regular,
.icon-gallery .fa-brands,
.icon-gallery .fa-duotone,
.icon-gallery .fa-sharp,
.icon-gallery .fa-chisel,
.icon-gallery .fa-etch {
font-size: 1.15rem;
width: 1.5em;
text-align: center;
}
/* Arcade Edges — roster identity & momentum badges */
.edge-badges {
display: inline-flex;
align-items: center;
gap: 0.25em;
margin-left: 0.4em;
vertical-align: middle;
}
.edge-badges--compact i {
font-size: 1em;
}
.edge-badges--expanded i {
font-size: 1rem;
}
/* Suppress the global "› " li::before for edge cards */
.edge-list li::before { content: none; }
.coach-page__intro { margin-bottom: 1rem; }
.coach-page__title-icon { margin-right: 0.35rem; color: #fbbf24; }
.section-header {
margin: 0 0 0.4rem;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.section-header__icon { color: #fbbf24; }
.coach-page__list .coach-page__card { position: relative; }
.coach-page__card--selected {
outline: 2px solid #fbbf24;
outline-offset: 2px;
border-radius: 4px;
}
.coach-page__action {
grid-column: 2;
margin-top: 0.5rem;
white-space: nowrap;
}
.coach-page__action .btn-secondary { white-space: nowrap; }
/* ----- Player Rotation Plan (utilization toggle) ----- */
.coach-page__utilization { margin-top: 2rem; }
.coach-page__edges { margin-top: 2rem; }
.coach-page__edges h3 {
margin: 0 0 0.25rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.coach-page__edges h3 .fa-sparkles { color: #fbbf24; }
.coach-page__edges p { margin-top: 0; margin-bottom: 0.75rem; }
.coach-page__utilization-intro h3 {
margin: 0 0 0.25rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.coach-page__utilization-intro h3 .fa-sliders { color: #fbbf24; }
.coach-page__utilization-intro p { margin-top: 0; margin-bottom: 1rem; }
.coach-page__utilization-table { width: 100%; }
.coach-page__utilization-table td.num,
.coach-page__utilization-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.coach-page__utilization-table td .muted { margin-left: 0.4rem; }
.util-toggle {
display: inline-flex;
gap: 0.25rem;
flex-wrap: nowrap;
}
.util-toggle__form { display: inline-block; margin: 0; }
.util-toggle__btn {
display: inline-block;
padding: 0.25rem 0.6rem;
font-size: 0.85rem;
line-height: 1.2;
border-radius: 3px;
white-space: nowrap;
border: 1px solid #444;
background: transparent;
color: #888;
font-family: inherit;
}
button.util-toggle__btn {
border-color: var(--accent);
color: var(--accent);
cursor: pointer;
}
button.util-toggle__btn:hover { background: var(--accent); color: var(--bg); }
/* Non-button (selected or read-only) labels */
span.util-toggle__btn { cursor: default; }
span.util-toggle__btn--selected {
color: #0a0a0a;
background: #fbbf24;
border-color: #fbbf24;
font-weight: 600;
}
/* Read-only context (spectator viewing another team, or sim is
complete). Greys out the unselected levels and disables hover/click
affordances; the selected level is restyled below in a muted
palette so the viewer can still tell what was picked. */
span.util-toggle__btn--readonly {
color: #666;
background: transparent;
border-color: #333;
font-weight: normal;
opacity: 0.6;
cursor: not-allowed;
}
span.util-toggle__btn--readonly.util-toggle__btn--selected {
color: #d1d1d1;
background: #2a2a2a;
border-color: #555;
font-weight: 600;
opacity: 0.85;
}
/* Dim context: the choice is currently a no-op (e.g. Balanced
identity), so even the "selected" pill should look flat and
non-actionable. */
span.util-toggle__btn--dim {
color: #666;
background: transparent;
border-color: #333;
font-weight: normal;
opacity: 0.6;
cursor: not-allowed;
}
.edge-badge {
display: inline-flex;
align-items: center;
line-height: 1;
}
/* Per-icon coloring (dark-bg friendly). Applied via FA class on the
inside the badge so it works for both compact badges and the
verbose edge-list rendering. */
.edge-badge .fa-crosshairs,
.edge-list__icon.fa-crosshairs { color: #ef4444; } /* sniper red */
.edge-badge .fa-shield-halved,
.edge-list__icon.fa-shield-halved { color: #3b82f6; } /* defense blue */
.edge-badge .fa-bolt,
.edge-list__icon.fa-bolt { color: #4cc9f0; } /* electric blue */
.edge-badge .fa-recycle,
.edge-list__icon.fa-recycle { color: #22c55e; } /* green */
.edge-badge .fa-hand,
.edge-list__icon.fa-hand { color: #818cf8; } /* indigo */
.edge-badge .fa-forward-fast,
.edge-list__icon.fa-forward-fast { color: #06b6d4; } /* cyan */
.edge-badge .fa-chess-king,
.edge-list__icon.fa-chess-king { color: #f5c518; } /* gold */
.edge-badge .fa-medal,
.edge-list__icon.fa-medal { color: #b8860b; } /* dark gold */
.edge-badge .fa-crown,
.edge-list__icon.fa-crown { color: #fbbf24; } /* royal gold */
.edge-badge .fa-compass,
.edge-list__icon.fa-compass { color: #14b8a6; } /* teal */
.edge-badge .fa-fire,
.edge-list__icon.fa-fire { color: #f97316; } /* orange */
.edge-badge .fa-meteor,
.edge-list__icon.fa-meteor { color: #a855f7; } /* violet */
.edge-badge .fa-snowflake,
.edge-list__icon.fa-snowflake { color: #93c5fd; } /* ice blue */
.edge-badge .fa-arrow-down,
.edge-list__icon.fa-arrow-down { color: #dc2626; } /* danger red */
.edge-badge .fa-arrow-rotate-left,
.edge-list__icon.fa-arrow-rotate-left{ color: #86efac; } /* light green */
.edge-badge .fa-bullhorn,
.edge-list__icon.fa-bullhorn { color: #ec4899; } /* magenta */
.edge-badge .fa-heart-crack,
.edge-list__icon.fa-heart-crack { color: #f87171; } /* pink-red */
.edge-badge .fa-sliders,
.edge-list__icon.fa-sliders { color: #fbbf24; } /* amber */
.edge-badge .fa-gauge-high,
.edge-list__icon.fa-gauge-high { color: #22c55e; } /* dialed-in green */
.edge-badge .fa-seedling,
.edge-list__icon.fa-seedling { color: #22c55e; } /* phenom green */
.edge-badge .fa-triangle-exclamation,
.edge-list__icon.fa-triangle-exclamation { color: #ef4444; } /* crossed-wires red */
.edge-badge .fa-wand-magic-sparkles,
.edge-list__icon.fa-wand-magic-sparkles { color: #c084fc; } /* violet */
.edge-badge .fa-plane,
.edge-list__icon.fa-plane { color: #fbbf24; }
.edge-badge .fa-clipboard-check,
.edge-list__icon.fa-clipboard-check { color: #fbbf24; }
.edge-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 1rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
gap: 0.4rem 0.75rem;
}
.edge-list__item {
display: grid;
grid-template-columns: 1.5rem auto;
grid-template-rows: auto auto;
column-gap: 0.5rem;
align-items: start;
align-content: start;
padding: 0.35rem 0.5rem;
border: 1px solid var(--border, #ddd);
border-radius: 0.35rem;
}
.edge-list__icon { grid-row: 1 / span 2; font-size: 1.1rem; text-align: center; padding-top: 0.15rem; }
.edge-list__name { font-weight: 600; }
.edge-list__desc { font-size: 0.8rem; grid-column: 2; }
/* Bracket-card edge badges: smaller, hugs the manager column,
never competes with the team-name ellipsis. */
.matchup-team .edge-badges--bracket {
flex-shrink: 0;
margin: 0 0.35rem 0 0.2rem;
gap: 0.15em;
}
.matchup-team .edge-badges--bracket i {
font-size: 0.7rem;
opacity: 0.85;
}
/* When the bracket strip is wrapped in an expand/collapse host the
margin needs to live on the host (the inner edge-badges sit
flush). */
.matchup-team .edge-popover-host {
flex-shrink: 0;
margin: 0 0.35rem 0 0.2rem;
gap: 0.15em;
}
.matchup-team .edge-popover-host .edge-badges--bracket {
margin: 0;
gap: 0.15em;
}
.matchup-team .edge-popover-host .edge-overflow-pill {
font-size: 0.7rem;
margin-left: 0;
}
/* ----- After Action Report (game show page) ----- */
.game-show { display: flex; flex-direction: column; gap: 1.25rem; }
.game-show__header { display: flex; flex-direction: column; gap: 0.5rem; }
.game-show__date { font-size: 0.85rem; }
.game-show__scoreline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
align-items: end;
}
.game-show__team { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #ddd); border-radius: 0.4rem; }
.game-show__team-name { font-weight: 600; }
.game-show__team-score { font-size: 2rem; line-height: 1; font-weight: 700; }
.game-show__report h2,
.game-show__edges h2 { font-size: 1rem; margin: 0 0 0.4rem 0; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.game-show__report p { margin: 0; font-size: 1rem; line-height: 1.5; }
.box-score h2 { font-size: 1rem; margin: 0 0 0.4rem 0; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.box-score__table { width: auto; min-width: 100%; }
.box-score__table th,
.box-score__table td { padding: 0.4rem 0.6rem; }
/* --------------------------------------------------------------------
* Morale / Chemistry meter (5-bar arcade style)
* ------------------------------------------------------------------ */
.morale-meter { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; }
.morale-meter__label { opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; }
.morale-meter__bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.morale-meter__bar {
display: inline-block;
width: 6px;
height: 12px;
background: rgba(128, 128, 128, 0.25);
border-radius: 1px;
}
.morale-meter--md .morale-meter__bar { width: 9px; height: 18px; }
.morale-meter__bar--on { background: currentColor; }
.morale-meter__word { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; }
.morale-meter--elite { color: #d97706; }
.morale-meter--hot { color: #65a30d; }
.morale-meter--steady { color: #0891b2; }
.morale-meter--tense { color: #ea580c; }
.morale-meter--cold { color: #dc2626; }
.team-dashboard { margin: 0.75rem 0 1rem; }
.team-dashboard__playoff-status { margin: 0.25rem 0 0; }
.manage-roster-position-form { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0; flex-wrap: wrap; }
.morale-meter--thrilled { color: #d97706; }
.morale-meter--happy { color: #65a30d; }
.morale-meter--content { color: #0891b2; }
.morale-meter--frustrated { color: #ea580c; }
.morale-meter--angry { color: #dc2626; }
.player-morale { margin: 0.5rem 0 1rem; }
.auth-layout {
display: grid;
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
gap: 2rem;
align-items: start;
margin: 1rem 0 2rem;
}
.auth-form-pane { min-width: 0; }
@media (max-width: 720px) {
.auth-layout { grid-template-columns: 1fr; gap: 1.25rem; }
}
.auth-pitch {
border: 1px dashed rgba(232, 119, 34, 0.35);
background: transparent;
border-radius: 3px;
padding: 1rem 1.1rem 0.9rem;
color: var(--muted);
}
.auth-pitch-eyebrow {
color: rgba(232, 119, 34, 0.65);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: lowercase;
margin: 0 0 0.25rem;
}
.auth-pitch-heading {
font-size: 1rem;
margin: 0 0 0.85rem;
color: var(--muted);
font-weight: 500;
}
.auth-pitch-card {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.55rem 0;
border-top: 1px dashed rgba(232, 119, 34, 0.18);
}
.auth-pitch-card:first-of-type { border-top: none; padding-top: 0; }
.auth-pitch-glyph {
font-size: 1.35rem;
line-height: 1.1;
flex-shrink: 0;
opacity: 0.85;
}
.auth-pitch-body { min-width: 0; }
.auth-pitch-title {
font-weight: 600;
color: rgba(232, 119, 34, 0.75);
margin: 0 0 0.15rem;
font-size: 0.9rem;
}
.auth-pitch-body p:last-child {
color: var(--muted);
font-size: 0.85rem;
margin: 0;
line-height: 1.45;
}
.auth-pitch-footer {
margin: 0.85rem 0 0;
font-size: 0.8rem;
color: var(--muted);
text-align: right;
font-style: italic;
opacity: 0.8;
}
/* === Staff player editor === */
.player-edit__header { margin: 0.5rem 0 1rem; }
form.player-edit {
display: block;
margin: 0;
}
.player-edit__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1rem;
align-items: start;
}
.player-edit__fieldset {
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.75rem 1rem 1rem;
margin: 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.player-edit__fieldset legend {
padding: 0 0.4rem;
color: var(--accent);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.player-edit .form-row {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
align-items: center;
gap: 0.5rem;
}
.player-edit .form-row label {
color: var(--muted);
font-size: 0.8rem;
}
.player-edit .form-row input[type="text"],
.player-edit .form-row input[type="number"],
.player-edit .form-row select {
width: 100%;
box-sizing: border-box;
}
.player-edit__height { display: inline-flex; align-items: center; gap: 0.25rem; }
.player-edit__height-input { width: 4rem; }
.player-edit .rating-field { align-items: center; }
.player-edit .rating-field__inputs {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.player-edit .form-row input[type="number"].rating-field__number { width: 4rem; flex-shrink: 0; }
.player-edit .rating-field__range { flex: 1 1 0; min-width: 4rem; }
.player-edit__hint {
margin: 0.25rem 0 0.25rem;
font-size: 0.75rem;
line-height: 1.35;
}
.player-edit__actions {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-start;
}
/* Calendar-style schedule (research → schedule, sim schedules) */
.schedule-cal__filters {
display: flex;
gap: 0.5rem;
align-items: center;
margin: 0.5rem 0 1rem;
flex-wrap: wrap;
}
.schedule-cal {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-top: 0.5rem;
background: var(--border);
border: 1px solid var(--border);
}
.schedule-cal__dow {
background: var(--surface);
color: var(--muted);
text-align: center;
padding: 6px 4px;
font-size: 11px;
letter-spacing: 0.06em;
}
.schedule-cal__day {
background: var(--surface);
min-height: 78px;
padding: 6px 8px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.schedule-cal__day.is-out-of-month .schedule-cal__date { opacity: 0.4; }
.schedule-cal__day.is-out-of-month.is-empty { background: transparent; }
.schedule-cal__day.is-empty { background: color-mix(in srgb, var(--surface) 92%, var(--fg) 4%); }
.schedule-cal__day.is-home {
background: color-mix(in srgb, var(--surface) 60%, #22c55e 40%);
outline: 1px solid #22c55e;
outline-offset: -1px;
}
.schedule-cal__day.is-away {
background: color-mix(in srgb, var(--surface) 60%, #3b82f6 40%);
outline: 1px solid #3b82f6;
outline-offset: -1px;
}
.schedule-cal__date {
font-size: 12px;
color: var(--fg);
font-weight: 600;
}
.schedule-cal__game {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 13px;
margin-top: auto;
}
.schedule-cal__prefix { color: var(--muted); font-size: 11px; }
.schedule-cal__opp { font-weight: 700; letter-spacing: 0.04em; }
.schedule-cal__tag {
font-size: 9px;
background: var(--surface);
color: var(--muted);
padding: 1px 4px;
border-radius: 2px;
margin-left: 4px;
}
.schedule-cal__legend {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.75rem;
color: var(--muted);
font-size: 11px;
}
.schedule-cal__legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.schedule-cal__legend-swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
}
.schedule-cal__legend-swatch.is-home { background: #22c55e; }
.schedule-cal__legend-swatch.is-away { background: #3b82f6; }
.schedule-cal__dow-inline { display: none; }
.schedule-cal__game--off { display: none; }
@media (max-width: 720px) {
.schedule-cal {
grid-template-columns: 1fr;
gap: 2px;
}
.schedule-cal__dow { display: none; }
.schedule-cal__day.is-out-of-month.is-empty { display: none; }
.schedule-cal__day.is-out-of-month .schedule-cal__date { opacity: 1; }
.schedule-cal__day {
min-height: 0;
padding: 8px 10px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.schedule-cal__date {
font-size: 12px;
display: inline-flex;
align-items: baseline;
gap: 6px;
min-width: 70px;
}
.schedule-cal__dow-inline {
display: inline;
color: var(--muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
}
.schedule-cal__date-num { font-size: 14px; }
.schedule-cal__game { font-size: 12px; margin-top: 0; }
.schedule-cal__opp { font-size: 12px; }
.schedule-cal__game--off { display: inline; color: var(--muted); font-style: italic; }
}
/* Played-game cells: BIG W/L + score on desktop, compact on mobile */
.schedule-cal__day.is-played { cursor: pointer; text-decoration: none; color: inherit; }
.schedule-cal__day.is-played:hover { filter: brightness(1.15); }
.schedule-cal__day.is-played.is-win { outline-color: #facc15; }
.schedule-cal__day.is-played.is-loss { outline-color: #6b7280; }
.schedule-cal__result {
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
}
.schedule-cal__wl {
font-size: 26px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.03em;
}
.schedule-cal__wl.is-win { color: #facc15; }
.schedule-cal__wl.is-loss { color: #d4d4d4; }
.schedule-cal__score {
font-size: 12px;
color: var(--fg);
font-weight: 600;
}
.schedule-cal__game--small {
font-size: 10px;
opacity: 0.85;
}
@media (max-width: 720px) {
.schedule-cal__wl { font-size: 14px; }
.schedule-cal__score { font-size: 11px; }
.schedule-cal__result { margin-top: 0; }
.schedule-cal__game--small { font-size: 10px; }
}
/* Optional team city/location prefix — visible on desktop, hidden on
narrow viewports so tables and rosters fall back to just the team
name (e.g. "Boston Celtics" → "Celtics" on mobile). The
`.team-long` / `.team-short` pair is rendered by `team_full_label`
and swaps the full " " for the team's `short_name`
(e.g. "Portland Trail Blazers" → "Blazers") at the breakpoint. */
.team-short { display: none; }
@media (max-width: 600px) {
.team-location { display: none; }
.team-long { display: none; }
.team-short { display: inline; }
/* Same idea for manager_chip: collapse to just the avatar / robot
icon on narrow viewports — the column is always pretty tight on
mobile and the avatar (or "CPU" robot) is the recognizable bit. */
.manager-name { display: none; }
/* …except in the Lobby's Managers Joined list, where the avatar
alone makes it hard to tell who's who at a glance. */
.lobby-managers-list .manager-name { display: inline; }
/* …and in the champion banner, where the parenthetical login is the
whole point of "(matty) are the champions!". */
.champion-banner .manager-name { display: inline; }
}
.pending-deletion-banner {
margin: 0 auto 0.75rem;
max-width: 900px;
padding: 0.4rem 0.75rem;
border: 1px solid #cc3333;
background: rgba(204, 51, 51, 0.08);
border-radius: 4px;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
color: #f87171;
}
.pending-deletion-banner form { margin: 0; padding: 0; display: inline; }
.pending-deletion-banner .btn-link {
background: none;
border: none;
color: #f87171;
text-decoration: underline;
cursor: pointer;
padding: 0;
font-family: inherit;
font-size: inherit;
}
/* Sim Chat */
.chat-composer {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
margin: 0.5rem 0 1rem;
width: 100%;
}
.chat-composer__input {
flex: 1 1 auto;
min-width: 0;
padding: 0.45rem 0.65rem;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: inherit;
font: inherit;
font-size: 0.9rem;
line-height: 1.3;
height: 2.25rem;
}
.chat-composer__input:focus {
outline: none;
border-color: var(--accent, #f59e0b);
}
.chat-composer__submit {
flex: 0 0 auto;
width: 5rem;
height: 2.25rem;
white-space: nowrap;
}
.chat-closed-notice {
margin: 0.5rem 0 1rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.chat-feed {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.chat-feed li::before { content: none; }
.chat-message {
border: 1px solid var(--border);
background: var(--surface);
border-radius: 4px;
padding: 0.5rem 0.75rem;
}
.chat-message--unread {
border-left: 3px solid var(--accent, #f59e0b);
}
.chat-staff-banner { margin: 0.5rem 0; display: flex; align-items: center; gap: 0.5rem; }
.chat-message__staff-badge {
display: inline-flex;
align-items: center;
padding: 0.05rem 0.4rem;
border-radius: 999px;
background: var(--accent, #f59e0b);
color: var(--bg);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
}
.chat-message__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
font-size: 0.85rem;
margin-bottom: 0.2rem;
}
.chat-message__login {
font-weight: 600;
}
.chat-message__time {
margin-left: auto;
}
.chat-message__body {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.chat-quota-note {
margin: 0.25rem 0 0.5rem;
}
/* Unread chat count badge in the lifecycle stepper.
Positioned upper-right of the chat pill in red (mirrors .nav-bell-badge). */
.lifecycle-step-chat { position: relative; overflow: visible; }
.lifecycle-step-chat-badge {
position: absolute;
top: -0.3rem;
right: -0.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.05rem 0.25rem;
min-width: 0.85rem;
border-radius: 999px;
background: var(--danger, #c0392b);
color: var(--bg);
font-size: 0.55rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
/* Trade Machine */
.trade-lock-notice { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; }
.trade-machine-form { margin-top: 1rem; }
.trade-machine-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.trade-machine-controls__pick-team { display: flex; align-items: center; gap: 0.4rem; }
.trade-machine-nav-btn { padding: 0.35rem 0.7rem; font-size: 0.95rem; line-height: 1; }
.trade-machine-nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.trade-toggle__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
margin: 0;
left: -9999px;
}
.trade-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
}
.trade-toggle.btn-primary { border: 1px solid var(--accent); }
.trade-toggle.btn-secondary:hover { background: none; color: var(--accent); }
.trade-toggle.btn-primary:hover { opacity: 1; }
.trade-machine-stack {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.trade-machine-side { min-width: 0; }
.trade-machine-side__header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
margin: 0 0 0.5rem;
}
.trade-machine-counter {
margin-left: auto;
font-size: 0.8rem;
color: #6b7280;
font-weight: 500;
}
.trade-machine-meter { width: 100%; }
.trade-machine-actions { margin-top: 1rem; display: flex; justify-content: flex-end; }
.trade-machine-roster-size {
font-size: 0.8rem;
margin: -0.25rem 0 0.5rem;
}
.interest-card {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 0.85rem 1rem;
background: #fafafa;
}
.interest-card__title { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #374151; }
.interest-card__placeholder { margin: 0.25rem 0; font-size: 0.85rem; }
.interest-meter--great-fit { color: #d97706; }
.interest-meter--interested { color: #65a30d; }
.interest-meter--lukewarm { color: #0891b2; }
.interest-meter--cool { color: #ea580c; }
.interest-meter--not-interested { color: #dc2626; }
.interest-card__warning { margin: 0.6rem 0 0; font-size: 0.8rem; color: #dc2626; }
/* ----- Edge / Perk strip — in-place expand/collapse ----- */
.edge-popover-host {
display: inline-flex;
align-items: center;
gap: 0.25em;
vertical-align: middle;
cursor: pointer;
}
.edge-popover-host:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Hidden overflow icons: collapsed by default, revealed when host
carries .is-expanded. */
.edge-badges--overflow { display: none; }
.edge-popover-host.is-expanded .edge-badges--overflow {
display: inline-flex;
}
.edge-overflow-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.4em;
min-width: 1.7em;
padding: 0 0.4em;
margin-left: 0.2em;
background: #1a1a1a;
color: var(--fg);
border: 1px solid var(--border);
border-radius: 999px;
font: inherit;
font-size: 0.78em;
font-weight: 600;
line-height: 1;
vertical-align: middle;
}
.edge-popover-host:hover .edge-overflow-pill {
border-color: var(--accent);
color: var(--accent);
}
.edge-popover-host.is-expanded .edge-overflow-pill { display: none; }
/* ===================================================================
* Free-throw easter egg
* =================================================================== */
.free-throw { display: flex; flex-direction: column; gap: 0.75rem; }
.free-throw__header { display: flex; flex-direction: column; gap: 0.15rem; }
.free-throw__header p { margin: 0; }
.free-throw__header .muted { color: var(--muted); font-size: 0.8rem; line-height: 1.35; margin-top: 0.25rem; }
.free-throw__game { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.free-throw__scoreboard {
display: flex;
gap: 1.5rem;
font-weight: 600;
color: var(--fg);
}
.free-throw__canvas {
background: #1a1f2e;
border-radius: 8px;
touch-action: none;
outline: none;
cursor: pointer;
}
.free-throw__hint { color: var(--muted); text-align: center; }
.free-throw__reset { margin-top: 0.25rem; }