MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Hide the "From eSportsAmaze" tagline under the title */
#siteSub,
.page-header__tagline {display: none !important;}
/* Load FontAwesome Icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
/* Hide for everyone (Visitors) */
#ca-viewsource,
#ca-viewsource-sticky-header,
#ca-history,
#ca-edit,
#n-recentchanges,
#t-specialpages,
#p-tb,
#p-cactions,
#citizen-page-more-dropdown,
#ca-ve-edit-sticky-header,
#ca-history-sticky-header,
.citizen-header__item.citizen-drawer,
.mw-portlet-cactions,
.page-actions-menu {
display: none !important;
}
/* Hide magic words that leak into the UI */
.mw-parser-output:contains("__NOCACHE__") {
/* This is hard to target via CSS alone, so we generally hide the container if possible,
but better to just hide the text specifically if wrapped.
Since we can't easily target raw text, we will ensure it doesn't break layout */
}
/* ALTERNATIVE: If the wiki simply prints it, wrap it in a hidden div on the page */
/* ==========================================================
GLOBAL THEME VARIABLES (Button-Aware + System Fallback)
========================================================== */
/* 1. DEFAULT (Light Mode Base) */
:root {
/* Backgrounds */
--bg-page: #ffffff;
--bg-card: #f8f9fa;
--bg-header: #f1f5f9; /* Light Gray Header */
--bg-hover: #f8fafc;
/* Text */
--text-main: #202122;
--text-header: #1e293b; /* Dark Blue-Gray */
--text-muted: #475569;
/* Borders & Dividers */
--border-main: #cbd5e1;
--border-light: #e2e8f0;
--border-thick: #a2a9b1;
/* Infobox Specifics */
--infobox-bg: #f9f9f9;
--infobox-header-bg: #ff9900;
--infobox-header-text: #000000;
--infobox-label: #4a4a4a;
/* Table Specifics */
--bg-table-header: #00509d; /* Deep Navy Blue (Esports Standard) */
--text-table-header: #E6FAFC; /* White Text */
--bg-table-row: #e5e5e5; /* White Row Background */
/* Tabs Variables (Light Mode) */
--tab-bg-active: #ffffff;
--tab-bg-inactive: #f1f5f9;
--tab-border-active: #007bff;
/* CUSTOM HEADER (Adaptive) */
--hero-bg: linear-gradient(135deg, #f8f9fa 0%, #ced4da 100%);
/* Updated for Dark Navy Background */
--hero-text: #1e293b; /* Pure white for the Title */
--hero-link: #f8f9fa; /* Light Slate Gray for Breadcrumbs */
--hero-link-hover: #ced4da; /* White glow on hover */
--hero-border: #00509d; /* A sharper Red (Ruby) to match the dark blue */
--hero-shadow: rgba(0, 0, 0, 0.4); /* Deeper shadow for more depth on dark */
}
/* 2. FORCE DARK MODE (Matches button "night" or "dark") */
html.skin-theme-client-pref-night,
html.skin-citizen-dark,
html[class*="night"] {
/* Backgrounds */
--bg-page: #202122;
--bg-card: #2a2a2a;
--bg-header: #333333; /* Dark Header */
--bg-hover: #3a3a3a;
/* Text */
--text-main: #ffffff;
--text-header: #e2e8f0; /* Light Gray Text */
--text-muted: #cbd5e1;
/* Borders & Dividers */
--border-main: #444444;
--border-light: #555555;
--border-thick: #666666;
/* Infobox Specifics */
--infobox-bg: #202122;
--infobox-header-bg: #333333;
--infobox-header-text: #ffffff;
--infobox-label: #dddddd;
/* Table Specifics */
--bg-table-header: #191919; /* Lighter Slate Blue */
--text-table-header: #E5E5E5; /* Bright White-Gray */
--bg-table-row: #2a2a2a; /* Matches Card Background */
/* Tabs Variables (Dark Mode) */
--tab-bg-active: #202122;
--tab-bg-inactive: #333333;
--tab-border-active: #007bff;
/* CUSTOM HEADER (Adaptive) */
--hero-bg: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
/* Updated for Dark Navy Background */
--hero-text: #ffffff; /* Pure white for the Title */
--hero-link: #3A3A3A; /* Light Slate Gray for Breadcrumbs */
--hero-link-hover: #ffffff; /* White glow on hover */
--hero-border: #ef4444; /* A sharper Red (Ruby) to match the dark blue */
--hero-shadow: rgba(0, 0, 0, 0.4); /* Deeper shadow for more depth on dark */
/* Invert Black Icons to White */
.dark-invert img { filter: invert(1); }
}
/* 3. FORCE LIGHT MODE (Matches button "day" or "light") */
html.skin-theme-client-pref-day,
html.skin-citizen-light,
html[class*="day"] {
--bg-page: #ffffff !important;
--bg-card: #ffffff !important;
--bg-header: #f1f5f9 !important;
--bg-hover: #f8fafc !important;
--text-main: #202122 !important;
--text-header: #1e293b !important;
--text-muted: #475569 !important;
--border-main: #cbd5e1 !important;
--border-light: #e2e8f0 !important;
--border-thick: #a2a9b1 !important;
--infobox-bg: #f9f9f9 !important;
--infobox-header-bg: #ff9900 !important;
--infobox-header-text: #000000 !important;
--infobox-label: #4a4a4a !important;
--bg-table-header: #00509d !important;
--text-table-header: #E6FAFC !important;
--bg-table-row: #e5e5e5 !important;
--tab-bg-active: #ffffff !important;
--tab-bg-inactive: #f1f5f9 !important;
--tab-border-active: #007bff !important;
.dark-invert img { filter: none !important; }
}
/* 4. AUTO MODE (System Settings Fallback) */
@media (prefers-color-scheme: dark) {
html:not(.skin-theme-client-pref-day):not([class*="day"]) {
/* --- Standard Dark Theme Variables --- */
--bg-page: #202122;
--bg-card: #2a2a2a;
--bg-header: #333333;
--bg-hover: #3a3a3a;
--text-main: #ffffff;
--text-header: #e2e8f0;
--text-muted: #cbd5e1;
--border-main: #444444;
--border-light: #555555;
--border-thick: #666666;
--infobox-bg: #202122;
--infobox-header-bg: #333333;
--infobox-header-text: #ffffff;
--infobox-label: #dddddd;
--bg-table-header: #00509d !important;
--text-table-header: #E6FAFC !important;
--bg-table-row: #2a2a2a !important;
--tab-bg-active: #202122;
--tab-bg-inactive: #333333;
--tab-border-active: #007bff;
/* --- HERO HEADER (Copied from Force Dark Mode) --- */
--hero-bg: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
--hero-text: #ffffff; /* White Title */
--hero-link: #3A3A3A; /* Dark Grey Breadcrumbs */
--hero-link-hover: #ffffff; /* White Hover */
--hero-border: #ef4444; /* Red Border */
--hero-shadow: rgba(0, 0, 0, 0.4);
/* --- INVERT BLACK ICONS --- */
.dark-invert img { filter: invert(1); }
/* --- LOGO TOGGLES (Crucial for Infoboxes) --- */
.logo-lightmode { display: none !important; }
.logo-darkmode { display: block !important; }
/* --- STANDINGS LOGO TOGGLES --- */
.logo-light { display: none !important; }
.logo-dark { display: inline-block !important; }
}
}
/* ==========================================================
1. GENERAL TYPOGRAPHY & LAYOUT
========================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-bottom: none;
font-weight: 600;
color: var(--text-main);
}
h2 {
border-bottom: 2px solid var(--border-light);
padding-bottom: 5px;
margin-top: 1.5em;
}
/* ==========================================================
2. STANDARD WIKITABLES & MODERN FLAT TABLES (Unified)
========================================================== */
table.wikitable,
table.flat-table {
background-color: var(--bg-card);
color: var(--text-main);
border: 1px solid var(--border-thick);
border-collapse: separate;
border-spacing: 0;
width: 100%;
border-radius: 6px;
overflow: hidden;
margin: 1em 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
table.wikitable > tr > th,
table.wikitable > * > tr > th,
table.flat-table th {
background-color: var(--bg-header) !important;
color: var(--text-header) !important;
text-align: left;
padding: 12px;
border-bottom: 2px solid var(--border-thick) !important;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td,
table.flat-table td {
padding: 12px;
border-bottom: 1px solid var(--border-light) !important;
color: var(--text-muted);
}
table.wikitable > tr:last-child > td,
table.flat-table tr:last-child td {
border-bottom: none !important;
}
table.wikitable > tr:hover > td,
table.flat-table tr:hover td {
background-color: var(--bg-hover) !important;
}
/* ==========================================================
3a. LEGACY INFOBOX (Keep for now)
========================================================== */
.infobox {
float: right;
clear: right;
width: 300px;
background-color: var(--infobox-bg);
border: 1px solid var(--border-thick);
border-radius: 10px;
overflow: hidden;
padding: 0;
margin: 0 0 1em 1em;
font-size: 90%;
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.infobox-header {
background-color: var(--infobox-header-bg);
color: var(--infobox-header-text);
text-align: center;
font-weight: bold;
padding: 12px 8px;
font-size: 110%;
}
.infobox-image {
text-align: center;
padding: 15px 0;
background-color: var(--bg-card);
border-bottom: 1px solid var(--border-light);
}
.infobox-data-container { padding: 8px; }
.infobox-row {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--border-light);
padding: 6px 0;
}
.infobox-row:last-child { border-bottom: none; }
.infobox-label {
font-weight: 700;
color: var(--infobox-label);
width: 40%;
padding-left: 5px;
}
.infobox-data {
width: 60%;
text-align: right;
padding-right: 5px;
color: var(--text-muted);
}
/* ==========================================================
3b. MODERN FLAT INFOBOX (Fixed Design)
========================================================== */
.flat-infobox {
width: 320px;
float: right;
clear: right;
margin: 0 0 20px 20px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0,0,0,0.08); /* Slightly deeper shadow */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow: hidden;
position: relative;
}
/* 1. Header & Image */
.fib-header {
text-align: center;
padding: 15px;
border-bottom: 1px solid var(--border-light);
background: var(--bg-table-header); /* FIX: Uses Deep Blue Theme Color */
color: #ffffff; /* FIX: White text for contrast */
}
.fib-title {
font-size: 1.15em;
font-weight: 700; /* FIX: Reduced from 800 (Too Heavy) */
color: #ffffff; /* Force white text */
margin-bottom: 10px;
line-height: 1.4;
letter-spacing: 0.3px;
}
.fib-image {
display: flex;
justify-content: center;
align-items: center;
padding: 15px 0;
background: var(--bg-card); /* Reset background for image area */
border-bottom: 1px solid var(--border-light);
}
.fib-image img {
max-width: 180px;
height: auto;
}
/* 2. Key Stats Grid (2 Columns) */
.fib-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.fib-cell {
background: var(--bg-card);
padding: 12px 10px; /* More breathing room */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.fib-label-sm {
font-size: 0.7em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 4px;
letter-spacing: 0.5px;
}
.fib-value-sm {
font-size: 0.95em;
font-weight: 600;
color: var(--text-main);
}
/* 3. Main Data List */
.fib-list {
padding: 15px 20px;
}
.fib-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px; /* Increased spacing */
font-size: 0.9em;
border-bottom: 1px solid var(--border-light);
padding-bottom: 8px;
}
.fib-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fib-label { color: var(--text-muted); font-weight: 600; }
.fib-data { color: var(--text-main); font-weight: 600; text-align: right; max-width: 60%; line-height: 1.3;}
/* 4. Prize Pool Section (Fixed Color) */
.fib-prize {
text-align: center;
padding: 15px;
background: var(--bg-hover);
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.fib-prize-val {
font-family: 'Consolas', monospace;
font-size: 1.5em;
font-weight: 700;
/* FIX: Changed from Neon Green to Professional Dark Green */
color: #0d9488; /* Teal/Sea Green looks premium */
letter-spacing: -0.5px;
}
/* 5. Navigation Footer (Fixed Arrows) */
.fib-nav {
display: flex;
border-top: 1px solid var(--border-light);
}
.fib-nav-btn {
flex: 1;
text-align: center;
padding: 12px 10px;
font-size: 0.85em;
font-weight: 700;
color: var(--text-muted);
background: var(--bg-header);
text-decoration: none !important;
transition: background 0.2s, color 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px; /* Space between arrow and text */
}
.fib-nav-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.fib-nav-btn.prev { border-right: 1px solid var(--border-light); }
/* ==========================================================
6. SOCIAL ICONS (File Upload Method)
========================================================== */
.fib-socials {
display: flex;
justify-content: center;
gap: 15px;
padding: 15px;
background: var(--bg-card);
border-top: 1px solid var(--border-light);
}
/* Style the images inside the link */
.fib-socials img {
opacity: 0.6;
transition: opacity 0.2s, transform 0.2s;
display: block;
}
.fib-socials img:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Remove default external link icon for these images */
.fib-socials a.external {
background-image: none !important;
padding-right: 0 !important;
}
/* ==========================================================
4. TEAM CARDS & PARTICIPANTS GRID
========================================================== */
.participant-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
}
.team-card, .flat-card {
background-color: var(--bg-card);
border: 1px solid var(--border-main);
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
transition: transform 0.2s ease-in-out;
}
.team-card { width: 150px; }
.flat-card { width: 220px; }
.team-card:hover, .flat-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.team-card-header, .flat-card-header {
background-color: var(--bg-header);
color: var(--text-header);
padding: 12px;
font-weight: 700;
text-align: center;
border-bottom: 2px solid var(--border-main);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 180px;
gap: 8px;
}
.team-card-players, .flat-card-body {
padding: 8px 12px;
font-size: 0.95em;
color: var(--text-muted);
line-height: 1.6em;
}
.player-row {
padding: 6px 0;
border-bottom: 1px solid var(--border-light);
}
.player-row:last-child { border-bottom: none; }
/* Player Card Header (Images) */
.player-card-header {
background-color: var(--bg-header);
color: var(--text-header);
height: 180px;
border-bottom: 2px solid var(--border-main);
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
}
.player-card-header img {
height: 100% !important;
width: auto !important;
max-width: 100%;
object-fit: contain;
object-position: top center;
}
/* ==========================================================
5. MODERN TEAM HISTORY TABLE
========================================================== */
.modern-history-table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
margin-top: 10px;
background-color: var(--bg-card);
}
.modern-history-table thead th {
background-color: #222;
color: #fff;
text-align: center;
padding: 12px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9em;
border-bottom: 3px solid #ff4444;
}
.modern-history-table tbody td {
padding: 12px 15px;
border-bottom: 1px solid var(--border-light);
color: var(--text-muted);
}
.modern-history-table tbody tr:hover { background-color: var(--bg-hover); }
/* ==========================================================
6. UTILITY: AUTO-RANK & MOBILE
========================================================== */
.auto-rank table { counter-reset: row-rank; }
.auto-rank tbody tr { counter-increment: row-rank; }
.auto-rank td:first-child::before {
content: counter(row-rank);
font-weight: bold;
color: var(--text-muted);
}
.auto-rank td:first-child { text-align: center; width: 30px; }
.custom-standings { counter-reset: team-rank; }
.custom-standings tr.rank-row { counter-increment: team-rank; }
.custom-standings tr.rank-row td:first-child::before {
content: counter(team-rank);
font-weight: bold;
color: var(--text-muted);
}
@media screen and (max-width: 720px) {
.nomobile { display: none; }
.infobox { float: none; width: auto; margin: 1em 0; }
}
.team-logo a.new {display: none;}
/* Main Page Grid System */
.mp-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.mp-column-left { flex: 2; min-width: 300px; }
.mp-column-right { flex: 1; min-width: 250px; }
/* Game Selection Cards */
.game-card {
background: var(--bg-card);
color: var(--text-main);
border: 1px solid var(--border-light);
border-left: 5px solid #ff4d4d;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.game-card:hover {
transform: translateY(-3px);
background-color: var(--bg-hover);
}
.section-header {
border-bottom: 2px solid #ff4d4d;
font-size: 1.5em;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 5px;
}
/* Sidebar List Styling */
.mp-sidebar-list ol { padding-left: 20px; margin-top: 5px; }
.mp-sidebar-list li {
margin-bottom: 8px;
font-size: 0.95em;
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.mp-sidebar-list .mw-newpages-time,
.mp-sidebar-list .mw-newpages-history,
.mp-sidebar-list .mw-userlink,
.mp-sidebar-list .mw-usertoollinks,
.mp-sidebar-list .mw-newpages-length {
display: none !important;
}
/* Plain Links */
.plainlinks a.external {
background: none !important;
padding-right: 0 !important;
color: inherit !important;
text-decoration: none !important;
}
.social-card a.external {
display: flex !important;
width: 100% !important;
justify-content: space-between !important;
align-items: center !important;
box-sizing: border-box !important;
color: inherit !important;
text-decoration: none !important;
}
/* ==========================================================
TEAM CARD ROSTER OVERLAY
========================================================== */
.team-card { position: relative; }
.team-card-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.85);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
padding: 10px;
box-sizing: border-box;
pointer-events: none;
backdrop-filter: blur(2px);
}
.team-card:hover .team-card-overlay { opacity: 1; }
.team-card-overlay ul {
list-style: none;
padding: 0; margin: 0;
text-align: center;
font-size: 0.9em;
line-height: 1.4em;
}
.team-card-overlay li {
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 2px 0;
}
.team-card-overlay li:last-child { border-bottom: none; }
.img-fit img {
width: 100%; height: 100%;
object-fit: contain;
padding: 10px;
box-sizing: border-box;
}
/* ==========================================================
ROSTER CARD: PC & MOBILE
========================================================== */
.roster-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: flex-start;
}
/* PC STYLES */
.roster-card {
width: 175px;
height: 250px !important;
background-color: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
overflow: hidden;
margin: 0;
display: flex;
flex-direction: column;
}
.roster-header {
height: 48px;
flex: 0 0 48px;
background-color: var(--bg-header);
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.header-content { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.roster-logo { width: 36px; height: 36px; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
.roster-logo img { width: 100%; height: 100%; object-fit: contain; }
.roster-name { font-weight: 800; font-size: 0.8em; text-align: center; line-height: 1.1; color: var(--text-header); }
.roster-subheader {
height: 22px;
flex: 0 0 22px;
background-color: var(--bg-hover);
color: var(--text-muted);
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
}
.roster-content-rows { flex: 1; display: flex; flex-direction: column; width: 100%; }
.roster-players-inner, .roster-staff-inner { display: contents; }
.roster-row {
flex: 1; width: 100%;
display: flex; align-items: center; justify-content: center;
text-align: center;
border-bottom: 1px solid var(--border-light);
font-size: 0.8em; font-weight: 600;
color: var(--text-main);
padding: 0 2px;
}
.roster-row.staff {
background-color: var(--bg-hover);
color: var(--text-muted);
font-size: 0.75em; font-weight: normal;
}
.roster-content-rows > :last-child > :last-child { border-bottom: none; }
/* MOBILE OVERRIDE */
@media screen and (max-width: 720px) {
.roster-card {
width: 100%; height: auto !important;
display: grid; grid-template-columns: 1fr 1fr 1fr;
border-radius: 8px;
border: 1px solid var(--border-light);
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.roster-content-rows { display: contents; }
.roster-header {
grid-column: 1 / 3; grid-row: 1; height: 50px;
flex: none; justify-content: flex-start;
padding-left: 15px; font-size: 1.1em; border-bottom: none;
}
.roster-name { text-align: left; }
.roster-staff-inner {
display: flex; grid-column: 3 / 4; grid-row: 1; height: 50px;
background-color: var(--bg-header);
border-left: 1px solid var(--border-light);
align-items: center; justify-content: center;
flex-direction: row; flex-wrap: wrap;
font-size: 0.8em; padding: 0 4px; z-index: 2;
}
.roster-row.staff {
flex: none; width: auto; border: none; background: transparent; padding: 0; margin: 0;
}
.roster-row.staff + .roster-row.staff::before { content: ", "; margin-right: 3px; }
.roster-subheader {
grid-column: 1 / 4; grid-row: 2; height: 25px; flex: none;
background-color: var(--bg-hover);
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.roster-players-inner {
grid-column: 1 / 4; display: flex; flex-wrap: wrap; width: 100%;
}
.roster-row.player {
height: 40px; display: flex; align-items: center; justify-content: center;
border-right: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
box-sizing: border-box; flex: none;
}
.count-4 .roster-row.player { width: 50%; }
.count-4 .roster-row.player:nth-child(2n) { border-right: none; }
.count-5 .roster-row.player:nth-child(-n+3) { width: 33.333%; }
.count-5 .roster-row.player:nth-child(3) { border-right: none; }
.count-5 .roster-row.player:nth-child(n+4) { width: 50%; }
.count-5 .roster-row.player:nth-child(5) { border-right: none; }
.count-6 .roster-row.player { width: 33.333%; }
.count-6 .roster-row.player:nth-child(3n) { border-right: none; }
.count-3 .roster-row.player, .count-2 .roster-row.player, .count-1 .roster-row.player { width: 33.333%; }
.count-3 .roster-row.player:last-child { border-right: none; }
.roster-players-inner { border-bottom: none; }
.roster-card > :last-child, .roster-players-inner > :last-child { border-bottom: none; }
}
/* Filter Buttons */
.filter-group {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; align-items: center;
}
.filter-label { font-weight: bold; margin-right: 5px; color: var(--text-header); }
.filter-btn {
padding: 6px 12px;
background-color: #f8f9fa !important;
border: 1px solid #ddd !important;
color: #333 !important;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
user-select: none;
transition: all 0.2s;
}
.filter-btn:hover { background-color: #e2e6ea !important; }
.filter-btn.active {
background-color: #0056b3 !important;
color: #ffffff !important;
border-color: #004494 !important;
font-weight: bold;
}
.standings-system { display: flex; flex-direction: column; gap: 10px; }
.filterable-content[style*="display:none"],
.filterable-content[style*="display: none"] {
display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important;
}
.standings-wrapper .filter-group { margin-bottom: 8px; }
/* Mobile Only */
.mobile-only {display: none !important;}
@media screen and (max-width: 720px) { .mobile-only { display: inline-block !important; } }
/* ==========================================================
MATCH STANDINGS CARDS (Light/Dark Mode Aware)
========================================================== */
.match-card-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 6px;
font-family: 'Segoe UI', sans-serif;
counter-reset: team-rank;
}
.match-card-row td {
background-color: var(--bg-card);
color: var(--text-main);
padding: 10px;
vertical-align: middle;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
}
.match-card-row td:first-child {
border-radius: 8px 0 0 8px;
border-left: 1px solid var(--border-light);
}
.match-card-row td:last-child {
border-radius: 0 8px 8px 0;
border-right: 1px solid var(--border-light);
}
.rank-cell {
border-left: 5px solid #eab308 !important;
text-align: center;
font-weight: bold;
color: var(--text-main);
min-width: 30px;
}
.rank-cell::before { content: "#" counter(team-rank); font-size: 14px; font-weight: 800; }
.match-card-row { counter-increment: team-rank; }
.match-card-row[style*="display:none"],
.match-card-row[style*="display: none"] { counter-increment: none; }
.team-cell { text-align: left; font-weight: 600; }
.team-cell a { color: var(--text-main); text-decoration: none; }
.grp-cell, .map-cell, .pts-cell, .data-cell { text-align: center; color: var(--text-muted); }
.trophy-cell { text-align: center; font-size: 1.2em; }
.standings-table .total-cell {
display: table-cell; vertical-align: middle !important; text-align: center !important;
font-weight: 800; font-size: 1.1em;
color: var(--text-header);
background-color: var(--bg-hover);
width: 70px; border-radius: 0 6px 6px 0;
}
.standings-table td { vertical-align: middle !important; text-align: center; }
.standings-table .team-cell { text-align: left !important; }
.match-card-table tr:first-child {
background-color: var(--bg-header) !important;
color: var(--text-muted) !important;
}
.match-card-table th { color: var(--text-muted) !important; border: none !important; }
/* Qualification Borders */
.rank-cell { border-left: 5px solid #3b82f6 !important; }
.match-card-row:first-child .rank-cell { border-left-color: #eab308 !important; }
.qual-yes .rank-cell { border-left-color: #22c55e !important; }
.qual-no .rank-cell { border-left-color: #ef4444 !important; opacity: 0.6; }
.qual-mid .rank-cell { border-left-color: #3b82f6 !important; }
.qual-grey .rank-cell { border-left-color: #94a3b8 !important; }
a.new, a.new:visited { color: var(--text-main, #202122) !important; text-decoration: none !important; }
a.new:hover { color: var(--text-main, #202122) !important; text-decoration: underline !important; cursor: text; }
/* Theme Toggle Logos */
.logo-darkmode { display: none !important; }
html.skin-theme-client-pref-night .logo-darkmode,
html.skin-citizen-dark .logo-darkmode,
html[class*="night"] .logo-darkmode { display: block !important; }
html.skin-theme-client-pref-night .logo-lightmode,
html.skin-citizen-dark .logo-lightmode,
html[class*="night"] .logo-lightmode { display: none !important; }
.match-card-row { list-style-type: none !important; list-style: none !important; }
.match-card-row::marker { content: none !important; display: none !important; }
/* ==========================================================
STANDINGS V2 (Floating Card Design)
========================================================== */
.standings-wrapper {
overflow-x: auto; width: 100%; margin-bottom: 20px; padding-bottom: 10px;
}
.standings-card-table {
width: 100%; border-collapse: separate; border-spacing: 0 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
min-width: 1000px;
}
.standings-card-table th {
background: var(--bg-header); color: var(--text-muted);
font-size: 0.8em; text-transform: uppercase; padding: 10px;
font-weight: 700; border: none; text-align: center;
}
.standings-row td {
background-color: var(--bg-card); color: var(--text-main);
padding: 0 10px; height: 50px; vertical-align: middle;
border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
white-space: nowrap; text-align: center;
}
.standings-row td:first-child {
border-left: 1px solid var(--border-light);
border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
.standings-row td:last-child {
border-right: 1px solid var(--border-light);
border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}
/* Sticky Columns */
.sticky-col { position: sticky; z-index: 10; background-color: var(--bg-card); }
.standings-card-table th.sticky-col { background-color: var(--bg-header); z-index: 11; }
.sticky-1 {
left: 0; width: 50px; min-width: 50px; max-width: 50px; /* Widened by 10px */
border-right: 1px solid var(--border-light) !important; text-align: center;
font-size: 0.9em; /* Shrunk text slightly */
}
.sticky-2 {
left: 50px; width: 250px; min-width: 250px; max-width: 250px; /* Shifted 10px right */
text-align: left !important; box-shadow: 2px 0 5px rgba(0,0,0,0.05);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-3 {
left: 300px; width: 60px; /* Base shifted right */
border-left: 1px solid var(--border-light) !important;
box-shadow: 4px 0 5px -2px rgba(0,0,0,0.1);
font-weight: 900; font-size: 1.1em; color: #0056b3;
}
/* Qualification Colors */
.standings-row td.qual-q { border-left: 5px solid #28a745 !important; }
.standings-row td.qual-q2 { border-left: 5px solid #007bff !important; }
.standings-row td.qual-q3 { border-left: 5px solid #6f42c1 !important; }
.standings-row td.qual-e { border-left: 5px solid #dc3545 !important; }
.standings-row td.qual-d { border-left: 5px solid #343a40 !important; }
.standings-row td.qual-n { border-left: 5px solid #adb5bd !important; }
.standings-row td.qual-default { border-left: 5px solid var(--border-light) !important; }
/* Cell Specifics */
.team-name-cell {
display: flex; align-items: center; gap: 10px;
border: none !important; border-top: 1px solid var(--border-light) !important;
border-bottom: 1px solid var(--border-light) !important;
}
.team-name-cell img { display: block; }
.team-name-cell span { font-weight: 600; font-size: 0.95em; color: var(--text-main); }
.total-points-cell {
font-weight: 800; font-size: 1em; color: #0056b3; background-color: var(--bg-hover) !important;
}
.match-cell { color: var(--text-muted); text-align: center; padding: 0 6px; background: none !important; }
.match-cell sub { color: #999; margin-left: 2px; font-size: 0.7em; }
.match-win { color: #b45309; font-weight: 900; background: none !important; }
.high-score { background-color: transparent !important; color: #155724; background: none !important; }
.dim-text { color: #e0e0e0; }
.logo-dark { display: none !important; }
.logo-light { display: inline-block !important; }
html.skin-theme-client-pref-night .logo-dark,
html.skin-citizen-dark .logo-dark { display: inline-block !important; }
html.skin-theme-client-pref-night .logo-light,
html.skin-citizen-dark .logo-light { display: none !important; }
/* Mobile Standings */
@media screen and (max-width: 768px) {
.pc-only { display: none !important; }
.mobile-only { display: table-cell !important; }
.standings-card-table { min-width: auto !important; width: max-content; }
.sticky-1 {
left: 0; width: 40px; min-width: 40px; max-width: 40px; /* Widened by 10px */
border-right: 1px solid var(--border-light) !important; z-index: 20 !important;
font-size: 0.85em; /* Shrunk text slightly */
}
.sticky-2 {
left: 40px; width: 100px; min-width: 100px; max-width: 100px; /* Shifted 10px right */
text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
box-shadow: 2px 0 5px rgba(0,0,0,0.05); z-index: 20 !important;
}
th.mobile-only, td.mobile-only {
width: 30px; min-width: 30px; max-width: 30px; padding: 0 2px !important; box-sizing: border-box;
}
.sticky-3 {
left: 140px; width: 45px; min-width: 45px; max-width: 45px; /* Shifted 10px right */
border-left: 1px solid var(--border-light) !important; background-color: var(--bg-hover) !important;
z-index: 20 !important; box-shadow: 4px 0 5px -2px rgba(0,0,0,0.1);
}
.standings-row td { height: 40px; font-size: 0.85em; }
.team-name-cell img { width: 18px !important; height: auto; }
}
.standings-legend {
display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; padding: 0 5px; font-family: 'Segoe UI', sans-serif; font-size: 0.9em;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-color { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-text { color: var(--text-muted); font-weight: 600; }
.legend-color.qual-q { background-color: #28a745; }
.legend-color.qual-q2 { background-color: #007bff; }
.legend-color.qual-q3 { background-color: #6f42c1; }
.legend-color.qual-e { background-color: #dc3545; }
.legend-color.qual-d { background-color: #343a40; }
.legend-color.qual-n { background-color: #adb5bd; }
/* ==========================================================
MATCH SCHEDULE STYLES
========================================================== */
.schedule-card {
background-color: var(--bg-card); border: 1px solid var(--border-light);
border-radius: 8px; margin-bottom: 15px; overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--text-main);
}
.schedule-header {
background-color: var(--bg-header); padding: 12px 15px;
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background 0.2s;
}
.schedule-header:hover { background-color: var(--bg-hover); }
.schedule-title { font-weight: 700; font-size: 1.1em; color: var(--text-header); }
.schedule-date { color: var(--text-muted); font-size: 0.9em; }
.schedule-table {
width: 100%; border-collapse: collapse; font-size: 0.95em; background-color: var(--bg-card);
}
.schedule-table th {
text-align: left; padding: 10px 15px; color: var(--text-muted); font-size: 0.85em;
text-transform: uppercase; border-bottom: 2px solid var(--border-light); background-color: var(--bg-card);
}
.schedule-row td { padding: 12px 15px; border-bottom: 1px solid var(--border-light); color: var(--text-main); }
.schedule-row:last-child td { border-bottom: none; }
.col-match { font-weight: bold; width: 50px; color: var(--text-header); }
.col-time { font-family: monospace; font-weight: 600; width: 100px; color: var(--text-muted); }
.col-winner { color: #22c55e; font-weight: 600; }
.map-badge {
display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.85em;
font-weight: 600; color: #fff; background: #666; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.map-erangel { background: #568c2c; }
.map-miramar { background: #d48e4a; }
.map-sanhok, .map-rondo { background: #4a9e85; }
.map-vikendi { background: #5b8db8; }
.schedule-card.schedule-complete { opacity: 0.75; border-color: var(--border-light); }
.schedule-card.schedule-complete .schedule-header { background-color: var(--bg-hover); color: var(--text-muted); }
.status-badge {
display: inline-block; background-color: #adb5bd; color: #fff; font-size: 0.7em;
padding: 2px 6px; border-radius: 4px; margin-left: 10px; text-transform: uppercase; font-weight: 600; vertical-align: middle;
}
.schedule-card.schedule-complete:hover { opacity: 1; transition: opacity 0.3s ease; }
/* ==========================================================
MODERN PRIZE POOL & AWARDS
========================================================== */
.prize-section-grid {
display: grid; grid-template-columns: 2fr 1.2fr; gap: 25px; margin-top: 20px; align-items: start;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.prize-header {
font-size: 1.1em; font-weight: 700; color: var(--text-header);
margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px;
border-left: 4px solid var(--border-thick); padding-left: 10px;
}
.prize-list {
background: var(--bg-card); border: 1px solid var(--border-light);
border-radius: 12px; padding: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.prize-row {
display: flex; align-items: center; gap: 15px; padding: 12px 10px;
border-bottom: 1px solid var(--border-light); transition: background 0.2s, transform 0.2s;
border-radius: 6px; font-size: 0.95em;
}
.prize-row:last-child { border-bottom: none; }
.prize-row:hover { background-color: var(--bg-hover); transform: translateX(4px); }
.pz-rank {
width: 40px; min-width: 40px; white-space: nowrap; font-weight: 700;
color: var(--text-muted); text-align: center; font-size: 0.9em;
}
.rank-1 .pz-rank { font-size: 1.2em; }
.rank-2 .pz-rank, .rank-3 .pz-rank { font-size: 1.0em; }
.pz-team {
flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-main);
}
.pz-team img { height: 24px; width: auto; object-fit: contain; }
.pz-info {
text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.pz-prize {
font-family: 'Consolas', 'Monaco', monospace; font-weight: 700;
color: var(--text-main); background: var(--bg-header); padding: 2px 8px;
border-radius: 4px; font-size: 0.9em;
}
.pz-seed {
font-size: 0.75em; background: #007bff; color: #fff; padding: 2px 6px;
border-radius: 4px; text-transform: uppercase; font-weight: 600; display: inline-block;
}
.pz-seed a {
color: #ffffff !important;
text-decoration: none;
}
.pz-seed a:hover {
text-decoration: underline;
color: #ffffff !important;
}
.award-row {
display: flex; align-items: center; justify-content: space-between;
padding: 15px 10px; border-bottom: 1px solid var(--border-light);
}
.award-info { display: flex; flex-direction: column; gap: 2px; }
.award-name { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.award-winner { font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
.award-winner img { height: 24px !important; width: auto !important; object-fit: contain; }
.award-prize {
font-family: 'Consolas', 'Monaco', monospace; font-weight: 700;
color: var(--text-main); background: var(--bg-header); padding: 2px 8px;
border-radius: 4px; font-size: 0.9em;
}
.prize-show-more {
width: 100%; text-align: center; padding: 10px; background: var(--bg-header);
color: var(--text-muted); font-weight: 600; cursor: pointer; border-radius: 0 0 12px 12px;
font-size: 0.9em; margin-top: -10px; border: 1px solid var(--border-light);
border-top: none; transition: background 0.2s; user-select: none;
}
.prize-show-more:hover { background: var(--bg-hover); color: var(--text-main); }
.prize-show-more.mw-collapsed { display: none !important; }
.prize-empty {
text-align: center; padding: 30px; color: var(--text-muted);
background: var(--bg-card); border: 2px dashed var(--border-light); border-radius: 12px;
}
.prize-empty i { font-size: 2em; margin-bottom: 10px; opacity: 0.5; }
@media screen and (max-width: 768px) { .prize-section-grid { grid-template-columns: 1fr; } }
/* ==========================================================
TOURNAMENT LIST STYLES
========================================================== */
.tournament-list-wrapper { display: flex; flex-direction: column; gap: 10px; /* Space between cards */ margin-top: 20px;}
.tourney-row { display: flex; align-items: center; gap: 15px; padding: 12px 15px; margin-bottom: 8px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: transform 0.2s, box-shadow 0.2s; color: var(--text-main) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
.tourney-row:hover { transform: translateX(4px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); background: var(--bg-hover); border-color: #cbd5e1;}
.tr-date { width: 110px; font-size: 0.85em; font-weight: 600; color: var(--text-muted); font-family: 'Consolas', monospace; text-align: center; background: var(--bg-header); border-color: var(--border-light) !important; padding: 6px 4px; border-radius: 4px; line-height: 1.2;}
.tr-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tr-name { font-weight: 700; font-size: 1.05em; color: var(--text-main); line-height: 1.2;}
.tr-name a { color: var(--text-main); text-decoration: none; }
.tr-name a:hover { color: #007bff; }
.tr-org { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-top: 2px; }
.tr-winner { width: 180px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9em; color: var(--text-main);}
.tr-winner .tr-logo img { height: 24px; width: auto; object-fit: contain; }
.tr-prize {
/* Box Model */
min-width: 120px;
padding: 6px 12px;
border-radius: 6px;
margin-left: auto;
/* Colors & Border */
background: var(--bg-header) !important;
border: 1px solid var(--border-light);
/* Typography */
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.85em;
font-weight: 700;
color: var(--text-header) !important;
text-align: center;
white-space: nowrap;
line-height: 1.2;
}
.tr-compact { padding: 8px 12px; }
.tr-compact .tr-date { width: 90px; font-size: 0.8em; }
.tr-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
.tier-badge { font-size: 0.7em !important; padding: 2px 6px !important; vertical-align: middle;}
.tr-event-logo-col { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; margin-right: 15px;}
.tr-event-logo-col img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* ==========================================================
MOBILE RESPONSE: FLAT INFOBOX (FORCE 100% WIDTH)
========================================================== */
@media screen and (max-width: 768px) {
/* Tournament List Tweaks */
.tourney-row { flex-wrap: wrap; padding: 12px; }
.tr-winner { display: none; }
.tr-date { width: 100%; margin-right: 0; margin-bottom: 10px; display: flex; justify-content: center; }
.tr-prize { margin-top: 5px; width: 100%; min-width: auto; }
/* FLAT INFOBOX 100% WIDTH FIX */
.flat-infobox {
width: 100% !important;
min-width: 100% !important;
float: none !important;
margin: 0 0 15px 0 !important;
box-sizing: border-box !important;
}
}
/* ==========================================================
PAGE LAYOUT: TOURNAMENT DASHBOARD
========================================================== */
/* 1. Hero Header */
.esports-header {
background: linear-gradient(135deg, #00509d 0%, #002a5c 100%);
color: white;
padding: 30px 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0, 80, 157, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
}
.eh-title {
font-size: 2em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
.eh-subtitle {
font-size: 0.9em;
opacity: 0.8;
margin-top: 5px;
font-weight: 500;
}
/* ==========================================================
PAGINATION BUTTONS
========================================================== */
.pagination-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
margin-bottom: 20px;
clear: both;
}
.page-btn {
display: inline-block;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-weight: 700;
font-size: 0.9em;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.page-btn a {
display: block;
padding: 10px 24px;
color: #334155 !important;
text-decoration: none !important;
}
.page-btn:hover {
background: #00509d;
border-color: #00509d;
transform: translateY(-2px);
}
.page-btn:hover a {
color: white !important;
}
/* ==========================================================
FINAL FIXED HEADER (LEFT PINNED & VERTICALLY CENTERED)
========================================================== */
/* THE TEXT (Title & Breadcrumbs) */
.mw-body-header .firstHeading,
#mw-content-subtitle,
.mw-body-header #contentSub,
.mw-body-header .subpages {
color: var(--hero-text) !important; /* All header text forced to white */
}
/* TITLE SPECIFIC */
.mw-body-header .firstHeading {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 700 !important;
font-size: 1.4rem !important;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.1;
}
/* BREADCRUMBS BOX (The Tag Look) */
#mw-content-subtitle,
.mw-body-header #contentSub,
.mw-body-header .subpages {
display: inline-block !important;
background: var(--hero-link) !important;
font-size: 0.7rem !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2px 8px !important;
border-radius: 4px;
margin-top: 6px !important;
}
/* ALL ICONS & ACTION BUTTONS */
.mw-body-header .citizen-page-actions-list-item a,
.mw-body-header .citizen-page-actions-list-item button,
.mw-body-header .mw-ui-icon,
.mw-body-header .citizen-page-actions-list-item__label {
color: var(--hero-text) !important;
fill: var(--hero-text) !important;
opacity: 1 !important;
}
/* MOBILE FIX */
@media screen and (max-width: 768px) {
.mw-body-header .firstHeading { font-size: 0.9rem !important;
align-items: center !important;
align-content: center !important;
text-align:center !important;}
}
/* Alternative: If you want to keep other sub-content but ONLY hide the redirect line */
.mw-redirectedfrom {
display: none !important;
}
/* ==========================================================
TEAM PAGE: HERO ROSTER GRID (Independent Styles)
========================================================== */
/* The Grid Container */
.hero-roster-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
margin-top: 15px;
}
/* The Individual Player Card */
.hero-player-card {
width: 160px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
}
.hero-player-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
border-color: var(--hero-border);
}
/* Card Image Area (Top) */
/* 1. The Square Box */
.hero-card-image {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
background: linear-gradient(to bottom, var(--bg-header) 0%, var(--bg-card) 100%);
overflow: hidden;
position: relative;
/* Remove flex alignment, we will handle it in the img tag */
display: block !important;
padding: 10px !important;
box-sizing: border-box !important;
}
/* 2. The Image (Forced to be a Square Block) */
.hero-card-image img {
/* Step 1: Force the <img> tag to be the exact size of the box */
width: 100% !important;
height: 100% !important;
/* Step 2: Use internal rendering to scale the pixels */
object-fit: contain !important; /* Shrink photo until fully visible */
/* Step 3: Align the pixels to the bottom */
object-position: bottom center !important;
/* Reset other properties */
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.hero-player-card:hover .hero-card-image img {
transform: scale(1.05);
}
/* Card Info Area (Bottom) */
.hero-card-body {
padding: 12px 10px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* Role Badge */
.hero-role-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 0.7em;
font-weight: 700;
color: white;
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
/* Player ID */
.hero-player-id {
font-weight: 800;
font-size: 1.15em;
color: var(--text-header);
line-height: 1.1;
margin-bottom: 4px;
}
.hero-player-id a {
color: inherit;
text-decoration: none;
}
/* Real Name */
.hero-player-name {
font-size: 0.85em;
color: var(--text-muted);
margin-bottom: 8px;
line-height: 1.2;
}
/* Flag */
.hero-player-flag {
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.85em;
color: var(--text-muted);
}
.hero-player-flag img {
width: 18px !important;
height: auto !important;
display: inline-block !important;
vertical-align: middle !important;
border: none !important;
margin-right: 4px !important;
}
/* MOBILE: 2 Cards per row */
@media screen and (max-width: 768px) {
.hero-player-card {
width: calc(50% - 8px);
}
}
/* ==========================================================
MODERN FLAT DATA TABLE (For Former Players/History)
========================================================== */
.flat-data-table {
/* CHANGED: width: 100% -> width: auto */
width: auto !important;
/* ADDED: Ensures it fills the space next to infobox without dropping */
min-width: 50%;
display: table;
border-collapse: separate;
border-spacing: 0;
background-color: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
margin-top: 15px;
margin-bottom: 20px; /* Add breathing room at bottom */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Ensure it doesn't touch the text */
.flat-data-table + .flat-data-table {
margin-top: 20px;
}
/* Header Row */
.flat-data-table th {
background-color: var(--bg-header) !important; /* Light gray header */
color: var(--text-muted) !important;
text-transform: uppercase;
font-size: 0.75em;
font-weight: 700;
letter-spacing: 0.5px;
padding: 15px 20px;
border-bottom: 2px solid var(--border-light);
text-align: left;
}
/* Data Rows */
.flat-data-table td {
padding: 15px 20px; /* Spacious padding */
border-bottom: 1px solid var(--border-light);
color: var(--text-main);
font-size: 0.95em;
vertical-align: middle;
transition: background 0.2s;
}
/* Row Hover Effect */
.flat-data-table tr:hover td {
background-color: var(--bg-hover);
}
/* Remove border from last row */
.flat-data-table tr:last-child td {
border-bottom: none;
}
/* Typography Specifics */
.flat-data-table .t-id {
font-weight: 700;
color: var(--text-header);
font-size: 1.05em;
}
.flat-data-table .t-role {
display: inline-block;
padding: 2px 8px;
background: var(--bg-header);
border-radius: 4px;
font-size: 0.85em;
color: var(--text-muted);
font-weight: 600;
border: 1px solid var(--border-light);
}
.flat-data-table .t-date {
font-family: 'Consolas', monospace;
color: var(--text-muted);
font-size: 0.9em;
}
/* Mobile: Horizontal Scroll if needed */
@media screen and (max-width: 768px) {
.flat-data-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* ==========================================================
ACHIEVEMENTS TABLE (Trophy Case)
========================================================== */
.achievements-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
overflow: hidden;
margin-top: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.achievements-table th {
background-color: var(--bg-header);
color: var(--text-muted);
font-size: 0.75em;
font-weight: 700;
text-transform: uppercase;
padding: 12px 15px;
text-align: left;
border-bottom: 2px solid var(--border-light);
}
.achievements-table td {
padding: 12px 15px;
border-bottom: 1px solid var(--border-light);
color: var(--text-main);
font-size: 0.95em;
vertical-align: middle;
}
.achievements-table tr:hover td { background-color: var(--bg-hover); }
/* RANK BADGES */
.ac-place { width: 60px; text-align: center; }
.place-badge {
display: inline-block; padding: 4px 0; width: 40px; text-align: center;
border-radius: 4px; color: #fff; font-weight: 800; font-size: 0.9em;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.place-1 { background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%); color: #785c00; border: 1px solid #eec900; }
.place-2 { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); color: #555; border: 1px solid #ccc; }
.place-3 { background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%); color: #fff; border: 1px solid #b36b29; }
.place-def { background: var(--bg-header); color: var(--text-muted); border: 1px solid var(--border-light); }
/* PRIZE MONEY */
.ac-prize {
font-family: 'Consolas', monospace;
font-weight: 700;
color: #059669; /* Money Green */
text-align: right;
}
/* ==========================================================
ACHIEVEMENTS TABLE UPDATES & TIER BADGES
========================================================== */
/* Date Column */
.ac-date {
font-family: 'Consolas', monospace;
color: var(--text-muted);
font-size: 0.85em;
white-space: nowrap;
}
/* ==========================================================
MASTER TIER COLOR SYSTEM (Unified & Forced)
========================================================== */
:root {
/* 1. DEFINE YOUR COLORS HERE */
/* Change these hex codes to whatever you want, and it will update EVERYWHERE */
--tier-s-color: #d32f2f; /* Red */
--tier-a-color: #00509d; /* Blue */
--tier-b-color: #0d9488; /* Teal */
--tier-c-color: #64748b; /* Gray */
--tier-d-color: #475569; /* Slate */
}
/* 2. TEAM PAGE BADGES (Backgrounds) */
.tier-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
min-width: 40px;
background-color: var(--tier-d-color) !important; /* Default fallback */
color: #fff !important;
}
/* We use specific chaining (.tier-badge.tier-x) to be "stronger" than other styles */
.tier-badge.tier-s { background-color: var(--tier-s-color) !important; }
.tier-badge.tier-a { background-color: var(--tier-a-color) !important; }
.tier-badge.tier-b { background-color: var(--tier-b-color) !important; }
.tier-badge.tier-c { background-color: var(--tier-c-color) !important; }
.tier-badge.tier-def { background-color: var(--tier-d-color) !important; }
/* 3. TOURNAMENT PAGE STRIPS (Left Borders) */
.tourney-row {
border-left: 5px solid var(--border-light); /* Default fallback */
}
.row-tier-s { border-left-color: var(--tier-s-color) !important; }
.row-tier-a { border-left-color: var(--tier-a-color) !important; }
.row-tier-b { border-left-color: var(--tier-b-color) !important; }
.row-tier-c { border-left-color: var(--tier-c-color) !important; }
/* ==========================================================
DATABASE LISTS (Players & Teams)
========================================================== */
.db-list-container {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 20px;
}
.db-row {
display: flex;
align-items: center;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 12px 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.db-row:hover {
transform: translateX(4px);
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
background: var(--bg-hover);
border-color: #cbd5e1;
}
/* Columns */
.db-img {
width: 60px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.db-img img {
max-height: 100%;
width: auto;
object-fit: contain;
}
.db-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.db-title {
font-size: 1.1em;
font-weight: 700;
color: var(--text-main);
line-height: 1.2;
}
.db-title a { color: inherit; text-decoration: none; }
.db-subtitle {
font-size: 0.85em;
color: var(--text-muted);
margin-top: 2px;
}
.db-meta {
margin-right: 20px;
font-weight: 600;
font-size: 0.9em;
color: var(--text-main);
display: flex;
align-items: center;
gap: 8px;
}
/* Badges */
.role-badge, .status-badge {
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75em;
font-weight: 700;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
/* Role Colors (Matches Module:Team) */
.role-igl { background-color: #eab308; } /* Gold */
.role-entry { background-color: #f97316; } /* Orange */
.role-assault { background-color: #3b82f6; } /* Blue */
.role-frag { background-color: #3b82f6; } /* Blue (Variant) */
.role-support { background-color: #22c55e; } /* Green */
.role-scout { background-color: #14b8a6; } /* Teal */
.role-filter { background-color: #14b8a6; } /* Teal (New) */
.role-snip { background-color: #ef4444; } /* Red */
.role-coach { background-color: #a855f7; } /* Purple */
.role-manager { background-color: #1f2937; } /* Black */
.role-def { background-color: #64748b; } /* Grey (Default) */
/* Status Colors */
.status-active { background-color: #16a34a; } /* Green */
.status-inactive { background-color: #dc2626; } /* Red */
/* Mobile Responsive */
@media screen and (max-width: 768px) {
.db-row { flex-wrap: wrap; }
.db-meta { width: 100%; margin: 10px 0 0 75px; justify-content: flex-start; }
.db-status { margin-left: 75px; margin-top: 5px; }
}
/* STATISTICS TABLES */
.stats-table-wrapper {
overflow-x: auto;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid var(--border-light);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.stats-table {
width: 100%;
margin: 0 !important;
border: none !important;
font-size: 0.9em;
border-collapse: separate;
border-spacing: 0;
}
.stats-table th {
background-color: var(--bg-header) !important;
color: var(--text-muted) !important;
text-transform: uppercase;
font-size: 0.85em;
padding: 12px 8px;
white-space: nowrap;
border-bottom: 2px solid var(--border-light);
}
.stats-table td {
padding: 8px;
border-bottom: 1px solid var(--border-light);
color: var(--text-main);
vertical-align: middle;
}
/* Heatmap Cells: Make text bold if background is dark */
.stats-table td[style*="background-color"] {
font-weight: 600;
}
/* Rank Column */
.stats-table td:first-child {
font-weight: 800;
color: var(--text-muted);
}
/* Fix for Modern History Table inside Stats Wrapper */
.stats-table-wrapper .modern-history-table {
margin-top: 0; /* Remove top margin */
border: none;
box-shadow: none;
}
/* Ensure heatmap cells are readable */
.modern-history-table td[style*="background-color"] {
color: var(--text-main) !important; /* Ensure text stays dark on light blue */
font-weight: 600;
}
/* ==========================================================
MOBILE FIX: Statistics Table (Responsive)
========================================================== */
@media screen and (max-width: 768px) {
/* 1. RANK COLUMN (Sticky 1) */
.flat-data-table th.sticky-1,
.flat-data-table td.sticky-1 {
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
left: 0 !important;
}
/* 2. NAME / TEAM COLUMN (Sticky 2) */
/* Force smaller width on mobile (140px) to save space */
.flat-data-table th.sticky-2,
.flat-data-table td.sticky-2 {
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
left: 30px !important;
}
/* 3. LOGO COLUMN (Sticky 3 - Player Stats Only) */
/* Adjust position: 30px (Rank) + 140px (Name) = 170px Left */
/* Shrink width to 75px (enough for logo, no text needed) */
.flat-data-table th.sticky-3,
.flat-data-table td.sticky-3 {
width: 75px !important;
min-width: 75px !important;
left: 170px !important;
}
}
/* ==========================================================
FORMAT MODULE STYLES (Closed Timeline & Collapsible)
========================================================== */
/* 1. VERTICAL TIMELINE */
.fmt-timeline {
/* FIX 1: Creates a safe block context (stops Infobox overlap) WITHOUT clipping dots */
display: flow-root;
margin: 20px 0;
}
.fmt-node {
position: relative;
margin-bottom: 20px;
/* FIX 2: Create space inside the node for the dot/line */
padding-left: 30px;
}
/* THE LINE (Connects the dots) */
.fmt-node::before {
content: '';
position: absolute;
/* FIX 3: Position relative to the new padding */
left: 4px; /* Centers with the 10px marker (0 + 5px center - 1px width) */
top: 0;
bottom: -20px;
width: 2px;
background: var(--border-light);
z-index: 0;
}
/* FIRST NODE: Start line at the dot's center */
.fmt-node:first-child::before {
top: 20px;
/* bottom: -20px is inherited, so it connects downwards correctly */
}
/* LAST NODE: Stop line at the dot's center */
.fmt-node:last-child::before {
top: 0; /* Connects from the previous node */
bottom: auto; /* Do not extend downwards */
height: 20px; /* Stop exactly at the dot center */
}
/* THE DOT (Marker) */
.fmt-marker {
position: absolute;
left: 0; /* Sits comfortably in the padding area */
top: 15px;
width: 10px;
height: 10px;
background: #ff4d4d;
border: 3px solid var(--bg-card);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--border-light);
z-index: 1;
}
/* CONTENT BOX */
.fmt-content {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
overflow: hidden;
position: relative;
z-index: 2;
}
/* HEADER (Clickable) */
.fmt-header-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
cursor: pointer;
user-select: none;
transition: background 0.2s;
background: var(--bg-card);
}
.fmt-header-row:hover {
background: var(--bg-hover);
}
.fmt-title-wrap {
display: flex;
flex-direction: column;
}
.fmt-stage-title {
font-weight: 700;
color: var(--text-header);
font-size: 1.1em;
}
.fmt-meta-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.fmt-date {
color: var(--text-muted);
font-size: 0.85em;
font-family: 'Consolas', monospace;
background: var(--bg-header);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--border-light);
}
.fmt-toggle-icon {
color: var(--text-muted);
font-size: 0.8em;
transition: transform 0.2s;
}
/* Rotate icon when active */
.mw-collapsed .fmt-toggle-icon {
transform: rotate(-90deg);
}
/* DESCRIPTION (Hidden by default) */
.fmt-desc {
padding: 0 15px 15px 15px;
font-size: 0.95em;
line-height: 1.6;
color: var(--text-main);
border-top: 1px solid var(--border-light);
margin-top: 0;
}
.fmt-desc.mw-collapsed {
padding: 0;
border-top: none;
}
/* Multi-Level Bullets */
.fmt-desc ul { margin: 5px 0 5px 20px; padding: 0; list-style-type: disc; }
.fmt-desc ul ul { margin-top: 4px; margin-bottom: 4px; margin-left: 20px; list-style-type: circle; }
.fmt-desc li { margin-bottom: 4px; }
/* 2. POINTS DISTRIBUTION (Compact Vertical) */
.fmt-points-container {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 10px;
margin: 15px 0;
overflow: hidden;
max-width: 500px; /* Prevents stretching */
}
.fmt-points-header {
font-weight: 700;
text-transform: uppercase;
color: var(--text-muted);
font-size: 0.8em;
margin-bottom: 8px;
text-align: center;
letter-spacing: 0.5px;
}
.fmt-points-columns { display: flex; gap: 10px; }
.fmt-points-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fmt-pt-row {
display: flex; justify-content: space-between; align-items: center;
background: var(--bg-header); padding: 5px 10px;
border-radius: 4px; border: 1px solid var(--border-light);
}
.fmt-pt-rank-v { font-size: 0.85em; color: var(--text-muted); font-weight: 600; }
.fmt-pt-val-v { font-size: 1em; font-weight: 800; color: var(--text-main); }
/* TOP 3 HIGHLIGHTING (Light Mode) */
.row-top3 { background: #fffbeb; border-color: #fcd34d; }
.row-top3 .fmt-pt-val-v { color: #d97706; }
/* DARK MODE FIXES */
html.skin-theme-client-pref-night .row-top3,
html.skin-citizen-dark .row-top3,
html[class*="night"] .row-top3 {
background: rgba(234, 179, 8, 0.15) !important;
border-color: #a16207 !important;
}
html.skin-theme-client-pref-night .row-top3 .fmt-pt-val-v,
html.skin-citizen-dark .row-top3 .fmt-pt-val-v,
html[class*="night"] .row-top3 .fmt-pt-val-v {
color: #facc15 !important;
}
.row-zero { opacity: 0.7; }
.fmt-kill-box {
margin-top: 10px; text-align: center; font-size: 0.85em;
color: var(--text-main); background: var(--bg-hover);
padding: 4px 10px; border-radius: 4px; border: 1px dashed var(--border-light);
}
@media screen and (max-width: 600px) {
.fmt-points-container { max-width: 100%; }
.fmt-points-columns { flex-direction: column; }
.fmt-header-row { flex-wrap: wrap; }
.fmt-meta-wrap { margin-left: auto; }
}
/* 3. MAP SCHEDULE */
.fmt-maps-container {
margin: 15px 0;
}
.fmt-maps-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fmt-map-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 6px;
font-weight: 700;
font-size: 0.9em;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* Map Colors */
.map-erangel { background-color: #568c2c; }
.map-miramar { background-color: #d48e4a; }
.map-sanhok { background-color: #4a9e85; }
.map-vikendi { background-color: #5b8db8; }
.map-rondo { background-color: #00d26a; } /* Vibrant Green for Rondo */
.map-tbd { background-color: #64748b; }
/* ==========================================================
TALENT MODULE (Horizontal Text Only)
========================================================== */
.talent-container {
display: flex;
flex-direction: column;
gap: 10px; /* Space between different rows (e.g. Hosts vs Casters) */
margin: 20px 0;
padding: 15px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
}
.talent-row {
display: flex;
align-items: center; /* Vertically align text center */
gap: 15px; /* Gap between Header and Pills */
}
.talent-header {
font-size: 0.85em;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
/* FIX: Keeps alignment neat. Adjust width if your role names are long */
min-width: 140px;
text-align: right; /* Looks cleaner pointing to the pills */
flex-shrink: 0; /* Prevents header from shrinking */
}
.talent-list {
display: flex;
flex-wrap: wrap;
gap: 8px; /* Space between individual pills */
}
/* THE PILL */
.talent-pill {
background: var(--bg-header);
border: 1px solid var(--border-light);
border-radius: 4px; /* Soft rectangle */
padding: 4px 12px;
font-size: 0.9em;
font-weight: 500;
color: var(--text-main);
transition: all 0.2s;
}
.talent-pill a {
color: var(--text-main);
text-decoration: none;
}
.talent-pill:hover {
border-color: var(--text-link);
background: var(--bg-hover);
color: var(--text-link);
transform: translateY(-1px);
}
.talent-pill:hover a {
color: var(--text-link);
}
/* MOBILE RESPONSIVENESS */
@media screen and (max-width: 600px) {
.talent-row {
flex-direction: column; /* Stack them */
align-items: flex-start;
gap: 6px;
margin-bottom: 10px;
border-bottom: 1px dashed var(--border-light);
padding-bottom: 10px;
}
.talent-row:last-child {
border-bottom: none;
margin-bottom: 0;
}
.talent-header {
text-align: left;
min-width: auto;
}
}
/* ==========================================================
BRACKET MODULE
========================================================== */
/* Scroll container for mobile */
.bracket-scroll-wrapper {
overflow-x: auto;
padding: 20px 0;
margin: 20px 0;
}
.bracket-wrapper {
display: flex;
gap: 0; /* Spacing handled by columns */
}
.bracket-col {
display: flex;
flex-direction: column;
min-width: 220px;
margin-right: 40px; /* Space for lines */
position: relative;
}
.bracket-col:last-child {
margin-right: 0;
}
.bracket-header {
text-align: center;
font-weight: 700;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 20px;
height: 30px;
}
/* MATCH CARD STYLE */
.bracket-match {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 4px;
width: 200px;
position: relative;
z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.bracket-team {
display: flex;
justify-content: space-between;
padding: 6px 10px;
border-bottom: 1px solid var(--border-light);
font-size: 0.9em;
}
.bracket-team:last-child {
border-bottom: none;
}
.bracket-name {
font-weight: 600;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.bracket-score {
font-weight: 800;
background: var(--bg-header);
padding: 0 6px;
border-radius: 4px;
min-width: 20px;
text-align: center;
}
/* Winner Highlighting */
.bracket-win .bracket-name { color: #d97706; } /* Gold */
.bracket-win .bracket-score { background: #d97706; color: #fff; }
/* SPACING MAGIC (Flexbox Margins) */
/* Calculates vertical gaps based on rounds */
.bracket-col-1 .bracket-match { margin-bottom: 20px; }
.bracket-col-2 .bracket-spacer { height: 35px; } /* Offset Top */
.bracket-col-2 .bracket-match { margin-bottom: 90px; } /* Gap between matches */
.bracket-col-3 .bracket-spacer { height: 95px; }
.bracket-col-3 .bracket-match { margin-bottom: 210px; }
.bracket-col-4 .bracket-spacer { height: 215px; }
.bracket-col-4 .bracket-match { margin-bottom: 450px; }
/* CONNECTOR LINES */
/* The "Fork" to the right */
.has-connector::after {
content: '';
position: absolute;
right: -20px; /* Go outside the box */
top: 50%;
width: 20px;
height: 1px;
background: var(--border-light);
}
/* The vertical connecting lines for Round 2, 3, etc */
/* This is a simplified approach: we draw a border on the spacer of the *next* col */
/* Note: For a perfectly robust tree, usually SVG or complex borders are used.
This simplified version works for standard 8/16 layouts. */
/* ==========================================================
CITIZEN SKIN: FORCE FULL WIDTH
========================================================== */
/* 1. Force the layout variable to always be 100% (Full) */
:root {
--citizen-page-width: 100% !important;
--citizen-max-page-width: 100% !important;
--width-layout: 100% !important;
}
/* 2. Hide "Standard" and "Wide" buttons in the Preference Drawer */
/* This targets the 'Width' section and hides the first two options */
.citizen-drawer__section:has(> .citizen-drawer__header:contains("Width")) .citizen-chip:nth-child(1),
.citizen-drawer__section:has(> .citizen-drawer__header:contains("Width")) .citizen-chip:nth-child(2) {
display: none !important;
}
/* FALLBACK: If :has() isn't supported by some browsers, target by value attributes if possible */
/* Usually Citizen inputs use values 0 (Standard), 1 (Wide), 2 (Full) */
.citizen-drawer input[value="0"] + label,
.citizen-drawer input[value="1"] + label,
.citizen-drawer input[value="standard"] + label,
.citizen-drawer input[value="wide"] + label {
display: none !important;
}
/* ==========================================================
INTERACTIVE CALENDAR MODULE (Modern & Responsive)
========================================================== */
.esports-calendar-container {
display: flex;
gap: 30px;
margin: 20px 0; /* CHANGED: 'auto' to '0' to align left */
max-width: 900px; /* Slightly wider to fill the space nicely */
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 25px;
box-shadow: 0 8px 20px -4px rgba(0,0,0,0.05);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.calendar-left {
flex: 1;
min-width: 300px;
max-width: 400px; /* Keeps the grid tight */
}
.calendar-right {
flex: 1;
min-width: 300px;
background: var(--bg-page);
border-left: 2px solid var(--border-light); /* Sleek divider instead of full box */
padding-left: 25px;
max-height: 450px;
overflow-y: auto;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cal-month-year {
font-weight: 800;
font-size: 1.1em;
color: var(--text-header);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Fix 5: Visible, stylized buttons */
.cal-prev, .cal-next {
background: var(--bg-header);
border: 1px solid var(--border-light);
color: var(--text-main);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
}
.cal-prev:hover, .cal-next:hover {
background: var(--text-main);
color: var(--bg-page);
}
.calendar-grid-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: 700;
font-size: 0.75em;
color: var(--text-muted);
margin-bottom: 15px;
text-transform: uppercase;
}
.calendar-grid-dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
font-weight: 600;
color: var(--text-main);
cursor: default;
border: 2px solid transparent;
position: relative;
/* CRITICAL FIXES FOR OVERFLOW: */
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
.cal-day.empty { background: transparent; border: none; }
/* Dark Mode Safe Event Days */
.cal-day.has-events {
background: var(--bg-header);
border: 2px solid var(--border-light);
cursor: pointer;
color: var(--text-main);
transition: all 0.2s;
}
.cal-day.has-events:hover {
border-color: #00509d;
transform: translateY(-2px);
}
.cal-day.active {
background: #00509d !important;
color: white !important;
border-color: #00509d !important;
box-shadow: 0 4px 10px rgba(0, 80, 157, 0.4);
}
/* Stage name under the date */
.cal-day-stage {
font-size: 0.55em;
line-height: 1.2;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%; /* Fill the container safely */
padding: 0 4px;
box-sizing: border-box;
text-align: center;
margin-top: 2px;
}
.cal-day.active .cal-day-stage { opacity: 1; color: #e2e8f0; }
/* Details Panel Typography */
.cal-stage-header-wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 2px solid #ff4d4d; /* Red accent */
padding-bottom: 5px;
margin-top: 20px;
margin-bottom: 10px;
}
.cal-stage-header-wrap:first-child { margin-top: 0; }
.cal-stage-header {
font-size: 1.1em;
font-weight: 800;
color: var(--text-header);
margin: 0;
}
.cal-stream-group {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.cal-stream-btn {
background: #ef4444; /* YouTube Red */
color: white !important;
font-size: 0.75em;
font-weight: 700;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
text-decoration: none !important;
display: flex;
align-items: center;
gap: 5px;
transition: background 0.2s;
line-height: 1;
}
.cal-stream-btn:hover {
background: #dc2626;
transform: translateY(-1px);
}
.cal-match-row {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
font-size: 0.9em;
}
.cal-match-row:last-child { border-bottom: none; }
.cal-m-time {
font-family: 'Consolas', monospace;
font-weight: 700;
color: var(--text-muted);
width: 85px; /* Wide enough to fit "10:30 AM" */
flex-shrink: 0;
}
.cal-m-info { flex: 1; }
.cal-m-teams { font-weight: 700; color: var(--text-main); font-size: 1.05em; }
/* Dark Mode safe maps */
.cal-m-map { color: var(--text-main); font-weight: 700; font-size: 1.05em; }
.cal-m-group {
font-size: 0.8em;
color: var(--text-muted);
background: var(--bg-header);
padding: 3px 8px;
border-radius: 4px;
margin-left: 8px;
font-weight: 600;
}
/* Mobile View: Ensure the left column can shrink perfectly */
@media screen and (max-width: 768px) {
.esports-calendar-container { flex-direction: column; padding: 15px; gap: 15px;}
.calendar-right { border-left: none; border-top: 2px solid var(--border-light); padding-left: 0; padding-top: 15px; }
.calendar-left { max-width: 100%; min-width: 0; } /* Let it shrink on small phones */
}
/* ==========================================================
PC STICKY COLUMNS EXTENSION (GRP, M, WWCD, PLACE, ELIMS, PTS)
========================================================== */
@media screen and (min-width: 769px) {
/* 1. Make the new PC columns sticky */
.pc-sticky-1, .pc-sticky-2, .pc-sticky-3, .pc-sticky-4, .grp-sticky {
position: sticky;
z-index: 10;
background-color: var(--bg-card);
}
/* 2. Give headers higher z-index and background so scrolling text hides under them */
.standings-card-table th.pc-sticky-1,
.standings-card-table th.pc-sticky-2,
.standings-card-table th.pc-sticky-3,
.standings-card-table th.pc-sticky-4,
.standings-card-table th.grp-sticky {
background-color: var(--bg-header);
z-index: 11;
}
/* 3. DEFAULT OFFSETS (NO GROUP COLUMN) */
/* TEAM column now ends at 300px (50px + 250px) */
.pc-sticky-1 { left: 300px; width: 40px; min-width: 40px; text-align: center; } /* M */
.pc-sticky-2 { left: 340px; width: 60px; min-width: 60px; text-align: center; } /* WWCD */
.pc-sticky-3 { left: 400px; width: 60px; min-width: 60px; text-align: center; } /* PLACE */
.pc-sticky-4 { left: 460px; width: 60px; min-width: 60px; text-align: center; } /* ELIMS */
.standings-card-table:not(.has-group-col) .sticky-3 { left: 520px !important; } /* PTS */
/* 4. OVERRIDE OFFSETS (WITH GROUP COLUMN) */
/* GRP gets 50px width, so we shift everything else +50px */
.grp-sticky { left: 300px; width: 50px; min-width: 50px; text-align: center; }
.has-group-col .pc-sticky-1 { left: 350px; }
.has-group-col .pc-sticky-2 { left: 390px; }
.has-group-col .pc-sticky-3 { left: 450px; }
.has-group-col .pc-sticky-4 { left: 510px; }
.has-group-col .sticky-3 { left: 570px !important; }
/* 5. Edge formatting */
.sticky-2 { box-shadow: none !important; } /* Remove shadow from TEAM */
.sticky-3 {
box-shadow: 4px 0 5px -2px rgba(0,0,0,0.1) !important; /* Add shadow to PTS */
border-right: 1px solid var(--border-light);
}
}
/* ==========================================================
MODERN GROUP DRAW
========================================================== */
.modern-group-draw {
display: inline-block !important;
max-width: 100%;
overflow-x: auto;
margin: 15px 0;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-light);
background-color: var(--bg-card);
}
table.sharp-table {
border-collapse: collapse !important;
width: auto !important;
table-layout: fixed !important;
margin: 0 !important;
background-color: transparent;
border: none;
}
table.sharp-table .distinct-main-header {
background-color: var(--bg-table-header) !important;
color: var(--text-table-header) !important;
text-transform: uppercase;
text-align: center;
font-size: 0.95em;
font-weight: 800;
padding: 12px; /* Increased */
border-bottom: 2px solid var(--border-thick);
letter-spacing: 0.5px;
}
table.sharp-table .distinct-group-header {
background-color: #dbeafe;
color: var(--text-header);
text-align: center;
font-weight: 700;
padding: 10px 12px; /* Increased */
border-bottom: 2px solid var(--border-light);
border-right: 1px solid var(--border-light);
text-transform: uppercase;
font-size: 0.8em; /* Slight bump for readability */
width: 200px !important;
}
html.skin-theme-client-pref-night table.sharp-table .distinct-group-header,
html.skin-citizen-dark table.sharp-table .distinct-group-header,
html[class*="night"] table.sharp-table .distinct-group-header {
background-color: #1e293b;
color: #e2e8f0;
}
table.sharp-table .distinct-group-header:last-child {
border-right: none;
}
table.sharp-table td {
padding: 6px 12px !important; /* Increased padding */
line-height: 1.2 !important;
height: 45px !important; /* 1.5x height (was 30px) */
border-bottom: 1px solid var(--border-light);
border-right: 1px solid var(--border-light);
vertical-align: middle;
background-color: var(--bg-card);
color: var(--text-main);
font-size: 0.85em; /* Slight text bump to match new height */
transition: background 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.sharp-table td:last-child {
border-right: none;
}
table.sharp-table tr:last-child td {
border-bottom: none;
}
table.sharp-table tr:hover td {
background-color: var(--bg-hover);
}
.team-cell-flex {
display: flex;
align-items: center;
gap: 10px; /* Slight bump for breathing room */
font-weight: 600;
}
img.team-logo {
width: 22px !important; /* Bumped from 18px to look balanced in a 45px row */
height: auto !important;
display: block;
}
.team-cell-flex a {
color: var(--text-main);
text-decoration: none;
}
.team-cell-flex a:hover {
color: #007bff;
}
/* Kills invisible MediaWiki paragraph margins inside the table */
table.sharp-table th *,
table.sharp-table td * {
margin: 0 !important;
}
/* ==========================================================
MOBILE: MODERN GROUP DRAW
========================================================== */
@media screen and (max-width: 768px) {
.modern-group-draw {
-webkit-overflow-scrolling: touch;
margin: 10px 0;
display: block !important;
}
table.sharp-table .distinct-group-header {
width: 140px !important;
padding: 8px 10px !important;
}
table.sharp-table td {
padding: 4px 8px !important;
height: 36px !important; /* 1.5x height for mobile (was 24px) */
font-size: 0.8em !important;
}
img.team-logo {
width: 16px !important; /* Bumped from 14px */
}
}
/* Kills invisible MediaWiki paragraph/div margins inside the table */
table.sharp-table th *,
table.sharp-table td * {
margin: 0 !important;
}
.standings-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; font-size: 0.9em; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-color { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legend-text { color: var(--text-muted); font-weight: 600; }
.legend-color.qual-q { background-color: #28a745; }
.legend-color.qual-q2 { background-color: #007bff; }
.legend-color.qual-q3 { background-color: #6f42c1; }
.legend-color.qual-e { background-color: #dc3545; }
.legend-color.qual-d { background-color: #343a40; }
.legend-color.qual-n { background-color: #adb5bd; }
/* ── MAIN TABS: Segmented Control ── */
.espa-tabs-wrapper { position: relative; }
.espa-tabs {
display: flex;
background: var(--bg-header);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 4px;
gap: 2px;
width: 100%;
}
.espa-tab {
flex: 1; display: flex; align-items: center; justify-content: center;
height: 36px; padding: 0 12px;
font-size: 13px; font-weight: 600;
color: var(--text-muted);
border-radius: 7px;
text-decoration: none !important;
transition: color 0.2s, background 0.2s;
white-space: nowrap;
}
.espa-tab a { color: inherit; text-decoration: none !important; }
.espa-tab:hover:not(.active) {
color: var(--text-main);
background: var(--bg-hover);
}
.espa-tab.active {
color: #fff;
background: #007bff;
box-shadow: 0 2px 8px rgba(0,123,255,0.25);
}
/* ── MOBILE DROPDOWN ── */
.espa-tabs-mobile { display: none; position: relative; }
.espa-dropdown-trigger {
display: flex; align-items: center; justify-content: space-between;
width: 100%; height: 42px; padding: 0 14px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 10px;
font-size: 14px; font-weight: 600;
color: var(--text-main);
cursor: pointer;
transition: border-color 0.2s;
}
.espa-dropdown-trigger:hover,
.espa-dropdown-trigger.open { border-color: #007bff; }
.espa-dropdown-trigger.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.espa-trigger-left { display: flex; align-items: center; gap: 8px; }
.espa-active-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #007bff; flex-shrink: 0;
}
.espa-chevron {
font-size: 11px; color: var(--text-muted);
transition: transform 0.25s ease;
}
.espa-dropdown-trigger.open .espa-chevron { transform: rotate(180deg); }
.espa-dropdown-menu {
display: none; position: absolute;
top: 100%; left: 0; right: 0;
background: var(--bg-card);
border: 1px solid #007bff; border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden; z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.espa-dropdown-menu.open { display: block; }
.espa-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px;
font-size: 14px; font-weight: 500;
color: var(--text-main);
text-decoration: none !important;
border-bottom: 1px solid var(--border-light);
transition: background 0.15s;
}
.espa-dropdown-item a { color: inherit; text-decoration: none !important; }
.espa-dropdown-item:last-child { border-bottom: none; }
.espa-dropdown-item:hover { background: var(--bg-hover); }
.espa-dropdown-item.active {
color: #007bff; font-weight: 700;
background: rgba(0,123,255,0.08);
}
.espa-item-check {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--border-main);
flex-shrink: 0; display: flex;
align-items: center; justify-content: center;
font-size: 9px;
}
.espa-dropdown-item.active .espa-item-check {
background: #007bff; border-color: #007bff; color: #fff;
}
/* ── SUB TABS: Scrollable pills ── */
.espa-subtabs {
display: flex; align-items: center; gap: 6px;
overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 2px 0;
}
.espa-subtabs::-webkit-scrollbar { display: none; }
.espa-subpill {
flex-shrink: 0; display: flex;
align-items: center; justify-content: center;
height: 30px; padding: 0 14px; border-radius: 50px;
font-size: 12px; font-weight: 600;
color: var(--text-muted);
background: var(--bg-card);
border: 1px solid var(--border-light);
text-decoration: none !important;
white-space: nowrap;
transition: all 0.2s;
}
.espa-subpill a { color: inherit; text-decoration: none !important; }
.espa-subpill:hover:not(.active) {
border-color: #007bff; color: #007bff;
}
.espa-subpill.active {
background: #007bff; color: #fff;
border-color: #007bff;
box-shadow: 0 2px 6px rgba(0,123,255,0.25);
}
/* ── RESPONSIVE ── */
@media (max-width: 640px) {
.espa-tabs { display: none; }
.espa-tabs-mobile { display: block; }
}
/* ═══════════════════════════════════════════════════════
PLAYER DASHBOARD v2.1 — 6 fixes
═══════════════════════════════════════════════════════ */
.pd-dashboard {
border-radius: 12px; overflow: hidden;
border: 1px solid var(--border-light);
font-family: inherit; margin-bottom: 20px;
/* CSS variables — light mode defaults */
--pd-card: var(--bg-card);
--pd-page: var(--bg-page);
--pd-border: var(--border-light);
--pd-text: var(--text-main);
--pd-muted: var(--text-muted);
--pd-link: #0056cc; /* light mode links */
--pd-header-bg: var(--bg-header);
--pd-left-width: 300px; /* FIX 2: wider left bar */
}
/* ── FIX 1 + 6: Dark mode — white links + all badge/prize overrides ── */
html.skin-citizen-dark .pd-dashboard,
html.skin-theme-client-pref-night .pd-dashboard,
html[class*="night"] .pd-dashboard {
--pd-link: #e2e8f0; /* white-ish links, easy to read */
}
html.skin-citizen-dark .place-1,
html.skin-theme-client-pref-night .place-1 { background: rgba(251,191,36,.15); color: #fbbf24; }
html.skin-citizen-dark .place-2,
html.skin-theme-client-pref-night .place-2 { background: rgba(148,163,184,.1); color: #94a3b8; }
html.skin-citizen-dark .place-3,
html.skin-theme-client-pref-night .place-3 { background: rgba(217,119,6,.12); color: #d97706; }
html.skin-citizen-dark .pd-prize-val,
html.skin-theme-client-pref-night .pd-prize-val { color: #4ade80; }
html.skin-citizen-dark .pd-result-q,
html.skin-theme-client-pref-night .pd-result-q { background: rgba(34,197,94,.15); color: #4ade80; }
html.skin-citizen-dark .pd-result-e,
html.skin-theme-client-pref-night .pd-result-e { background: rgba(239,68,68,.15); color: #f87171; }
html.skin-citizen-dark .pd-award-badge,
html.skin-theme-client-pref-night .pd-award-badge { background: rgba(139,92,246,.2); color: #a78bfa; }
/* ══ HERO ══ */
.pd-hero {
display: flex;
align-items: center; /* FIX 5: vertically center all hero items */
gap: 24px;
padding: 28px 36px;
background: linear-gradient(135deg, #1a2744 0%, #0f1f3d 100%);
position: relative; overflow: hidden; flex-wrap: wrap;
}
.pd-hero::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(0,123,255,.12) 0%, transparent 60%),
radial-gradient(circle at 80% 20%, rgba(99,102,241,.08) 0%, transparent 50%);
}
.pd-hero::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
/* FIX 5: Photo — circular, vertically centered with name */
.pd-hero-photo {
width: 96px; height: 96px; border-radius: 50%;
background: linear-gradient(135deg, #2563eb, #7c3aed);
display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 900; color: #fff;
flex-shrink: 0; position: relative; z-index: 1;
border: 3px solid rgba(255,255,255,.2);
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
font-family: 'Barlow Condensed', sans-serif;
align-self: center; /* ensure vertical center */
}
.pd-hero-photo img,
.pd-hero-photo .pd-hero-img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
}
.pd-hero-info {
flex: 1; position: relative; z-index: 1; min-width: 160px;
align-self: center; /* FIX 5 */
}
.pd-hero-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 42px; font-weight: 900; color: #fff;
letter-spacing: .02em; line-height: 1;
text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pd-hero-realname { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 5px; font-weight: 500; }
.pd-hero-tags { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.pd-tag { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pd-tag-role { background: rgba(99,102,241,.25); color: #a5b4fc; border: 1px solid rgba(99,102,241,.4); }
.pd-tag-game { background: rgba(16,185,129,.2); color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); }
.pd-rank-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px; border-radius: 8px; margin-top: 11px;
background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
}
.pd-rank-chip span { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .07em; }
.pd-rank-chip b { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; color: #fbbf24; }
.pd-hero-right {
position: relative; z-index: 1;
text-align: right; margin-left: auto;
align-self: center; /* FIX 5 */
}
.pd-earnings-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 3px; }
.pd-earnings-val { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.pd-earnings-breakdown { display: flex; gap: 18px; margin-top: 7px; justify-content: flex-end; }
.pd-earn-sub-label { font-size: 10px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; }
.pd-earn-sub-val { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6); margin-top: 2px; }
/* ══ BODY ══ */
.pd-body { display: grid; grid-template-columns: var(--pd-left-width) 1fr; } /* FIX 2 */
/* ══ LEFT ══ */
.pd-left { padding: 20px 18px; border-right: 1px solid var(--pd-border); background: var(--pd-card); }
.pd-section-title {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--pd-muted); margin-bottom: 10px; padding-bottom: 7px;
border-bottom: 1px solid var(--pd-border);
}
.pd-section-gap { margin-top: 20px; }
.pd-info-row {
display: flex; justify-content: space-between; align-items: center;
padding: 7px 0; border-bottom: 1px solid var(--pd-border);
font-size: 13px; gap: 8px;
}
.pd-info-row:last-of-type { border-bottom: none; }
.pd-info-label { color: var(--pd-muted); font-weight: 500; flex-shrink: 0; }
.pd-info-val { color: var(--pd-text); font-weight: 600; text-align: right; }
/* FIX 1: Links — light uses blue, dark uses near-white */
.pd-info-val a,
.pd-info-val a:visited,
.pd-team-name a,
.pd-team-name a:visited,
.pd-tourn-table a,
.pd-tourn-table a:visited { color: var(--pd-link); text-decoration: none; font-weight: 600; }
/* Current team */
.pd-current-team { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.pd-current-team-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.pd-current-team-name { font-weight: 700; color: var(--pd-link); }
/* FIX 3: Social icons bigger */
.pd-socials { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pd-socials img,
.pd-socials .social-img { width: 32px !important; height: 32px !important; }
/* Team history */
.pd-team-row {
display: flex; align-items: center; gap: 9px;
padding: 8px 0; border-bottom: 1px solid var(--pd-border);
}
.pd-team-row:last-child { border-bottom: none; }
/* FIX 4: Team logo light/dark switching */
.pd-team-logo-light { display: inline-block; }
.pd-team-logo-dark { display: none; }
html.skin-citizen-dark .pd-team-logo-light,
html.skin-theme-client-pref-night .pd-team-logo-light { display: none; }
html.skin-citizen-dark .pd-team-logo-dark,
html.skin-theme-client-pref-night .pd-team-logo-dark { display: inline-block; }
.pd-team-logo-img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.pd-team-logo-fb {
width: 24px; height: 24px; border-radius: 4px;
background: var(--pd-header-bg); display: flex; align-items: center;
justify-content: center; font-size: 8px; font-weight: 800;
color: var(--pd-muted); flex-shrink: 0;
}
.pd-team-name { font-size: 13px; font-weight: 600; color: var(--pd-text); flex: 1; }
.pd-team-dates { font-size: 11px; color: var(--pd-muted); white-space: nowrap; }
/* ══ RIGHT ══ */
.pd-right { padding: 20px 22px; background: var(--pd-page); }
.pd-prize-section { margin-bottom: 22px; }
.pd-table-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: var(--pd-text); margin-bottom: 9px;
padding-left: 9px; border-left: 3px solid #007bff;
}
.pd-tourn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-tourn-table th {
background: var(--pd-card); padding: 8px 10px; text-align: left;
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--pd-muted); border-bottom: 2px solid var(--pd-border);
}
.pd-tourn-table td {
padding: 8px 10px; border-bottom: 1px solid var(--pd-border);
color: var(--pd-text); background: var(--pd-card); vertical-align: middle;
}
.pd-tourn-table tr:last-child td { border-bottom: none; }
.pd-tourn-table tr:hover td { filter: brightness(.97); }
.pd-place-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 6px;
font-weight: 800; font-size: 13px;
font-family: 'Barlow Condensed', sans-serif;
}
.place-1 { background: #fef3c7; color: #b45309; }
.place-2 { background: #f1f5f9; color: #475569; }
.place-3 { background: #fdf6ee; color: #92400e; }
.place-other { background: var(--pd-header-bg); color: var(--pd-muted); }
.pd-result-q { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #dcfce7; color: #15803d; }
.pd-result-e { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #fef2f2; color: #dc2626; }
.pd-prize-val { font-weight: 700; color: #15803d; }
.pd-award-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #ede9fe; color: #6d28d9; }
.pd-date-cell { font-size: 12px; color: var(--pd-muted); white-space: nowrap; }
.pd-empty { font-style: italic; color: var(--pd-muted); padding: 10px 0; font-size: 13px; }
.pd-stats-placeholder {
margin-top: 4px; padding: 16px;
background: var(--pd-card); border-radius: 9px;
border: 2px dashed var(--pd-border);
text-align: center; color: var(--pd-muted); font-size: 13px;
}
.pd-stats-placeholder b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--pd-text); }
/* ── Teammates ── */
.pd-teammate-name { font-size: 13px; font-weight: 600; color: var(--pd-text); flex: 1; }
.pd-teammate-name a,
.pd-teammate-name a:visited { color: var(--pd-link); text-decoration: none; }
.pd-teammate-count { font-size: 11px; color: var(--pd-muted); white-space: nowrap; }
/* ══ MOBILE ══ */
@media (max-width: 900px) {
.pd-body { grid-template-columns: 1fr; }
.pd-left { border-right: none; border-bottom: 1px solid var(--pd-border); }
}
@media (max-width: 600px) {
/* Hero: photo + name side by side, earnings drops to its own full-width row below */
.pd-hero { padding: 16px; gap: 14px; flex-wrap: wrap; }
.pd-hero-name { font-size: 28px; }
.pd-hero-photo { width: 80px; height: 80px; font-size: 28px; }
/* Earnings: breakdown LEFT, total RIGHT */
.pd-hero-right {
width: 100%; margin-left: 0; order: 3;
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: left;
}
/* breakdown naturally sits on the left as first child */
.pd-earnings-breakdown {
flex-direction: column; gap: 4px;
margin-top: 0; order: 1;
}
.pd-earn-sub-label { font-size: 9px; }
.pd-earn-sub-val { font-size: 12px; margin-top: 0; }
/* total wrapper pushed to the right */
.pd-earnings-total { order: 2; text-align: right; }
.pd-earnings-label { font-size: 9px; margin-bottom: 2px; }
.pd-earnings-val { font-size: 22px; line-height: 1; white-space: nowrap; }
/* Tables scroll horizontally instead of overflowing */
.pd-right { padding: 14px; overflow-x: auto; }
.pd-tourn-table { min-width: 480px; }
.pd-left { padding: 14px; }
.pd-dashboard { --pd-left-width: 100%; }
}
/* ==============================================================
TEAM DASHBOARD (td- prefix)
============================================================== */
/* ── Inherits all --pd- variables from .pd-dashboard ─────────── */
/* Light mode: --pd-card = var(--bg-card), --pd-border = var(--border-light) */
/* Dark mode: --bg-card = #2a2a2a, --text-main = #ffffff, etc. */
.td-dashboard {
--td-left-width: 280px;
font-family: inherit;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-light);
background: var(--bg-card);
color: var(--text-main);
margin-bottom: 24px;
}
/* ── Hero — always dark, regardless of skin ── */
.td-hero {
display: flex;
align-items: center;
gap: 20px;
padding: 24px 28px;
background: linear-gradient(135deg, #1a2744 0%, #0f1f3d 100%);
position: relative;
overflow: hidden;
flex-wrap: wrap;
}
.td-hero::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(0,123,255,.1) 0%, transparent 55%),
radial-gradient(circle at 80% 20%, rgba(99,102,241,.07) 0%, transparent 50%);
pointer-events: none;
}
.td-hero::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.td-hero-logo {
position: relative; z-index: 1; flex-shrink: 0;
width: 80px; height: 80px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.05);
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
padding: 8px; box-sizing: border-box;
}
.td-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.td-hero-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.td-hero-name {
font-size: 36px; font-weight: 900;
color: #ffffff !important; /* always white — hero is always dark */
letter-spacing: .01em; line-height: 1;
text-shadow: 0 2px 12px rgba(0,0,0,.4);
margin-bottom: 8px;
}
/* Earnings — right of hero */
.td-hero .pd-hero-right {
position: relative; z-index: 1;
text-align: right; margin-left: auto;
}
/* Force white inside hero regardless of skin */
.td-hero .pd-earnings-label { color: rgba(255,255,255,.7) !important; }
.td-hero .pd-earnings-val { color: #ffffff !important; }
/* ── Body layout ── */
.td-body {
display: grid;
grid-template-columns: var(--td-left-width) 1fr;
}
/* Left panel — uses skin bg/text vars */
.td-left {
padding: 20px 18px;
border-right: 1px solid var(--border-light);
background: var(--bg-card);
color: var(--text-main);
}
/* Right panel */
.td-right {
padding: 20px 20px 24px;
background: var(--bg-card);
color: var(--text-main);
overflow-x: auto;
}
.td-section-gap { margin-top: 28px; }
/* ── Roster — uses existing hero-player-card CSS ── */
.td-right .hero-roster-grid { margin-top: 10px; gap: 12px; }
.td-right .hero-player-card { width: 148px; }
/* ── Former Players — year headers + tables ── */
.td-year-header {
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
margin: 16px 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border-light);
}
/* First year header needs less top margin */
.td-year-header:first-of-type { margin-top: 8px; }
.td-role-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px; font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: .04em;
}
.td-former-table { width: 100%; }
/* ── Achievements — Place/Award column wider ── */
.td-place-col {
min-width: 120px;
width: 140px;
}
/* Ensure award badge doesn't get clipped */
.td-place-col .pd-award-badge {
white-space: normal;
text-align: center;
line-height: 1.3;
}
/* ── Dark mode explicit overrides ── */
/* These cover cases where var() fallback isn't enough */
html.skin-citizen-dark .td-dashboard,
html.skin-theme-client-pref-night .td-dashboard,
html[class*="night"] .td-dashboard {
border-color: var(--border-light);
background: var(--bg-card);
color: var(--text-main);
}
html.skin-citizen-dark .td-left,
html.skin-theme-client-pref-night .td-left,
html[class*="night"] .td-left,
html.skin-citizen-dark .td-right,
html.skin-theme-client-pref-night .td-right,
html[class*="night"] .td-right {
background: var(--bg-card);
color: var(--text-main);
}
html.skin-citizen-dark .td-year-header,
html.skin-theme-client-pref-night .td-year-header,
html[class*="night"] .td-year-header {
color: var(--text-muted);
border-color: var(--border-light);
}
/* ── Mobile ── */
@media (max-width: 900px) {
.td-body { grid-template-columns: 1fr; }
.td-left {
border-right: none;
border-bottom: 1px solid var(--border-light);
}
}
@media (max-width: 600px) {
.td-hero { padding: 16px; gap: 14px; }
.td-hero-name { font-size: 24px; }
.td-hero-logo { width: 56px; height: 56px; }
.td-hero .pd-hero-right {
width: 100%; margin-left: 0; order: 3;
text-align: left;
border-top: 1px solid rgba(255,255,255,.12);
padding-top: 10px;
}
.td-right { padding: 14px; }
.td-right .hero-player-card { width: calc(50% - 6px); }
.td-dashboard { --td-left-width: 100%; }
}
/* ==============================================================
BGMI HUB (hub- prefix)
============================================================== */
/* ── Root wrapper ── */
.hub-root {
font-family: inherit;
color: var(--text-main);
max-width: 1200px;
margin: 0 auto;
}
/* ════ HERO ══════════════════════════════════════════════════════ */
.hub-hero {
background: linear-gradient(135deg, #0a0f1e 0%, #0d1b3e 50%, #091229 100%);
border-radius: 16px;
overflow: hidden;
margin-bottom: 32px;
position: relative;
border: 1px solid rgba(99,102,241,.3);
box-shadow: 0 0 60px rgba(99,102,241,.15), 0 0 120px rgba(0,0,0,.4);
}
/* Animated gradient orbs */
.hub-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 10% 50%, rgba(99,102,241,.2) 0%, transparent 50%),
radial-gradient(ellipse at 90% 20%, rgba(14,165,233,.15) 0%, transparent 45%),
radial-gradient(ellipse at 60% 90%, rgba(251,191,36,.08) 0%, transparent 40%);
pointer-events: none;
}
/* Subtle grid pattern overlay */
.hub-hero::after {
content: '';
position: absolute; inset: 0;
background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.hub-hero-inner {
position: relative; z-index: 1;
display: flex;
align-items: center;
gap: 40px;
padding: 48px 40px;
flex-wrap: wrap;
}
.hub-hero-left { flex: 1; min-width: 260px; }
.hub-hero-game-tag {
display: inline-block;
font-size: 11px; font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
color: #818cf8;
background: rgba(99,102,241,.15);
border: 1px solid rgba(99,102,241,.3);
border-radius: 4px;
padding: 3px 10px;
margin-bottom: 16px;
}
.hub-hero-title {
font-size: 72px !important;
font-weight: 900 !important;
line-height: .95 !important;
color: #ffffff !important;
letter-spacing: -.02em !important;
text-shadow: 0 0 40px rgba(99,102,241,.5), 0 4px 20px rgba(0,0,0,.5) !important;
margin: 0 0 8px !important;
border: none !important;
}
.hub-hero-full {
font-size: 15px;
font-weight: 600;
color: rgba(255,255,255,.5);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 16px;
}
.hub-hero-desc {
font-size: 15px;
line-height: 1.6;
color: rgba(255,255,255,.65);
max-width: 440px;
}
/* Stat cards */
.hub-hero-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
flex-shrink: 0;
}
.hub-stat-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
padding: 18px 20px;
text-align: center;
backdrop-filter: blur(8px);
transition: background .2s, border-color .2s;
min-width: 130px;
}
.hub-stat-card:hover {
background: rgba(255,255,255,.1);
border-color: rgba(99,102,241,.4);
}
.hub-stat-icon {
font-size: 24px;
margin-bottom: 6px;
display: block;
}
.hub-stat-val {
font-size: 22px;
font-weight: 900;
color: #ffffff;
line-height: 1;
margin-bottom: 4px;
}
.hub-stat-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.5);
}
/* ════ SECTION SHELL ═════════════════════════════════════════════ */
.hub-section {
margin-bottom: 40px;
}
.hub-section-header {
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 2px solid var(--border-light);
position: relative;
}
/* Accent left bar */
.hub-section-header::before {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 60px; height: 2px;
background: linear-gradient(90deg, #6366f1, #0ea5e9);
}
.hub-section-hl {
display: flex;
align-items: center;
gap: 10px;
}
.hub-section-icon { font-size: 22px; }
.hub-section-title {
font-size: 22px !important;
font-weight: 800 !important;
color: var(--text-main) !important;
letter-spacing: -.01em !important;
margin: 0 !important;
border: none !important;
}
.hub-section-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
}
.hub-sub-title {
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-muted);
margin: 0 0 12px;
}
.hub-sub-title-gap { margin-top: 28px; }
/* ════ TOURNAMENT CARDS ══════════════════════════════════════════ */
.hub-tourn-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-bottom: 8px;
}
.hub-tourn-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
position: relative;
overflow: hidden;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hub-tourn-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.12);
border-color: #6366f1;
}
.hub-tourn-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, #6366f1, #0ea5e9);
opacity: 0;
transition: opacity .2s;
}
.hub-tourn-card:hover::before { opacity: 1; }
.hub-tourn-tier {
position: absolute;
top: 10px; right: 10px;
}
.hub-tourn-logo {
flex-shrink: 0;
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-hover, rgba(0,0,0,.04));
border-radius: 10px;
padding: 6px; box-sizing: border-box;
}
.hub-tourn-logo img { width: 100%; height: 100%; object-fit: contain; }
.hub-tourn-info { flex: 1; min-width: 0; }
.hub-tourn-name {
font-weight: 700;
font-size: 14px;
line-height: 1.3;
margin-bottom: 4px;
padding-right: 48px; /* avoid tier badge overlap */
}
.hub-tourn-name a { color: var(--text-main); text-decoration: none; }
.hub-tourn-name a:hover { color: #6366f1; }
.hub-tourn-dates {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.hub-tourn-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.hub-tourn-prize { color: #4ade80; }
.hub-tourn-loc {}
/* LIVE badge */
.hub-live-badge {
position: absolute;
top: 10px; left: 10px;
background: #ef4444;
color: #fff;
font-size: 9px;
font-weight: 900;
letter-spacing: .12em;
padding: 2px 6px;
border-radius: 4px;
animation: hub-pulse 1.5s infinite;
}
@keyframes hub-pulse {
0%,100% { opacity: 1; }
50% { opacity: .5; }
}
/* Recent results table */
.hub-results-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
}
.hub-results-table tr th {
background: var(--bg-header, var(--bg-card));
color: var(--text-muted);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.hub-results-table tr td {
padding: 10px 14px;
border-bottom: 1px solid var(--border-light);
color: var(--text-main);
vertical-align: middle;
}
.hub-results-table tr:last-child td { border-bottom: none; }
.hub-results-table tr:hover td { background: var(--bg-hover, rgba(0,0,0,.03)); }
/* ════ TEAM GRID ═════════════════════════════════════════════════ */
.hub-team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.hub-team-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 16px 12px 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
transition: transform .2s, box-shadow .2s, border-color .2s;
cursor: pointer;
}
.hub-team-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0,0,0,.1);
border-color: #6366f1;
}
.hub-team-rank {
position: absolute;
top: 8px; left: 8px;
font-size: 10px; font-weight: 900;
color: #fbbf24;
background: rgba(251,191,36,.15);
border: 1px solid rgba(251,191,36,.3);
border-radius: 4px;
padding: 1px 5px;
letter-spacing: .04em;
}
.hub-team-logo {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px;
}
.hub-team-logo img { width: 100%; height: 100%; object-fit: contain; }
.hub-team-name {
font-size: 13px; font-weight: 700;
line-height: 1.2;
color: var(--text-main);
margin-bottom: 3px;
}
.hub-team-name a { color: inherit; text-decoration: none; }
.hub-team-name a:hover { color: #6366f1; }
.hub-team-tag {
font-size: 10px; font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .06em;
}
/* ════ RANKINGS ══════════════════════════════════════════════════ */
.hub-rankings { }
.hub-rank-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.hub-rank-col-title {
font-size: 13px; font-weight: 800;
text-transform: uppercase; letter-spacing: .1em;
color: var(--text-muted);
margin-bottom: 10px;
}
.hub-rank-table {
width: 100%;
border-collapse: separate; border-spacing: 0;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 10px;
overflow: hidden;
font-size: 13px;
}
.hub-rank-table tr th {
background: var(--bg-header, var(--bg-card));
color: var(--text-muted);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
padding: 9px 14px;
border-bottom: 1px solid var(--border-light);
text-align: left;
}
.hub-rank-table tr td {
padding: 9px 14px;
border-bottom: 1px solid var(--border-light);
color: var(--text-main);
vertical-align: middle;
}
.hub-rank-table tr:last-child td { border-bottom: none; }
.hub-rank-table tr:hover td { background: var(--bg-hover, rgba(0,0,0,.03)); }
.hub-rank-table a { color: var(--text-main); text-decoration: none; font-weight: 700; }
.hub-rank-table a:hover { color: #6366f1; }
.hub-rank-num {
font-size: 14px;
text-align: center;
width: 40px;
color: var(--text-muted);
}
.hub-rank-badge {
display: inline-block;
font-size: 11px; font-weight: 800;
color: var(--text-muted);
letter-spacing: .04em;
}
.hub-rank-team { color: var(--text-muted) !important; font-weight: 500 !important; }
.hub-rank-team a { color: var(--text-muted) !important; font-weight: 500 !important; }
/* ════ MOBILE ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.hub-hero-inner { padding: 32px 24px; gap: 28px; }
.hub-hero-title { font-size: 52px !important; }
.hub-hero-stats { grid-template-columns: repeat(2,1fr); }
.hub-rank-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.hub-hero-inner { padding: 24px 16px; }
.hub-hero-title { font-size: 40px !important; }
.hub-hero-stats { grid-template-columns: repeat(2,1fr); gap: 8px; }
.hub-stat-card { padding: 12px; }
.hub-stat-val { font-size: 18px; }
.hub-tourn-grid { grid-template-columns: 1fr; }
.hub-team-grid { grid-template-columns: repeat(3, 1fr); }
.hub-rank-cols { grid-template-columns: 1fr; }
}
/* ====================
BRACKET SYSTEM v2.0
==================== */
/* ── Root & Scroll Wrapper ───────────────────────────────────── */
.bk-root {
position: relative;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 20px 0;
}
.bk-scroll {
overflow-x: auto;
padding: 10px 0 20px;
-webkit-overflow-scrolling: touch;
}
.bk-wrapper {
display: flex;
align-items: flex-start;
gap: 0;
min-width: max-content;
padding: 10px 15px;
}
/* ── Error box ───────────────────────────────────────────────── */
.bk-error {
background: rgba(239,68,68,.1);
border: 1px solid #ef4444;
color: #dc2626;
padding: 12px 16px;
border-radius: 8px;
font-size: 0.9em;
}
/* ── Section Titles (Upper / Lower bracket labels) ───────────── */
.bk-section {
margin-bottom: 24px;
}
.bk-section-title {
font-size: 0.75em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
padding: 4px 10px;
background: var(--bg-header);
border-left: 4px solid var(--border-thick, #00509d);
border-radius: 0 4px 4px 0;
margin-bottom: 16px;
display: inline-block;
}
.bk-lower-title { border-left-color: #ef4444; }
.bk-gf-title { border-left-color: #d97706; color: #d97706; }
/* ── Bracket Column ──────────────────────────────────────────── */
.bk-col {
display: flex;
flex-direction: column;
min-width: 210px;
margin-right: 44px; /* matches --bk-arm so connector lines fit cleanly */
position: relative;
}
.bk-col:last-child { margin-right: 0; }
.bk-col-header {
text-align: left;
font-size: 0.72em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
padding: 6px 4px 4px;
white-space: nowrap;
}
.bk-col-header-2 {
margin-top: 20px;
}
/* ── Match Wrap (holds label + card) ─────────────────────────── */
.bk-match-wrap {
position: relative;
margin-bottom: 8px;
}
.bk-match-label { display: none; } /* replaced by bk-header-row */
.bk-match-label-inline {
font-size: 0.68em;
font-weight: 800;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── Spacer (provides vertical alignment between rounds) ─────── */
.bk-spacer {
position: relative;
}
/* Single Elimination column spacing */
.bk-single-elim .bk-col-1 .bk-spacer { margin-bottom: 8px; }
.bk-single-elim .bk-col-2 .bk-spacer { margin-top: 30px; margin-bottom: 78px; }
.bk-single-elim .bk-col-3 .bk-spacer { margin-top: 88px; margin-bottom: 198px; }
.bk-single-elim .bk-col-4 .bk-spacer { margin-top: 208px; margin-bottom: 428px; }
/* Double Elim upper bracket spacing */
.bk-double-elim .bk-col-1 .bk-spacer { margin-bottom: 8px; }
.bk-double-elim .bk-col-2 .bk-spacer { margin-top: 30px; margin-bottom: 78px; }
.bk-double-elim .bk-col-3 .bk-spacer { margin-top: 88px; margin-bottom: 198px; }
.bk-double-elim .bk-col-4 .bk-spacer { margin-top: 208px; }
/* GSL column spacing */
.bk-gsl .bk-gsl-top { margin-bottom: 10px; }
.bk-gsl .bk-gsl-gap { height: 28px; }
.bk-gsl .bk-gsl-bot { margin-top: 0; }
.bk-gsl .bk-gsl-mid { margin-top: 0; } /* flexbox handles centering */
.bk-gsl .bk-gsl-final { margin-top: 0; } /* flexbox handles centering */
/* ── Match Card ───────────────────────────────────────────────── */
.bk-match {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 6px;
width: 200px;
max-width: 200px;
min-width: 200px;
box-sizing: border-box;
position: relative;
z-index: 2;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
overflow: visible;
}
.bk-match-clickable {
cursor: pointer;
}
.bk-match-clickable:hover {
border-color: #00509d;
box-shadow: 0 4px 12px rgba(0,80,157,0.15);
transform: translateY(-1px);
}
/* Played match gets a subtle left accent */
.bk-match-played {
border-left: 3px solid var(--border-light);
}
/* Grand Final highlight */
.bk-final-match {
border-color: rgba(217,119,6,0.5) !important;
box-shadow: 0 4px 15px rgba(217,119,6,0.1) !important;
}
.bk-final-match:hover {
border-color: #d97706 !important;
box-shadow: 0 6px 20px rgba(217,119,6,0.25) !important;
}
/* BO Badge — right side of the header row */
.bk-bo-badge {
font-size: 0.65em;
font-weight: 800;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-left: auto;
padding-right: 2px;
white-space: nowrap;
align-self: flex-end;
padding-bottom: 4px;
}
/* Header row: label left + BO right on same line */
.bk-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 200px;
padding-bottom: 4px;
}
/* ── Team Row ────────────────────────────────────────────────── */
.bk-team {
display: flex;
align-items: center;
padding: 7px 8px;
gap: 6px;
min-height: 32px;
transition: background 0.15s;
}
.bk-match-clickable:hover .bk-team {
background: var(--bg-hover);
}
/* Re-apply rounded corners to first/last team rows since overflow is now visible */
.bk-team:first-of-type {
border-radius: 6px 6px 0 0;
}
.bk-team:last-of-type {
border-radius: 0 0 6px 6px;
}
.bk-divider {
height: 1px;
background: var(--border-light);
margin: 0;
}
/* ── Team Name ───────────────────────────────────────────────── */
.bk-team-name {
flex: 1;
display: flex;
align-items: center;
gap: 5px;
overflow: hidden;
min-width: 0;
}
.bk-team-name span {
font-size: 0.85em;
font-weight: 600;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bk-team-name a {
color: inherit;
text-decoration: none;
}
.bk-team-name a:hover {
color: #00509d;
}
.bk-tbd {
color: var(--text-muted) !important;
font-style: italic;
font-weight: 400 !important;
}
.bk-team-logo {
flex-shrink: 0;
height: 18px !important;
width: auto !important;
object-fit: contain !important;
}
/* ── Win/Lose States ──────────────────────────────────────────── */
.bk-win .bk-team-name span { color: #d97706; font-weight: 700; }
.bk-win .bk-score {
background: #d97706 !important;
color: #fff !important;
}
.bk-lose .bk-team-name span { color: var(--text-muted); }
.bk-lose .bk-score { opacity: 0.6; }
.bk-win-icon {
font-size: 0.7em;
color: #d97706;
flex-shrink: 0;
font-weight: 900;
}
/* ── Score Box ───────────────────────────────────────────────── */
.bk-score {
font-weight: 800;
font-size: 0.9em;
font-family: 'Consolas', 'Monaco', monospace;
background: var(--bg-header);
color: var(--text-header);
padding: 2px 7px;
border-radius: 4px;
min-width: 22px;
text-align: center;
flex-shrink: 0;
}
/* ── Connector Lines ──────────────────────────────────────────── */
/* ── Connector Lines — SVG overlay approach ───────────────────── */
/* All bracket connectors are drawn by JavaScript into an SVG */
/* overlay positioned behind the cards. CSS pseudo-elements */
/* are unreliable with flexbox column centering. */
.bk-connector-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: visible;
}
.bk-connector-svg line {
stroke: #94a3b8;
stroke-width: 2;
}
/* GSL wrapper needs position:relative for SVG overlay */
.bk-gsl {
position: relative;
}
.bk-gsl-col1,
.bk-gsl-col2,
.bk-gsl-col3 {
position: relative;
z-index: 1; /* sit above the SVG */
}
/* ── GSL Layout ───────────────────────────────────────────────── */
.bk-gsl {
gap: 0;
align-items: stretch; /* cols stretch to same height */
}
.bk-gsl-col1 {
min-width: 230px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.bk-gsl-col2 {
min-width: 230px;
margin-left: 44px; /* matches --bk-arm */
display: flex;
flex-direction: column;
justify-content: center;
}
.bk-gsl-col3 {
min-width: 230px;
margin-left: 44px; /* matches --bk-arm */
display: flex;
flex-direction: column;
justify-content: center;
}
.bk-gsl-legend { display: none; }
/* ── Double Elim Layout ──────────────────────────────────────── */
.bk-double-elim {
flex-direction: column;
}
.bk-row {
display: flex;
align-items: flex-start;
gap: 0;
}
.bk-lower-section {
border-top: 2px solid rgba(239,68,68,0.25);
padding-top: 20px;
margin-top: 10px;
}
.bk-lb-header { color: #ef4444; }
.bk-col-lb-1, .bk-col-lb-2, .bk-col-lb-3,
.bk-col-lb-4, .bk-col-lb-5, .bk-col-lb-6 {
display: flex;
flex-direction: column;
min-width: 210px;
margin-right: 44px;
}
.bk-gf-section {
border-top: 2px solid rgba(217,119,6,0.3);
padding-top: 20px;
margin-top: 10px;
}
.bk-gf-row { align-items: flex-start; gap: 20px; }
.bk-col-gf { min-width: 230px; }
/* ── Round Robin ─────────────────────────────────────────────── */
.bk-rr {
flex-direction: column;
gap: 24px;
min-width: unset;
}
.bk-rr-section {
overflow-x: auto;
}
.bk-rr-table {
border-collapse: collapse;
font-size: 0.88em;
min-width: max-content;
}
.bk-rr-corner {
background: transparent;
border: none !important;
}
.bk-rr-th {
padding: 8px 10px;
text-align: center;
font-size: 0.8em;
font-weight: 700;
color: var(--text-muted);
background: var(--bg-header);
border: 1px solid var(--border-light);
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.bk-rr-row-hdr {
padding: 8px 10px;
font-weight: 700;
font-size: 0.85em;
background: var(--bg-header);
border: 1px solid var(--border-light);
white-space: nowrap;
text-align: right;
color: var(--text-main);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
.bk-rr-cell {
padding: 8px 12px;
text-align: center;
border: 1px solid var(--border-light);
font-weight: 700;
font-size: 0.9em;
color: var(--text-main);
background: var(--bg-card);
transition: background 0.15s;
cursor: pointer;
min-width: 50px;
}
.bk-rr-cell:hover { background: var(--bg-hover); }
.bk-rr-self {
padding: 8px 12px;
text-align: center;
border: 1px solid var(--border-light);
background: var(--bg-header);
color: var(--text-muted);
}
.bk-rr-win {
background: rgba(34,197,94,0.12) !important;
color: #15803d;
}
.bk-rr-lose {
background: rgba(239,68,68,0.08) !important;
color: #dc2626;
opacity: 0.7;
}
.bk-rr-pending { color: var(--text-muted); }
/* Standings */
.bk-rr-standings { margin-top: 20px; }
.bk-rr-stand-table {
width: 100%;
max-width: 480px;
border-collapse: collapse;
font-size: 0.88em;
}
.bk-rr-stand-table th {
padding: 6px 10px;
background: var(--bg-header);
color: var(--text-muted);
font-size: 0.78em;
text-transform: uppercase;
font-weight: 700;
border-bottom: 2px solid var(--border-light);
text-align: center;
}
.bk-rr-stand-row td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-light);
background: var(--bg-card);
text-align: center;
vertical-align: middle;
}
.bk-rr-rank { width: 32px; color: var(--text-muted); font-weight: 800; }
.bk-rr-stand-name {
text-align: left !important;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
color: var(--text-main);
}
.bk-rr-stand-name a { color: inherit; text-decoration: none; }
.bk-rr-stand-name a:hover { color: #00509d; }
.bk-rr-w { color: #15803d; font-weight: 700; }
.bk-rr-l { color: #dc2626; font-weight: 700; }
.bk-rr-pts { color: #00509d; font-weight: 900; font-size: 1em; }
/* ── Swiss ───────────────────────────────────────────────────── */
.bk-swiss {
flex-direction: column;
gap: 0;
min-width: unset;
}
.bk-swiss-round {
margin-bottom: 28px;
}
.bk-swiss-matches {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* ── Match Popup Modal ───────────────────────────────────────── */
.bk-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(3px);
animation: bkFadeIn 0.15s ease;
}
@keyframes bkFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.bk-modal {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
width: 100%;
max-width: 480px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
animation: bkSlideUp 0.2s ease;
position: relative;
}
@keyframes bkSlideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.bk-modal-close {
position: absolute;
top: 12px;
right: 14px;
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 1em;
padding: 4px 6px;
border-radius: 4px;
line-height: 1;
transition: background 0.2s, color 0.2s;
z-index: 2;
display: inline-block;
user-select: none;
}
.bk-modal-close:hover {
background: var(--bg-hover);
color: var(--text-main);
}
/* Modal Header (teams + score) */
.bk-modal-header {
background: linear-gradient(135deg, #1a2744 0%, #0f1f3d 100%);
padding: 22px 24px 18px;
text-align: center;
}
.bk-modal-teams {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 12px;
}
.bk-modal-t1, .bk-modal-t2 {
font-size: 1em;
font-weight: 800;
color: #ffffff;
flex: 1;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bk-modal-vs {
font-size: 0.75em;
font-weight: 700;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.bk-modal-score {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.bk-modal-s1, .bk-modal-s2 {
font-size: 2em;
font-weight: 900;
color: #ffffff;
font-family: 'Consolas', monospace;
min-width: 40px;
text-align: center;
background: rgba(255,255,255,0.1);
padding: 4px 12px;
border-radius: 6px;
}
.bk-modal-dash {
font-size: 1.4em;
color: rgba(255,255,255,0.4);
font-weight: 300;
}
/* Modal Meta rows */
.bk-modal-meta {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.bk-modal-row {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.88em;
color: var(--text-main);
}
.bk-modal-row:empty { display: none; }
.bk-modal-row b {
color: var(--text-muted);
font-size: 0.78em;
text-transform: uppercase;
letter-spacing: 0.06em;
min-width: 70px;
flex-shrink: 0;
padding-top: 1px;
}
.bk-modal-row a {
color: #00509d;
text-decoration: none;
font-weight: 600;
}
.bk-modal-row a:hover { text-decoration: underline; }
/* ── Dark Mode Overrides ──────────────────────────────────────── */
html.skin-citizen-dark .bk-match,
html.skin-theme-client-pref-night .bk-match,
html[class*="night"] .bk-match {
background: var(--bg-card);
border-color: var(--border-light);
}
html.skin-citizen-dark .bk-modal,
html.skin-theme-client-pref-night .bk-modal,
html[class*="night"] .bk-modal {
background: var(--bg-card);
border-color: var(--border-light);
}
/* ── Mobile ───────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
.bk-match { width: 175px; }
.bk-col { min-width: 185px; margin-right: 32px; }
.bk-gsl-col1, .bk-gsl-col2, .bk-gsl-col3 { min-width: 185px; margin-left: 32px; }
.bk-gsl-col1 { margin-left: 0; }
.bk-team { padding: 5px 6px; }
.bk-team-name span { font-size: 0.8em; }
.bk-modal { max-width: 100%; margin: 0 10px; }
.bk-modal-t1, .bk-modal-t2 { font-size: 0.85em; }
.bk-modal-s1, .bk-modal-s2 { font-size: 1.5em; }
.bk-rr-th, .bk-rr-row-hdr { padding: 6px 8px; font-size: 0.75em; }
.bk-rr-cell { padding: 6px 8px; min-width: 40px; }
}
/* Modal score win/lose states */
.bk-modal-win { background: rgba(217,119,6,0.25) !important; color: #d97706 !important; }
.bk-modal-lose { opacity: 0.5; }
/* Hide mobile banner by default on large screens */
.banner-mobile {
display: none;
}
.banner-desktop {
display: block;
}
/* Switch them when the screen is 768px or smaller (Mobile) */
@media screen and (max-width: 768px) {
.banner-desktop {
display: none !important;
}
.banner-mobile {
display: block !important;
}
}