/*
Theme Name: Red Clan Gaming Theme
Description: A nostalgic gaming clan WordPress theme with distinctive red and black design, featuring a unique frame-based layout system.
Version: 1.0.0
Author: Jens Lettkemann
Text Domain: red-clan-theme
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* === Local Fonts (Starcraft, Gabarito Variable, Staatliches) === */
@font-face {
  font-family: "Starcraft";
  src: 
	url("assets/fonts/sc.woff2") format("woff2"),
       url("assets/fonts/sc.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gabarito Var";
  src: url("assets/fonts/gabarito-variable.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Staatliches";
  src: url("assets/fonts/Staatliches-Regular.woff2") format("woff2"),
       url("assets/fonts/Staatliches-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}


/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clan-red: #ce0000;
  --clan-dark-red: #990000;
  --clan-black: #000000;
  --clan-dark-gray: #1a1a1a;
  --clan-light-gray: #333333;
  --clan-white: #ffffff;
  --clan-border: #cc0000;
  --font-primary: "Gabarito Var", system-ui, sans-serif;
  --font-gaming: "Orbitron", monospace;

  --font-body: "Gabarito Var", system-ui, sans-serif;
  --font-heading: "Staatliches", system-ui, sans-serif;
  --font-nav: "Starcraft", "Staatliches", system-ui, sans-serif;

}

body {
  font-family: var(--font-primary);
  background-color: #fff;
  color: var(--clan-white);
  line-height: 1.6;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;  
  padding: 18px;
  
/* Changed from flex-start to center for proper vertical centering
  cursor: url("http://red-clan.local/wp-content/uploads/2025/09/openhand.cur"), auto;
*/
  }






/* Container and Layout - Updated for true centered box design */
.site-container {
  width: 100%;
  max-width: 1100px; /* Increased from 1000px to make box slightly bigger */
  display: flex;
  flex-direction: column;
  background: transparent;
  margin: 0 auto;
}

/* Top Header - Attached directly to main box */
.top-header {
  color: #000;
  font-size: 16px;
  border-bottom: none;
  height: 56px;
}

.top-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.custom-logo,
.site-icon-fallback { height: 48px; width: auto; }
.site-title-link { 
    font-weight: 700; 
    text-decoration: none; 
    font-size: 42px;
    color: #000;
    
}



.top-nav {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  width: 76%;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 14px;
}

.top-nav a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s;
}

.top-nav a:hover {
  color: var(--clan-red);
}

/* Top bar icons + spacing */
.top-nav .top-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.top-nav .nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  vertical-align: middle;
}


/* Main Navigation - Attached directly to main box */
.main-navigation {
  background: var(--clan-red);

  overflow: hidden;

}

.main-nav {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0;          /* remove UL default padding */
  margin: 0;
  flex-wrap: wrap;
  justify-content: space-between;   /* or space-evenly */
  column-gap: 0;       /* important: no horizontal gap */
  row-gap: .5rem;      /* only vertical spacing between lines */
  border-left: 20px solid var(--clan-red);
  border-right: 20px solid var(--clan-red);
}

.main-nav .menu-item {
    flex: 0 0 auto;
}

.main-nav a {
  color: var(--clan-white);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  padding: 8px 2px;
  font-size: 18px;
  transition: background-color 0.3s;

}

.main-nav a:hover,
.main-nav a.current {
  color: var(--clan-dark-red);
}

.main-nav a:last-child {
  border-right: none;
}

/* Main Content Box - True centered design */
.content-box {
  background: var(--clan-red);
  border: 20px solid var(--clan-red);
  border-top: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 820px; /* Fixed height instead of flex: 1 and min-height */
}

/* Main Frame */
.main-frame {
  background: var(--clan-black);
  flex: 1;
  padding: 30px 40px;
  overflow-y: auto; /* Ensures scrolling is always available */
  overflow-x: hidden; /* Prevents horizontal scrolling */
  position: relative;

}

.main-frame h1,
.main-frame h2,
.main-frame h3 {
  color: var(--clan-white);
  margin-bottom: 15px;
  font-family: var(--font-heading);
  font-size: 32px;
}

.main-frame h3 {
  color: var(--clan-white);
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-size: 28px;
}


.main-frame p {
  margin-bottom: 15px;
  color: #cccccc;
}

.main-frame h2,
.entry-content h2 {
  margin-top: 2rem;
}

.news-list h2 {
  margin-top: 0;
}

.main-frame a {
  color: var(--clan-red);
  text-decoration: none;
}

.main-frame a:hover {
  text-decoration: underline;
}

/* Scrollbar Styling */
.main-frame::-webkit-scrollbar {
  width: 14px; /* Made scrollbar slightly wider for better visibility */
}

.main-frame::-webkit-scrollbar-track {
  background: var(--clan-dark-gray);
  border-radius: 7px; /* Added border radius to match thumb */
}

.main-frame::-webkit-scrollbar-thumb {
  background: var(--clan-red);
  border-radius: 7px; /* Increased border radius for better appearance */
  border: 2px solid var(--clan-dark-gray); /* Added border for better definition */
}

.main-frame::-webkit-scrollbar-thumb:hover {
  background: var(--clan-dark-red);
}

/* Added Firefox scrollbar styling */
.main-frame {
  scrollbar-width: thin;
  scrollbar-color: #fff var(--clan-dark-gray);
}

/* Three Widget Frames */
.widget-frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--clan-red);
  height: 250px; /* Fixed height for widget frames */
}

.widget-frame {
  background: var(--clan-black);

  position: relative;
  overflow-y: auto; /* Added scrolling for widget frames if content overflows */
}

.widget-frame h3 {
  color: var(--clan-dark-red);
  background: var(--clan-red);
  font-family: var(--font-nav);
  font-size: 20px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--clan-red);
}

.widget-frame h3 a {
  color:  var(--clan-dark-red);
  text-decoration: none;
}

.widget-frame p {
  color: #cccccc;
  font-size: 12px;
  line-height: 1.4;
}

/* Clanwar list styling with flags */
.clanwar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
}

.clanwar-link {
    color: white;
    display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: 0px 2px;
  text-decoration: none;
  width: 100%;            /* <-- full width */
}

.clanwar-item {
  display: flex;
  align-items: center;
  padding: 5px 6px 5px 4px;
  border-bottom: 1px solid var(--clan-dark-gray);
  font-size: 12px;
  color: #cccccc;
}



.clanwar-league {
  color: white;
  font-weight: bold;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 3px 6px;
  flex-shrink: 0;
  margin-right: 2px;

}

.clanwar-teams {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}


.clanwar-flag {
  width: 16px;
  height: 12px;
  object-fit: cover;
  margin: 0 3px;
}

.clanwar-vs {
  color: #888;
  margin: 0 3px;
}

.clanwar-score {
  margin-left: auto;
  font-weight: bold;
}

.clanwar-score.win {
  color: #00ff00;
}

.clanwar-score.loss {
  color: #ff0000;
}

.clanwar-date {
  font-size: 11px;
  color: #888;
  margin-left: 5px;
}

/* row backgrounds by result */
.clanwar-item.result-win  { background: rgba(16,185,129,.12); }
.clanwar-item.result-loss { background: rgba(239,68,68,.12); }
.clanwar-item.result-draw { background: rgba(156,163,175,.14); }


/* Replay list styling */
.replay-list {
  list-style: none;
  padding: 0;
  margin: 0;

}

.replay-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--clan-dark-gray);
  font-size: 12px;
  color: #cccccc;
  cursor: pointer;
  transition: background-color 0.2s;
}

.widget-frame .replay-item {
  padding: 5px 0px 6px 8px;
}

.replay-item:hover {
  background-color: var(--clan-dark-gray);
}

.replay-item:last-child {
  border-bottom: none;
}

.replay-date {
  color: #888;
  width: 50px;
  flex-shrink: 0;
  font-size: 11px;
}

.replay-players {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}

.replay-players .vs {
  color: #888;
  margin: 0 3px;
}

.replay-download {
  margin-left: auto;
  padding: 2px 6px;
  background: var(--clan-red);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
}

a.replay-download {
    margin-right: 8px;
}

.replay-download:hover {
  background: var(--clan-dark-red);
}

a.replay-download,
.replay-download a {
  color: var(--clan-white) !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
}

/* Footer */
.site-footer {
  color: var(--clan-black);
  text-align: center;
  font-size: 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.footer-nav {
  display: flex;
  justify-content: end;
  gap: 20px;

  position: absolute;
   right: 0;
   width: 145px;


  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--clan-red);
  text-decoration: none;
  transition: color 0.3s;
	font-weight: 500;
}

.footer-nav a:hover {
  color: var(--clan-red);
}

.footer-info {
    margin-top: 4px;
    justify-content: center;
    width: 100%;
    
}

/* WordPress Specific Styles */
.wp-block-group {
  margin-bottom: 20px;
}

.wp-block-image {
  margin-bottom: 15px;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Accessibility */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* Focus styles for keyboard navigation */
a:focus,
button:focus,
summary:focus {
  outline: 2px solid var(--clan-red);
  outline-offset: 2px;
}

/* Additional styling for better visual hierarchy */
.entry-header {
  margin-bottom: 20px;


}

.entry-title {
  color: var(--clan-red);
  font-family: var(--font-gaming);
  font-size: 24px;
  margin-bottom: 10px;
}

.entry-meta {
  color: #888;
  font-size: 12px;
}

.replay-meta {
  background: var(--clan-dark-gray);
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.replay-meta h3 {
  color: var(--clan-red);
  font-size: 16px;
  margin-bottom: 10px;
}

/* Added styling for race icons and improved replay display */
.race-icon {
  width: 28px;
  height: 14px;
  object-fit: contain;
  margin: 0 2px;
  vertical-align: middle;
}

.replay-opponents {
  margin-bottom: 15px;
  padding: 10px;
  background: var(--clan-dark-gray);
  border-radius: 4px;
}

.replay-opponents h3 {
  color: var(--clan-red);
  font-size: 14px;
  margin-bottom: 8px;
}

.replay-opponents .vs {
  color: #888;
  margin: 0 5px;
  font-weight: bold;
}

/* Added spoiler styling for replay scores */
.replay-score-spoiler {
  margin: 15px 0;
}

.replay-score-spoiler details {
  background: var(--clan-dark-gray);
  border: 1px solid var(--clan-red);
  border-radius: 4px;
  padding: 10px;
}

.replay-score-spoiler summary {
  color: var(--clan-red);
  cursor: pointer;
  font-weight: bold;
  user-select: none;
  outline: none;
}

.replay-score-spoiler summary:hover {
  color: var(--clan-white);
}

.replay-score-spoiler details[open] summary {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--clan-red);
  padding-bottom: 5px;
}

.replay-score-spoiler p {
  margin: 0;
  color: var(--clan-white);
}

/* Enhanced download button styling */
.download-button {
  background: var(--clan-red);
  color: var(--clan-white) !important;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none !important;
  font-weight: bold;
  display: inline-block;
  transition: background-color 0.3s;
}

.download-button:hover {
  background: var(--clan-dark-red);
}

/* WordPress menu styling fixes */
.top-nav-menu,
.main-nav,
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav-menu li,
.main-nav li,
.footer-nav li {
  display: inline-block;
}

.top-nav-menu a,
.main-nav a,
.footer-nav a {
  display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding: 10px;
    align-items: flex-start; /* On mobile, align to top for better usability */
  }

  .site-container {
    max-width: 100%;
  }

  .top-header-content {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }

  .main-nav {
    flex-direction: column;
  }

  .main-nav a {
    border-right: none;
    border-bottom: 1px solid var(--clan-dark-red);
  }

  .main-nav a:last-child {
    border-bottom: none;
  }

  .widget-frames {
    grid-template-columns: 1fr;
    height: auto; /* Allow flexible height on mobile */
  }

  .content-box {
    height: auto; /* Allow flexible height on mobile */
    min-height: 500px; /* But maintain minimum height */
  }

  .main-frame {
    height: 300px; /* Smaller fixed height on mobile */
  }

  .widget-frame {
    min-height: 150px; /* Maintain minimum height on mobile */
  }

  .footer-nav {
    flex-direction: column;
    gap: 10px;
  }

  .replay-players {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .race-icon {
    width: 28px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .main-frame {
    padding: 15px;
  }

  .widget-frame {
    padding: 10px;
    min-height: 150px;
  }

  .clan-logo {
    font-size: 14px;
  }

  .replay-date {
    width: 50px;
  }

  .clanwar-flag,
  .race-icon {
    width: 28px;
    height: 12px;
  }
}


/* === Typeface assignments === */
/* Body/content uses Gabarito variable */
html, body { font-family: var(--font-body); }

/* Main navigation uses Starcraft */
.main-navigation,
.main-nav,
.main-nav a { font-family: var(--font-nav); }

/* Site title text uses Staatliches */
.site-title-link { font-family: var(--font-heading); }

/* === Members refinements (flags, icons, tags) === */
.members-table-wrap { overflow-x: auto; margin-top: 1rem; }
.members-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.members-table th,
.members-table td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.members-table thead th {
  font-family: var(--font-heading);
  font-size: 1rem;
}
.members-table .col-flag { width: 68px; font-size: 1rem;text-align:center;}
.flag-icon { height: 12x; width: 18px; vertical-align: middle; image-rendering: pixelated; }
.members-table .race-icon { height: 14px; width: auto; vertical-align: middle; image-rendering: pixelated; }
.members-table .col-name a { text-decoration: none; font-weight: 600; }

.badge {
  display: inline-block;
  padding: .15rem .45rem;
  font-size: .85rem;
  border-radius: .375rem;
  line-height: 1.2;
}
.badge-active   { background: rgba(16,185,129,.15); color: #34d399; }
.badge-inactive { background: rgba(239, 68, 68,.15); color: #f87171; }
.badge-honorary { background: rgba(99,102,241,.15); color: #a78bfa; }

h2.squad-heading {

  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .4rem;
  font-size: .75rem;
  line-height: 1.2;
  border-radius: .35rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.tag-leader { background: rgba(251, 191, 36, .18); border-color: rgba(251, 191, 36, .35); }
.tag-orga   { background: rgba(59, 130, 246, .18); border-color: rgba(59, 130, 246, .35); }
.tag-vip    { background: rgba(236, 72, 153, .18); border-color: rgba(236, 72, 153, .35); }

/* Single member */
.member-single .member-thumb { margin: 1rem 0; }
.member-single .member-meta-line { display:flex; align-items:center; gap:.5rem; opacity:.9; }
.member-single .race-icon, .member-single .flag-icon { width:28px;height: 14px;}
.member-single .member-note { margin: 1rem 0; }

/* === Members header + micro stats === */
.members-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.members-header .entry-title { margin: 0; }
.members-meta { display: flex; align-items: center; gap: 1rem; }
.members-total { font-weight: 700; }
.race-stats { display: flex; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.race-stat { display: inline-flex; align-items: center; gap: .3rem; opacity: .9; }
.race-stat .race-code { font-weight: 600; }
.race-stat .race-count { font-weight: 700; }
.race-stats .race-icon { height: 14px; width: auto; image-rendering: pixelated; }

/* === Standardize member table column widths across all lists === */
.members-table { table-layout: fixed; }
.members-table .col-name a { text-decoration: none; font-weight: 600; }
/* widths via <colgroup> */
.members-table col.w-flag   { width: 68px; }
.members-table col.w-name   { width: 30%; }     /* consistent name column */
.members-table col.w-race   { width: 90px; }
.members-table col.w-status { width: 120px; }
.members-table col.w-note   { width: auto; }

/* Prevent overflows on long names/notes */
.members-table .col-name,
.members-table .col-note { overflow-wrap: anywhere; }

/* === Join CTA === */
.join-cta {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  background: rgba(255,255,255,.04);
}
.btn.btn-discord {
  display: inline-block;
  margin-top: .5rem;
  padding: .5rem .9rem;
  border-radius: .6rem;
  text-decoration: none;
  font-weight: 700;
  background: #5865F2; /* Discord blurple */
  color: #fff;
}
.btn.btn-discord:hover { filter: brightness(1.1); }




/* === MOTD widget (image/GIF background + readable text) === */
.widget-frame.widget-motd { position: relative; overflow: hidden; }
.widget-motd .motd-inner {
  position: relative;
  min-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--motd-text-color, #fff);
}
.widget-motd .motd-inner.has-bg {
  background-image: var(--motd-bg);
  background-size: cover;
  background-position: center;
}
/* Overlay to dim the image for readability */
.widget-motd .motd-inner.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--motd-overlay-opacity, .4));
}
/* Text panel above the overlay for extra contrast */
.widget-motd .motd-text {
  position: relative;
  z-index: 1;
}
.widget-motd .motd-text-panel {
  display: inline-block;
  background: rgba(0,0,0,.35);
  padding: .5rem .75rem;
  border-radius: .5rem;
  backdrop-filter: saturate(120%) blur(1px);
}
.widget-motd .motd-text-panel p {
  margin: 0;
  font-size: 16px;
}




/* === Events page === */
.events-meta { margin: .5rem 0 1rem; opacity: .9; font-weight: 600; margin-left:auto;}
.events-total { font-weight: 700; }

.events-section + .events-section { margin-top: 1.5rem; }

.events-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.event-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: .5rem .75rem;
  align-items: baseline;
  padding: .5rem .25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.event-date { font-variant-numeric: tabular-nums; opacity: .85; }
.event-title { text-decoration: none; font-weight: 700; }
.event-title:hover { text-decoration: underline; }
.event-excerpt { grid-column: 2 / -1; opacity: .9; }
.event-loc { margin-left: .5rem; opacity: .9; font-size: .95em; }
.event-link { margin-left: .5rem; font-size: .95em; text-decoration: none; }
.event-link:hover { text-decoration: underline; }




.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border: none; }





/* score icon before result */
.clanwar-score .score-icon { margin-right: 4px; font-size: .9em; }

/* colors (win/loss already set for text; add draw + ensure icon inherits) */
.clanwar-score.win  { color: #10b981; }   /* green */
.clanwar-score.loss { color: #ef4444; }   /* red */
.clanwar-score.draw { color: #9ca3af; }   /* gray */



.gtranslate_wrapper, .gtranslate {
  display:inline-block; 
}

.language-switcher {
  position: absolute;
  left: 0;
}

.language-switcher a {
  color: var(--clan-red)
}

.language-switcher a:hover {
  text-decoration: underline;
}






/* Events: card layout */
.events-grid {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 980px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .events-grid { grid-template-columns: 1fr; }
}

.event-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .75rem;
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.event-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.event-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.event-card__date {
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.event-card__title {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.2;
}
.event-card__title:hover { text-decoration: underline; }
.event-card__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem;
  opacity: .95; font-size: .95em;
}
.event-card__excerpt { opacity: .9; }

/* Subtle type tint per kind (optional) */
.event-card.type-clanwar { background: rgba(239,68,68,.05); }
.event-card.type-event   { background: rgba(99,102,241,.05); }




/* ===== Red Clan mini calendar ===== */
.rcal-wrap { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; padding: .75rem; }
.rcal-head { display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; }
.rcal-month { font-weight: 900; letter-spacing: .02em; }

.rcal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rcal th, .rcal td { padding: .35rem .25rem; text-align: center; }
.rcal thead th { font-size: 12px; opacity: .8; font-weight: 700; }
.rcal tbody td { border: 1px solid rgba(255,255,255,.06); }

.rcal-empty { background: rgba(255,255,255,.02); }

.rcal-day { position: relative; vertical-align: top; min-height: 58px; }
.rcal-day .rcal-num { font-weight: 800; font-variant-numeric: tabular-nums; opacity: .9; }
.rcal-day.is-today { background: rgba(0,0,0, 0.9) !important; }
.rcal-day.has-items { background: rgba(255,255,255,.04); }

.rcal-dots { margin-top: .35rem; display: flex; gap: .25rem .35rem; flex-wrap: wrap; justify-content: center; }
.rcal-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; border: 1px solid rgba(255,255,255,.35);
}
.rcal-type-clanwar { background: rgba(239,68,68,.85); }   /* red */
.rcal-type-event   { background: rgba(99,102,241,.85); }  /* indigo */
.rcal-more { font-size: 11px; font-weight: 800; opacity: .9; }

.rcal-legend { margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: 12px; opacity: .9; }
.rcal-leg-sep { opacity: .5; margin: 0 .35rem; }






/* Tiny CW line bits */
.flag-16 { width: 18px; height: 12px; object-fit: cover; image-rendering: pixelated; }
.cw-line .sep { margin: 0 .35rem; opacity: .8; }

/* Pagination */
.navigation.pagination { margin-top: .75rem; }
.navigation.pagination .page-numbers { display: inline-block; padding: 4px 8px; margin: 0 2px; border: 1px solid rgba(255,255,255,.14); border-radius: .4rem; text-decoration: none; }
.navigation.pagination .page-numbers.current { background: rgba(255,255,255,.08); font-weight: 800; }





/* Front two-column keeps the same */
.front-layout { display:grid; grid-template-columns: 1fr 340px; gap: 2rem; }
@media (max-width: 1100px){ .front-layout { grid-template-columns: 1fr 320px; } }
@media (max-width: 880px) { .front-layout { grid-template-columns: 1fr; } }

/* Unified feed container */
.feed-list { list-style:none; margin:.2rem 0 0; padding:0; display:grid;  }

/* Prominent blog posts (no card) */
.front-layout .feed-post {  border-bottom:1px solid rgba(255,255,255,.10); }
.feed-post:last-child { border-bottom: none; }
.feed-post__meta { display:flex; align-items:center; gap:.5rem;  font-size: 12px;font-weight: bold; }
.feed-date { font-variant-numeric: tabular-nums; opacity:.9; }

.feed-post .dot { opacity:.45; }
.feed-post__title { 
	display: inline-block;
  margin:.2rem 0 .35rem; 
  font-family: var(--font-heading);
  font-weight:900; 
  font-size:32px; 
  line-height:1.2; 
  color:#fff; 
  text-decoration:none; 
}

.feed-post__excerpt { opacity:.95; }

.notice-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: 0 8px; }

.notice-title { color:#fff; text-decoration:none; font-weight:800; }
.notice-title:hover { text-decoration:underline; }
.notice-meta { opacity:.95; font-size:.95em; display:flex; flex-wrap:wrap; gap:.4rem .6rem;padding: 0 8px; }
.notice-foot { opacity:.9; font-size:12px; }
.notice-foot .byline a { text-decoration:none; color:#aab4ff; }
.notice-foot .byline a:hover { text-decoration:underline; }

/* tiny bits reused */
.flag-16 { width:18px; height:12px; object-fit:cover;  image-rendering:pixelated; }
.cw-line .sep { margin:0 .35rem; opacity:.8; }

/* News page uses the same .feed-post look in a single column */
.news-list .feed-post { margin-bottom:1rem; }


.notice-head .feed-date { opacity: .85; font-size: 12px; }

/* Prominent posts remain roomy */
.feed-post { padding-bottom: 1rem; }


/* Small separators */
.notice-meta .sep { opacity: .65; }











/* Upload form block */
.replay-upload { margin: 0 0 10px; }
.replay-upload > summary {
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-weight: 700;
  margin-bottom: .5rem;
}
.replay-upload[open] > summary { background: rgba(255,255,255,.08); }

.replay-upload-form .form-row { margin-bottom: .6rem; }
.replay-upload-form label { display:block; font-weight: 700; margin-bottom: .25rem; }
.replay-upload-form input[type="text"],
.replay-upload-form textarea,
.replay-upload-form input[type="file"] {
  width: 100%; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 8px;
}
.replay-upload-form .hint { opacity: .7; font-size: 12px; }


/* Make the whole row clickable on the archive */
.replay-item > .replay-row { display:flex; align-items:center; gap:.5rem; width:100%; text-decoration:none; color:inherit; }

/* Download icon (SVG) – make it white and tight */
.icon-download { width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; filter: brightness(0) invert(1); }




/* Hide replay title but keep structure intact */
body.single-replay .entry-header .entry-title { display: none; }


/* 2-col grid inside replay upload form */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
@media (max-width: 800px){
  .form-grid-2 { grid-template-columns: 1fr; }
}







/* === Shell theme variables (outside content box) === */
:root {
  --shell-bg: #ffffff;
  --topbar-link: #000000;
  --topbar-link-hover: var(--clan-red);
  --toggle-track-bg: rgba(0,0,0,.08);
  --toggle-thumb-bg: #ffffff;
}
html[data-shell-theme="dark"] {
  --shell-bg: #0a0a0a;
  --topbar-link: #e5e7eb;
  --topbar-link-hover: #ffffff;
  --toggle-track-bg: rgba(255,255,255,.18);
  --toggle-thumb-bg: #0a0a0a;
}

/* ONLY change page background; do NOT touch text color globally */
body { background-color: var(--shell-bg) !important; }

/* Top header/nav text follows shell theme; content box remains unchanged */
.top-header,
.site-title-link,
.top-nav a { color: var(--topbar-link) !important; }
.top-nav a:hover { color: var(--topbar-link-hover) !important; }

/* Toggle button (unchanged from before) */
.theme-toggle { position: fixed; top: 14px; right: 18px; z-index: 9999; user-select: none; }
.theme-toggle .toggle { border: 0; background: transparent; padding: 0; cursor: pointer; }
.theme-toggle .toggle-track {
  position: relative; width: 56px; height: 30px; border-radius: 999px;
  background: var(--toggle-track-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: background-color .2s ease, box-shadow .2s ease;
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 0 8px; font-size: 14px;
}
.theme-toggle .toggle-sun, .theme-toggle .toggle-moon { opacity: .65; transform: scale(.9); transition: opacity .2s, transform .2s; }
.theme-toggle .toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--toggle-thumb-bg); box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background-color .2s ease;
}
html[data-shell-theme="dark"] .theme-toggle .toggle-thumb { transform: translateX(26px) rotate(360deg); }
html[data-shell-theme="dark"] .theme-toggle .toggle-sun { opacity: .35; transform: scale(.85); }
html[data-shell-theme="dark"] .theme-toggle .toggle-moon { opacity: .95; transform: scale(1); }

/* Top-nav SVGs: quick CSS-only recolor if they are <img> tags */
.top-nav .nav-icon {  vertical-align: -2px; filter: none; }
html[data-shell-theme="dark"] .top-nav .nav-icon { filter: brightness(0) invert(1); } /* looks white on dark */

/* If your SVGs are inline <svg> (see Option B), make them follow text color */
.top-nav svg.nav-icon {  fill: currentColor; }





/* ===== Media page ===== */
.media-section { margin: .5rem 0 1.25rem; }
.media-section-title { font-weight: 900; margin: 0 0 .5rem; }

.media-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
@media (min-width: 900px) {
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.media-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: .6rem; overflow: hidden; }
.media-figure { display: grid; gap: 6px; }
.media-img { display: block; width: 100%; height: auto; }
.media-caption { padding: 6px 8px; font-size: 12px; opacity: .9; }
.media-card a { text-decoration: none; color: inherit; }
.media-card:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }




/* ===== Downloads list (slim like replays) ===== */
.download-list { list-style:none; margin:.5rem 0 0; padding:0; }
.download-item {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:6px 0;
}
.download-item:last-child { border-bottom:none; }

.download-row {
  display:flex; align-items:baseline; gap:.6rem;
  text-decoration:none; color:inherit; flex:1 1 auto; min-width:0;
}
.download-date { font-variant-numeric: tabular-nums; opacity:.85; min-width:3.2ch; }
.download-title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.download-meta { opacity:.8; font-size:12px; }
.download-desc { opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.download-list a {
  color: #ffffff;
}

.download-actions { flex:0 0 auto; display:flex; gap:.4rem; }
.btn-view,
.btn-download,
.download-button {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; cursor:pointer;
  padding:4px 8px; border-radius:.45rem; font-weight:800; font-size:12px;
}
.btn-view:hover, .btn-download:hover, .download-button:hover {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20);
}

/* Inline SVG icon style */
.icon-download { width:12px; height:12px; display:inline-block; vertical-align:-2px; }

/* Single page tweaks */
.single-download .entry-meta { opacity:.9; }


/* Pills used for categories */

.pill-cat { margin-right:4px; }

/* Filter nav */
.dl-filter { margin:0 0 1.5em 0; }
.dl-filter ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.dl-filter .pill-cat:hover { background: rgba(255,255,255,.12); }


/* Row tweaks to fit pills nicely */
.download-row { align-items:center; }
.download-tags { display:inline-flex; gap:4px; flex-wrap:wrap; }

/* Ensure inline SVG inherits link color */
.icon-download { width:12px; height:12px; vertical-align:-2px; }
.icon-download * { fill: currentColor !important; }





/* Replay widget download icon */
.replay-list .replay-download .icon-download { width:14px; height:14px; vertical-align:-2px; }
.replay-list .replay-download .icon-download * { fill: currentColor !important; }
.widget-frame .replay-list .replay-download {
  margin-right: 0;
  padding: 2px 6px;
  background:  none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.widget-frame .replay-date {
  width: 45px;

}









/* ==== Gutenberg table in content (dark, no borders, gentle zebra) ==== */

/* Kill any wrapper/frame the theme/Gutenberg adds */
.content-box figure.wp-block-table.is-style-regular {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hard reset borders & shadows */
.content-box .wp-block-table.is-style-regular,
.content-box .wp-block-table.is-style-regular table,
.content-box .wp-block-table.is-style-regular th,
.content-box .wp-block-table.is-style-regular td {
  border: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box;
}

/* Keep layout; remove gaps between cells so no “white lines” appear */
.content-box .wp-block-table.is-style-regular table.has-fixed-layout {
  width: 100%;
  border-collapse: collapse;   /* prevents seams */
  border-spacing: 0;
  table-layout: fixed;         /* Gutenberg’s default; keeps columns steady */
}

/* Cells */
.content-box .wp-block-table.is-style-regular th,
.content-box .wp-block-table.is-style-regular td {
  padding: 10px 12px;
  font-size: 13px;
  color: #e9e9e9;
  background: transparent;
  vertical-align: middle;
}

/* Treat first row like a header (your HTML uses <td>) */
.content-box .wp-block-table.is-style-regular thead th,
.content-box .wp-block-table.is-style-regular tbody > tr:first-child > td {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(255,255,255,.08);   /* more visible than before */
}

/* Zebra striping (subtle but visible) */
.content-box .wp-block-table.is-style-regular tbody > tr:not(:first-child):nth-child(odd) > td {
  background: rgba(255,255,255,.035);
}
.content-box .wp-block-table.is-style-regular tbody > tr:not(:first-child):nth-child(even) > td {
  background: rgba(255,255,255,.02);
}

/* Hover highlight */
.content-box .wp-block-table.is-style-regular tbody > tr:hover > td {
  background: rgba(255,255,255,.07);
}

/* Links inside table */
.content-box .wp-block-table.is-style-regular a {
  color: #fff;
  text-decoration: none;
}
.content-box .wp-block-table.is-style-regular a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Optional: tidy date column */
.content-box .wp-block-table.is-style-regular td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}






/* Past clanwar date looks lighter/smaller */
.clanwar-list .clanwar-date.is-past { opacity:.65; font-size:11px; }




 a.frontpage-notice {
  color: white;
}

a.frontpage-notice:hover {
  text-decoration: none;
}





/* --- Replay archive buttons (so they’re not empty) --- */
.replay-actions { display:flex; gap:.4rem; margin-left:auto; align-items:center; }
.replay-actions .btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:4px 8px; border-radius:8px; text-decoration:none;
  border:1px solid rgba(255,255,255,.14); font-size:11px; font-weight:700;
  color:#ddd; background:rgba(255,255,255,.05);
}
.replay-actions .btn:hover { background:rgba(255,255,255,.09); }
.replay-actions .btn .icon-download { width:14px; height:14px; vertical-align:middle; display:inline-block; }
.replay-actions .btn .btn-text { line-height:1; }

/* The existing .replay-download (if used elsewhere) */
.download-button, .replay-download {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:6px 10px; border-radius:8px; text-decoration:none;
  
  font-weight:800; font-size:12px; color:#eaeaea;
}
.download-button .icon-download, .replay-download .icon-download { width:16px; height:16px; }

/* Mini map/time on archive rows */
.replay-mini { margin-right: 1rem; opacity:.85; font-size:12px; margin-left: auto;}
.replay-mini .replay-mini-map {  font-weight:600; }
.replay-mini .replay-mini-time { font-variant-numeric: tabular-nums; }

/* Spoiler blur for winner */
.spoiler-blur { filter: blur(6px); cursor: pointer; transition: filter .2s ease; }
.spoiler-blur.revealed { filter: none; }







/* Replay map thumbnail */
.map-thumb {
  margin: .4rem 0 .6rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.map-thumb img { display:block; width:100%; height:auto; }
.map-thumb figcaption {
  font-size: 11px; opacity:.85; padding: .35rem .5rem;
  background: rgba(0,0,0,.25);
}

/* Meta grid in details */
.meta-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.35rem .75rem; }
.meta-grid strong { color:#e6e6e6; }


/* ===== Replay Single: Epic Layout ===== */

/* HERO */
.replay-hero{
  margin: .35rem 0 1rem;
  background: linear-gradient(90deg, rgba(239,68,68,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .9rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .75rem;
  align-items: center;
}
.rh-side{ display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; }
.rh-right{ align-items:flex-end; text-align:right; }
.rh-name{
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
}
.rh-apm{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}
.rh-race{ width: 28px; height: 18px; object-fit: contain; image-rendering: pixelated; }
.rh-vs{
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  padding: .4rem .8rem;
  border-radius: .6rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}

/* GRID */
.replay-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}
@media (max-width: 920px){
  .replay-grid{ grid-template-columns: 1fr; }
}

.replay-info{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .75rem;
  padding: .9rem;
}
.replay-info h3 { margin: 0 0 .5rem; font-family: var(--font-heading); }

.replay-dl { display: grid; gap: .35rem; }
.replay-dl .dl-row { display:flex; gap:.6rem; }
.replay-dl dt { min-width: 110px; color:#e6e6e6; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.replay-dl dd { margin: 0; opacity: .95; }

.winner-wrap { margin-top: .75rem; }
.why-wrap { margin-top: .75rem; }

/* Map card (right column) */
.replay-mapcard{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .75rem;
  padding: .9rem;
}
.replay-mapcard h3 { margin: 0 0 .5rem; font-family: var(--font-heading); }

/* Use same styling for link as the old button */
.map-card-btn, .map-card-link{
  display:block; width:100%; background: transparent; padding:0; margin:0; border:0; cursor:pointer;
  text-align: left;
}
.map-card-btn img, .map-card-link img{
  display:block; width:100%; height:auto; border-radius: .6rem; border: 1px solid rgba(255,255,255,.10);
}
.map-card-btn .zoom-hint, .map-card-link .zoom-hint{
  display:block; text-align:center; font-size: 11px; opacity:.85; margin-top:.4rem;
}


/* Modal (map zoom) */
.modal-open { overflow: hidden; }
.map-modal[hidden] { display:none !important; }
.map-modal__backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1000;
}
.map-modal__dialog{
  position: fixed; inset: 5% 8% auto 8%; z-index: 1001;
  background: #0b0b0b; border-radius: .8rem; overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.map-modal__dialog img{ display:block; width:100%; height:auto; }
.map-modal__dialog figcaption{ padding:.5rem .75rem; font-size:12px; opacity:.9; }
.map-modal__close{
  position:absolute; top:6px; right:10px; font-size:22px; line-height:1; border:0; background:transparent; color:#fff; cursor:pointer; opacity:.85;
}
.map-modal__close:hover{ opacity:1; }

/* Keep your spoiler blur effect consistent */
.spoiler-blur { filter: blur(6px); cursor: pointer; transition: filter .2s ease; }
.spoiler-blur.revealed { filter: none; }

/* Keep header title hidden as before */
body.single-replay .entry-header .entry-title { display: none; }

/* Action bar under details */
.replay-actions-bar { display:inline-block; margin-top:2rem;}








@media (max-width: 920px){
  .cw-left .cw-team, .cw-right .cw-opp { font-size:22px; }
}


/* ===== Clanwar single: centered score/league and compact list ===== */
.cw-hero{
  margin:.35rem 0 1rem;
  background: linear-gradient(90deg, rgba(239,68,68,.12), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:.9rem;
  padding:1rem;
  display:grid; grid-template-columns:1fr auto 1fr; gap:.75rem; align-items:center;
}
.cw-side{ display:flex; gap:.4rem; align-items:center; }
.cw-left .cw-team, .cw-right .cw-opp { font-family: var(--font-heading); font-size:26px; color:#fff; }
.cw-center{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.cw-score-big{
  font-family: var(--font-heading);
  font-size: 40px; font-weight: 900; line-height: 1;
  letter-spacing:.02em;

}
.cw-score-big.win{ color: #10b981; }   /* green */
.cw-score-big.loss{ color: #ef4444; }  /* red */
.cw-score-big.draw{ color: #9ca3af; }  /* gray */
.cw-league-big{
  font-weight: 900; letter-spacing:.06em; text-transform: uppercase;
  font-size: 12px; opacity:.9;
}

/* Details block (kept from before) */
.cw-details { background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10); border-radius:.75rem; padding:.9rem; margin:.75rem 0; }
.cw-dl{ display:grid; gap:.35rem; }
.cw-dl .dl-row{ display:flex; gap:.6rem; }
.cw-dl dt{ min-width:110px; color:#e6e6e6; font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.cw-dl dd{ margin:0; }

/* Compact match list */
.cw-matchlist.cw-compact{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.35rem; }
.cw-match{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem;
  padding:.45rem .6rem;
}
.cw-match.win{ box-shadow: inset 0 0 0 1px rgba(16,185,129,.22); }
.cw-match.loss{ box-shadow: inset 0 0 0 1px rgba(239,68,68,.22); }
.cw-match.draw{ box-shadow: inset 0 0 0 1px rgba(156,163,175,.22); }
.cw-line{ display:flex; align-items:center; gap:.3rem; justify-content:space-between; }
.cw-line .kind{ font-weight:900; font-size:11px; text-transform:uppercase; opacity:.9; }
.cw-line .teams{ flex:1; display:flex; align-items:center; gap:.35rem; justify-content:center; min-width:0; }
.cw-line .sep{ opacity:.75; margin: 0 .2rem; }
.cw-line .score{ font-weight:900; font-variant-numeric: tabular-nums; }
.cw-sub{ margin-top:.2rem; display:flex; gap:.6rem; justify-content:space-between; font-size:12px; opacity:.9; flex-wrap:wrap; }
.race-icon-14{ width:28px; height:14px; object-fit:contain; image-rendering: pixelated; vertical-align:-2px; }
.flag-16{ width:18px; height:12px; object-fit:cover; image-rendering:pixelated; }

/* Buttons already styled: .btn-like, etc. */


/* ===== Clanwar hero: logos, right-aligned opponent, centered score ===== */
.cw-hero.cw-hero-logos{
  margin:.35rem 0 1rem;
  background: linear-gradient(90deg, rgba(239,68,68,.12), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:.9rem;
  padding:1rem;
  display:grid; grid-template-columns:1fr auto 1fr; gap:.9rem; align-items:center;
}
.cw-side{ display:flex; gap:.6rem; align-items:center; }
.cw-left{ justify-content:flex-start; }
.cw-right{ justify-content:flex-end; text-align:right; }
.cw-team, .cw-opp-name { font-family: var(--font-heading); font-size:26px; color:#fff; display:flex;align-items:center; }

.cw-center{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.cw-score-big{ font-family: var(--font-heading); font-size:44px; font-weight:900; line-height:1; }
.cw-score-big.win{ color:#10b981; } .cw-score-big.loss{ color:#ef4444; } .cw-score-big.draw{ color:#9ca3af; }
.cw-league-big{ font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px; opacity:.9; }

/* Logos */
.cw-logo{ width:44px; height:44px; border-radius:8px; object-fit:contain; }

.cw-opp-block{ display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.cw-opp-media{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.flag-16.flag-on-logo{ position:absolute; right:-6px; bottom:-6px; border-radius:3px; border:1px solid rgba(0,0,0,.35); background:#000; }
.flag-16.flag-inline{ margin-left:.3rem; vertical-align: -2px; }

/* Match list: compact + faint result tint */
.cw-matchlist.cw-compact{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.35rem; }
.cw-match{
  border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem;
  padding:.42rem .6rem;
}
.cw-match.win  { background: rgba(16,185,129,.08); }  /* faint green */
.cw-match.loss { background: rgba(239,68,68,.08); }  /* faint red */
.cw-match.draw { background: rgba(156,163,175,.10);}  /* faint gray */

.cw-line{ display:flex; align-items:center; gap:.3rem; justify-content:space-between; }
.cw-line .kind{ font-weight:900; font-size:11px; text-transform:uppercase; opacity:.9; }
.cw-line .teams{ flex:1; display:flex; align-items:center; gap:.35rem; justify-content:center; min-width:0; }
.cw-line .sep{ opacity:.75; margin:0 .2rem; }
.cw-line .score{ font-weight:900; font-variant-numeric: tabular-nums; }
.cw-sub{ margin-top:.2rem; display:flex; gap:.2rem; justify-content:space-between; font-size:12px; opacity:.9; flex-wrap:wrap; }
.race-icon-14{ width:28px; height:14px; object-fit:contain; image-rendering:pixelated; vertical-align:-2px; }









/* === Member clanwar stats === */
.member-cw-stats h2 { margin-top: 1rem; }
.mcw-overall{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap:.5rem; margin:.5rem 0 .85rem;

}
.mcw-num{
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:.6rem; padding:.6rem .7rem;
}
.mcw-num .label{ font-size:11px; opacity:.8; text-transform:uppercase; letter-spacing:.06em; }
.mcw-num .value{ font-family: var(--font-heading); font-size:22px; font-weight:900; }
.mcw-num.green .value{ color:#10b981; }
.mcw-num.red   .value{ color:#ef4444; }
.mcw-num.gray  .value{ color:#9ca3af; }

.mcw-seasons .mcw-season-list{ list-style:none; margin:.4rem 0 .8rem; padding:0; display:grid; gap:.35rem; }
.mcw-season{
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem; padding:.45rem .6rem; display:flex; gap:.45rem; align-items:center; flex-wrap:wrap;
}
.mcw-season .sn{ font-weight:800; }
.mcw-season .w{ color:#10b981; font-weight:800; }
.mcw-season .l{ color:#ef4444; font-weight:800; }
.mcw-season .sep{ opacity:.6; }

.mcw-match-list{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.35rem; }
.mcw-match{
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem; padding:.45rem .6rem;
}
.mcw-match.win  { box-shadow: inset 0 0 0 1px rgba(16,185,129,.22); }
.mcw-match.loss { box-shadow: inset 0 0 0 1px rgba(239,68,68,.22); }
.mcw-match.draw { box-shadow: inset 0 0 0 1px rgba(156,163,175,.22); }
.mcw-match .line{ display:flex; justify-content:space-between; gap:.5rem; text-decoration:none; color:inherit; }
.mcw-match .date{ font-size:12px; opacity:.9; }
.mcw-match .opp{ font-weight:700; text-align:center; flex:1; }
.mcw-match .score{ font-weight:900; font-variant-numeric: tabular-nums; }
.mcw-match .sub{ margin-top:.25rem; display:flex; flex-wrap:wrap; gap:.35rem .45rem; }
.mcw-match .pill{ padding:2px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); font-size:11px; }

/* === Member hero (top) === */
.member-hero{
  display:grid; grid-template-columns: 160px 1fr; gap:1rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  border-radius:.8rem; padding:.9rem;
  margin:.5rem 0 1rem;
}
.mh-left{ display:flex; align-items:flex-start; justify-content:center; }
.mh-photo img{ width:150px; height:150px; object-fit:cover; border-radius:.75rem; border:1px solid rgba(255,255,255,.16); background:#111; }
.mh-placeholder{ width:150px; height:150px; border-radius:.75rem; background:#121212; border:1px dashed rgba(255,255,255,.15); }

.mh-right{ display:flex; flex-direction:column; gap:.5rem; }
.mh-row.badges{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; }
.mh-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .45rem; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); font-size:12px; }
.flag-16{ width:18px; height:12px; image-rendering:pixelated; object-fit:cover; }
.race-icon-16{ width:28px; height:14px; image-rendering:pixelated; object-fit:contain; }
.mh-pill{ padding:.2rem .55rem; border-radius:9999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  font-size:12px; font-weight:700; }
.mh-pill.mh-aktiv{ color:#10b981; border-color:rgba(16,185,129,.35); }
.mh-pill.mh-inaktiv{ color:#ef4444; border-color:rgba(239,68,68,.35); }
.mh-pill.mh-honorary{ color:#9ca3af; }
.mh-tag{ padding:.15rem .45rem; border-radius:.4rem; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
.mh-info p{ margin:.3rem 0; }


/* === Member hero v2 (info left, portrait right) — smaller 3:2 image === */
.member-hero2{
  display:grid; grid-template-columns: 1fr 240px; gap:1rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  border-radius:.8rem; padding:.9rem;
  margin:.5rem 0 0;
}
.mh2-left{ display:flex; flex-direction:column; gap:.6rem; }
.mh2-info{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.mh2-info .label{ min-width:110px; display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; opacity:.85; font-weight:900; }
.mh2-info .value{ font-weight:600; }
.mh2-info .pill{ padding:2px 8px; border-radius:9999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); font-size:12px; }
.mh2-info .roles .tag{ padding:.15rem .45rem; border-radius:.4rem; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); margin-right:.25rem; }
.pill-status.pill-aktiv{ color:#10b981; border-color:rgba(16,185,129,.35); }
.pill-status.pill-inaktiv{ color:#ef4444; border-color:rgba(239,68,68,.35); }
.pill-status.pill-honorary{ color:#9ca3af; }

.flag-16{ width:18px; height:12px; image-rendering:pixelated; object-fit:cover; vertical-align:-2px; }

.mh2-remark h3{ margin:.25rem 0; font-size:14px; opacity:.9; }
.mh2-remark p{ margin:.25rem 0; }

.mh2-right{ display:flex; align-items:flex-start; justify-content:center; }
.mh2-portrait{ width:100%; }
.mh2-portrait img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:.75rem; border:1px solid rgba(255,255,255,.16); background:#111; }
.mh2-ph{ width:100%; aspect-ratio:3/2; border-radius:.75rem; background:#121212; border:1px dashed rgba(255,255,255,.15); }







/* === Clanwars page: center the VS and make it epic === */



.front-layout .feed-post {
  margin: .5em 0;
}









/* News/Frontpage headers with optional category icon */
.post-header-with-icon { margin-bottom:.5rem; }
.post-header-with-icon.has-cat-icon {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px;
  align-items:center;
}
.post-cat-icon img.cat-icon{
  width:70px; height:70px; object-fit:contain;
  border-radius:10px; 
}
.post-head .feed-post__meta{ margin-bottom:.25rem; }





.page-content ul,
.page-news ul,
.post ul {
  padding-left: 1rem;
  margin-bottom: 1rem;
}






/* --- Clanwar list basics --- */
.cw-list { list-style:none; margin:0; padding:0; }
.cw-card { position: relative; border:1px solid var(--clan-dark-gray, rgba(255,255,255,.08)); border-radius:10px; margin-bottom:.5rem; }
.cw-card .cw-card-link { display:flex; align-items:center; gap:12px; padding:10px 12px; text-decoration:none; color:inherit; width:100%; }
.cw-card .cw-main { flex:1 1 auto; min-width:0; }
.cw-row.cw-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cw-date { margin-left:auto; color:#9aa; font-size:13px; }
.cw-row.cw-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.cw-col { display:flex; align-items:center; gap:8px; min-width:0; }
.cw-col.cw-opp { justify-content:flex-end; text-align:right; }
.cw-vs { font-weight:900; opacity:.9; }


.cw-team { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Score (right) — sleek, not too big */
.cw-meta { flex:0 0 auto; display:flex; align-items:center; }

/* Tinted backgrounds for PAST results */
.cw-card.result-win  { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.28); } /* green */
.cw-card.result-loss { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.28); } /* red */
.cw-card.result-draw { background: rgba(156,163,175,.12); border-color: rgba(156,163,175,.28);} /* gray */

/* Upcoming stays neutral */
.cw-card.result-upcoming { background: transparent; }

/* Hover polish */


/* No underline on hover inside cards */

.cw-card a:hover { text-decoration: none; }

/* Slightly bigger logos */
.page-clanwars .cw-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }

/* Dimmed short tag next to team name (no parentheses) */
.cw-tag { margin-left: 2px; opacity: .7; font-weight: 700; font-size: 16px; }

/* Score: a little bigger; color by result */
.cw-score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  font-size: clamp(18px, 2.2vw, 24px); /* up a notch */

}
/* fix: center inside the card */
.page-clanwars .cw-past .cw-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0 !important;   /* cancels any prior nudges */
  line-height: 1;
}


.page-clanwars .cw-upcoming .cw-score {
  display: hidden;
}

.result-win  .cw-score { color: #22c55e; } /* green */
.result-loss .cw-score { color: #ef4444; } /* red   */
.result-draw .cw-score { color: #9ca3af; } /* gray  */

/* Past cards: KEEP their tinted background on hover (don’t change) */
.cw-card.result-upcoming:hover {
  border-color: rgba(255,255,255,.20);
  background-color: rgba(255,255,255,.04);
}


.cw-overall {
   margin-left:auto;
   text-align:right;


   white-space:nowrap;
   font-size: 18px;
  font-weight: 600;
}

.cw-section {
  margin-bottom: 2rem;
}


.clanwar-header {
	 display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
	padding:0;
}



/* Disabled state for the replay submit */
.replay-upload-form .btn.btn-primary[disabled] {
  background: #555 !important;
  color: #aaa !important;
  border-color: rgba(255,255,255,.08) !important;
  cursor: not-allowed !important;
  opacity: .7;



  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; cursor:pointer;
  padding:6px 8px; border-radius:.45rem; font-weight:800; font-size:12px;
}

/* Prevent hover changing color while disabled */
.replay-upload-form .btn.btn-primary[disabled]:hover {
  background: #555 !important;
}
/* Replay upload: disabled vs ready */
.replay-upload-form #replay_submit {
  /* disabled baseline */
  background: #555 !important;
  color: #aaa !important;
  border-color: rgba(255,255,255,.12) !important;
  cursor: not-allowed !important;
  opacity: .75;
  transition: background .15s ease, color .15s ease, opacity .15s ease, filter .15s ease;
}

/* When a file is selected, JS adds .is-ready and we also remove [disabled] */
.replay-upload-form #replay_submit.is-ready {
  background: var(--clan-red, #ef4444) !important;
  color: #fff !important;
  border-color: var(--clan-red, #ef4444) !important;
  cursor: pointer !important;
  opacity: 1;

  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; cursor:pointer;
  padding:6px 8px; border-radius:.45rem; font-weight:800; font-size:12px;
}

.replay-upload-form #replay_submit.is-ready:hover {
  filter: brightness(1.1);
}



.result-win .cw-score,
.result-loss .cw-score
{

  margin-left: -2.5rem;
}


.result-draw .cw-score
{

  margin-left: -1.8rem;
}



/* === Members: social links + note truncation === */
.members-table col.w-social { width: 110px; }

.members-table .col-note {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members-table .col-social {
  text-align: right;
  white-space: nowrap;
}

/* Shared social styles */
.member-social { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.member-social--archive { justify-content: flex-end; }
.member-social--single { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.member-social--single li { display: flex; align-items: center; gap: .45rem; }

.ms-link { text-decoration: none; color: #fff; }
.ms-link:hover .ms-text { text-decoration: underline; }

.ms-icon {
  width: 18px; height: 18px;
  display: inline-block; vertical-align: -2px;
  filter: brightness(0) invert(1); /* make <img> SVGs appear white on dark */

}

.member-single .ms-icon {

	margin-right: 2px;
}

.ms-text { font-weight: 600; }




.member-archive .member:hover {
	background-color: #080808;
}












/* === Clanwar MOTW (Starting Maps) === */
.cw-motw-link,
.cw-motw {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
}

.cw-motw-name {
  font-weight: 700;
}
.cw-motw-link:hover .cw-motw-name {
  text-decoration: underline;
}


/* Front-end: make sure MOTW thumbs stay tiny even if global img rules exist */
.cw-details .cw-motw-thumb{
  width: 22px !important;
  height: 22px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
	border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  vertical-align: -2px;
}




/* Make player name links look like the surrounding text */
.cw-matchlist .cw-pl-name {
  color: inherit;
  text-decoration: none;
}
.cw-matchlist .cw-pl-name:hover {
  text-decoration: underline;
}




/* Replay buttons with download icon and "Game N" label */
.cw-matchlist .reps .cw-replay-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .5rem;
  text-decoration: none;
}
.cw-matchlist .reps .cw-replay-link .ico-download {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  filter: brightness(0) invert(1); /* keeps icon white on dark UIs */
}
.cw-matchlist .reps .cw-replay-link .txt {
  font-weight: 600;
}

.cw-matchlist .reps a {
	color: #fff;
}



.cw-details-motws {
	margin-top: 16px;
}






















/* ===== RED LIGA (RRS version) ===== */

/* Title + year tag */
.page-redleague .redliga-header .entry-title {

  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.page-redleague .redliga-header .entry-title .rlg-year {
  font-size: 20px; opacity: .85; font-weight: 900; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
}



/* Leader callout stays a card with mellow pulse */
.page-redleague .rlg-leader-callout{
  margin:.75rem 0 0; padding:.7rem .8rem;
  border:1px solid rgba(255,255,255,.12); border-radius:.75rem;
  background: linear-gradient(90deg, rgba(239,68,68,.10), rgba(255,255,255,.02));
  position: relative;
  animation: rlg-softpulse 6s ease-in-out infinite;
}
.page-redleague .rlg-leader-callout::after{ content:none; }
@keyframes rlg-softpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.18); }
  50%     { box-shadow: 0 0 18px 2px rgba(239,68,68,.14); }
}
.page-redleague .rlg-leader-callout .badge-live{
  display:inline-block; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:9999px;
  background:rgba(16,185,129,.18); border:1px solid rgba(16,185,129,.35); color:#34d399;
}
.page-redleague .rlg-leader-callout .leader-line{ display:flex; align-items:center; gap:.5rem; margin-top:.4rem; flex-wrap:wrap; }
.page-redleague .rlg-leader-callout .leader-name{ color:#fff; font-weight:800; text-decoration:none; }
.page-redleague .rlg-leader-callout .leader-name:hover{ text-decoration:underline; }
.page-redleague .rlg-leader-callout .leader-elo{ font-weight:900; padding:.1rem .45rem; border-radius:.4rem;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); font-variant-numeric: tabular-nums; }
.page-redleague .rlg-leader-callout .hint{ opacity:.85; font-size:.95em; margin:.35rem 0 0; }

/* Rangliste as a card (sleek ladder vibe) */
.page-redleague .redliga-card{
  margin-top:.8rem;
  border-radius: 14px;
  padding: .6rem .7rem;
  background: radial-gradient(1200px 600px at 0% -10%, rgba(239,68,68,.10), transparent),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
}
.page-redleague .redliga-card::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(90deg, rgba(239,68,68,.25), rgba(255,255,255,.05), rgba(239,68,68,.18));
  opacity:.18; mix-blend-mode: screen;
}

/* Slim, crisp table */
.page-redleague .redliga-table { width:100%; border-collapse: collapse; table-layout: fixed; }
.page-redleague .redliga-table col.w-rank  { width: 54px; }
.page-redleague .redliga-table col.w-name  { width: 42%; }
.page-redleague .redliga-table col.w-elo   { width: 110px; }
.page-redleague .redliga-table col.w-wl    { width: 150px; }
.page-redleague .redliga-table col.w-streak{ width: 110px; }

.page-redleague .redliga-table thead th {
  text-align:left; font-family: var(--font-heading); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:.35rem .5rem; color:#e5e7eb;
}
.page-redleague .redliga-table.redliga-table--slim tbody td {
  padding:.35rem .5rem; border-bottom:1px dashed rgba(255,255,255,.08);
  font-size: 14px;
}
.page-redleague .redliga-table .col-elo { font-weight:900; font-variant-numeric: tabular-nums; letter-spacing:.02em; }
.page-redleague .redliga-table .col-wl .wl { font-weight:800; margin-right:.35rem; }
.page-redleague .redliga-table .col-wl .wpct { opacity:.8; font-variant-numeric: tabular-nums; }
.page-redleague .redliga-table .rlg-name { color:#fff; text-decoration:none; font-weight:800; }
.page-redleague .redliga-table .rlg-name:hover { text-decoration:underline; }

/* Leader row — clean highlight without shifting columns */
.page-redleague .redliga-row.redliga-leader td {
  background: rgba(239,68,68,.06);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.28);
}
.page-redleague .redliga-row.redliga-leader td:first-child { border-top-left-radius:10px; border-bottom-left-radius:10px; }
.page-redleague .redliga-row.redliga-leader td:last-child  { border-top-right-radius:10px; border-bottom-right-radius:10px; }

/* Row hover — make it feel like a ladder */
.page-redleague .redliga-table tbody tr:hover td {
  background: rgba(255,255,255,.035);
}

/* Streak chips */
.page-redleague .st { display:inline-block; font-weight:800; padding:2px 8px; border-radius:.5rem; font-size:12px; }
.page-redleague .streak-win  { color:#10b981; background: rgba(16,185,129,.18); border:1px solid rgba(16,185,129,.32); }
.page-redleague .streak-loss { color:#ef4444; background: rgba(239,68,68,.18);  border:1px solid rgba(239,68,68,.32); }
.page-redleague .streak-none { opacity:.7; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }

.page-redleague .rlg-footnote { opacity:.8; margin-top:.5rem; font-size:.9em; }

/* Mobile */
@media (max-width: 720px){
  .page-redleague .redliga-table col.w-wl    { width: 130px; }
  .page-redleague .redliga-table col.w-streak{ width: 90px; }
  .page-redleague .redliga-table thead { position: sticky; top: 0; background: #000; }
}









#rlg-table-h {
	margin-top: 0 !important;
}









.page-clanwars .cw-squad-stats { margin-top: 0px; }
.page-clanwars .cw-squad-list { display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; list-style:none; justify-content: right; }
.page-clanwars .cw-squad-list .pill { display:inline-flex; align-items:center; gap:2px;font-weight: 400; font-size: 13px; }
.page-clanwars .cw-squad-list .squad-name { font-weight: 800; }
.page-clanwars .cw-squad-list .squad-sep { opacity:.7; }

.cw-overall {
	margin-bottom: 0;
	padding-top: 8px;
}




.page-clanwars h2 {
	margin-top: 0 !important;
	font-size: 1.5rem;
}









/* ===== RED LIGA — Mini Leader Widget (Compact Row · Gold "1." BG) ===== */
.redliga-mini { max-width: 520px; width:100%; margin-top: 1rem; }

.redliga-mini .rlm-card{
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:14px; padding:.6rem .75rem .65rem;
  /* faint gold medal look */
  background:
    linear-gradient(180deg, rgba(250,204,21,.10), rgba(250,204,21,.06));
  box-shadow:
    inset 0 0 0 1px rgba(250,204,21,.25),
    0 10px 18px -12px rgba(250,204,21,.25);
}

/* Big faint "1." in the background */
.redliga-mini .rlm-card::before{
  content:"1.";
  position:absolute; right:.35rem; bottom:-.55rem; z-index:0;
  font-weight:900; font-size:132px; line-height:1;
  letter-spacing:-2px;
  color: rgba(250,204,21,.15);      /* amber-300ish, very faint */
  pointer-events:none;
  transform: rotate(-6deg);
  filter: blur(.2px);
}

/* Soft gold glow (subtle) */
.redliga-mini .rlm-glow{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(210px 160px at 18% 8%,  rgba(250,204,21,.18), transparent 60%),
    radial-gradient(210px 160px at 110% -10%, rgba(253,230,138,.14), transparent 60%);
  filter: blur(14px);
  animation: rlmGlow 11s linear infinite alternate;
  pointer-events:none; z-index:0;
}
@keyframes rlmGlow { from{transform:translateX(-5px)} to{transform:translateX(5px)} }

/* Headline row */
.redliga-mini .rlm-headline{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem;
  font-weight:900;
}
/* Hide the small badge; we use the big BG "1." instead */
.redliga-mini .rlm-badge{ display:none; }
.redliga-mini .rlm-title{ letter-spacing:.2px; }
.redliga-mini .rlm-year{ margin-left:auto; opacity:.72; font-size:.88em; }

/* Slide area */
.redliga-mini .rlm-slides{
  position:relative; display:grid; grid-auto-rows: 1fr; align-items:center;
  min-height: 66px; margin:.05rem 0 .2rem; z-index:1; /* ensure over BG number */
}
.redliga-mini .rlm-slide{
  grid-area: 1 / 1;
  opacity:0; transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}
.redliga-mini .rlm-slide.is-active{ opacity:1; transform:translateY(0); }

/* Main row: name left, RRS right */
.redliga-mini .rlm-mainrow{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.5rem; margin-bottom:.12rem;
}
.redliga-mini .rlm-name{
  font-weight:900; text-decoration:none; font-size:1.02rem; line-height:1.15;
}
.redliga-mini .rlm-name:hover{ text-decoration:underline; }
.redliga-mini .rlm-rrs{ font-weight:900; opacity:.95; white-space:nowrap; }

/* Sub row: W/L · WR · Race · Squad (+ optional tag) */
.redliga-mini .rlm-subrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; row-gap:.15rem;
  font-size:.92em; opacity:.93;
}
.redliga-mini .rlm-subrow .sep{ opacity:.55; margin:0 -.15rem; }
.redliga-mini .rlm-tag{
  margin-left:auto; padding:.12rem .4rem; border-radius:999px;
  font-size:.78em; font-weight:800; letter-spacing:.2px; line-height:1;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}

/* Footer */
.redliga-mini .rlm-foot{
  position:relative; z-index:1;
  margin-top:.25rem; text-align:center; font-size:.82em; opacity:.72; font-weight:600;
}

/* Empty */
.redliga-mini .rlm-empty{ padding:.5rem; text-align:center; opacity:.75; font-weight:700; }

















/* ===========================
   RED LIGA — compact edition
   =========================== */

/* Keep this page nicely contained regardless of global theme rules */
.page-redleague .main-frame {
  max-width: 1120px;  /* feel free to tweak to match your theme’s content width */
  margin: 0 auto;
}

/* Header / intro */
.page-redleague .redliga-header .entry-title {
  display:flex;gap:.5rem; margin-bottom:1.2rem;
}

.page-redleague .redliga-intro { margin:.25rem 0 1.0rem; }
.page-redleague .redliga-intro p { margin:.35rem 0; }

/* Prize row: two compact cards */
.page-redleague .rlg-prize-row {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.6rem; margin:.4rem 0 1.0rem;
}
@media (max-width: 860px){ .page-redleague .rlg-prize-row { grid-template-columns: 1fr; } }

.page-redleague .prize-card {
  position:relative;
  border-radius:16px;
  padding:.8rem 1rem;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.page-redleague .prize-card .pc-top { display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.2px; }
.page-redleague .prize-card .pc-medal { font-size:22px; line-height:1; }
.page-redleague .prize-card .pc-title { opacity:.9; }
.page-redleague .prize-card .pc-amount { display:flex; align-items:flex-end; gap:.3rem; margin:.25rem 0 .2rem; }
.page-redleague .prize-card .pc-amount .num { font-size:46px; font-weight:900; line-height:1; }
.page-redleague .prize-card .pc-amount .currency { font-size:26px; font-weight:800; opacity:.9; }
.page-redleague .prize-card .pc-note { font-size:.95rem; opacity:.8; }

.page-redleague .prize-card.prize-gold {
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
}
.page-redleague .prize-card.prize-silver {
  background: linear-gradient(180deg, rgba(203,213,225,.16), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(203,213,225,.32);
}

/* Leader wall: single compact “trophy wall” */
.page-redleague .leader-card {
  border-radius:16px; padding:1rem; margin:.2rem 0 1.0rem;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.page-redleague .leader-card .lc-head { text-align:center; margin-bottom:.6rem; }
.page-redleague .leader-card .lc-sub { font-size:.9rem; opacity:.75; margin-bottom:.1rem; }
.page-redleague .leader-card .lc-title { font-size:1.25rem; font-weight:900; letter-spacing:.2px; }
.page-redleague .leader-card .lc-grid {
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem; align-items:stretch;
}
@media (max-width: 980px){ .page-redleague .leader-card .lc-grid { grid-template-columns: 1fr; } }
.page-redleague .leader-card .lc-tile {
  border-radius:14px; padding:.75rem .8rem; text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.page-redleague .leader-card .lc-squad {
  font-weight:900; margin-bottom:.25rem; letter-spacing:.3px;
}
.page-redleague .leader-card .lc-slot {
  display:flex; justify-content:center; align-items:center; gap:.4rem; margin:.15rem 0;
}
.page-redleague .leader-card .lc-first .lc-medal { filter: drop-shadow(0 0 .25rem rgba(250,204,21,.65)); }
.page-redleague .leader-card .lc-second .lc-medal{ filter: drop-shadow(0 0 .25rem rgba(203,213,225,.55)); }
.page-redleague .leader-card .lc-name { font-weight:800; text-decoration:none; }
.page-redleague .leader-card .lc-name:hover { text-decoration:underline; }
.page-redleague .leader-card .lc-rrs { font-weight:800; opacity:.9; }

/* Filter bar */
.page-redleague .rlg-filter {
  display:flex; gap:.45rem; margin:.25rem 0 .6rem; justify-content:center;align-items:center;
}
.page-redleague .rlg-filter .rf-btn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: .35rem .65rem;
  border-radius: .6rem;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.page-redleague .rlg-filter .rf-btn:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.page-redleague .rlg-filter .rf-btn.is-active { background: rgba(255,255,255,0,0,.16); border-color: rgba(255,255,255,.42); color:#fff ; }

/* Card container for table */
.page-redleague .redliga-card {
  border-radius:16px; padding:.8rem .9rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.page-redleague .redliga-card .section-title { margin:0 0 .5rem; font-size:1.15rem; font-weight:900; }

/* Table layout */
.page-redleague .redliga-table-wrap { overflow-x:auto; }
.page-redleague .redliga-table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.page-redleague .redliga-table thead th {
  text-align:left; font-size:.9rem; opacity:.75; font-weight:800; padding:0 .6rem .2rem;
}
.page-redleague .redliga-table tbody td {
  background: rgba(255,255,255,.02);
  padding:.45rem .6rem;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.page-redleague .redliga-table tbody tr td:first-child { border-left:1px solid rgba(255,255,255,.06); border-radius:8px 0 0 8px; }
.page-redleague .redliga-table tbody tr td:last-child  { border-right:1px solid rgba(255,255,255,.06); border-radius:0 8px 8px 0; }

/* Column widths */
.page-redleague .redliga-table col.w-rank  { width:44px; }
.page-redleague .redliga-table col.w-name  { width:auto; }
.page-redleague .redliga-table col.w-race  { width:68px; }
.page-redleague .redliga-table col.w-squad { width:100px; }
.page-redleague .redliga-table col.w-elo   { width:80px; }
.page-redleague .redliga-table col.w-wl    { width:160px; }
.page-redleague .redliga-table col.w-streak{ width:96px; }

/* Subtle highlights: per-squad top1/top2 */
.page-redleague .redliga-table tbody tr.is-top1 td {
  background: linear-gradient(90deg, rgba(250,204,21,.08), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(250,204,21,.18);
}
.page-redleague .redliga-table tbody tr.is-top2 td {
  background: linear-gradient(90deg, rgba(203,213,225,.08), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(203,213,225,.16);
}

/* WL & streak */
.page-redleague .redliga-table .col-wl .wpct { opacity:.66; }
.page-redleague .redliga-table .st { font-weight:800; }

/* ▲ / ▼ triangles (added back) */
.page-redleague .redliga-table .st.streak-win  { color:#22c55e; position:relative; padding-left:1.0rem; }
.page-redleague .redliga-table .st.streak-win::before {
  content:"▲"; position:absolute; left:.2rem; top:50%; transform:translateY(-50%);
  font-size:.85em; color:#22c55e;
}
.page-redleague .redliga-table .st.streak-loss { color:#ef4444; position:relative; padding-left:1.0rem; }
.page-redleague .redliga-table .st.streak-loss::before {
  content:"▼"; position:absolute; left:.2rem; top:50%; transform:translateY(-50%);
  font-size:.85em; color:#ef4444;
}
.page-redleague .redliga-table .st.streak-none { opacity:.65; }

/* Filter animation */
.page-redleague .redliga-table tbody tr {
  transition: opacity .14s ease, transform .14s ease;
  will-change: opacity, transform;
}
.page-redleague .redliga-table tbody tr.is-hidden {
  opacity:0; transform: translateY(6px); pointer-events:none;
}

/* Footnote */
.page-redleague .rlg-footnote { opacity:.75; margin:.5rem .1rem 0; font-size:.95rem; }









/* === RED LEAGUE — Prize cards: vivid themed animations === */
.page-redleague .rlg-prize-row {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 14px;
	margin-bottom: 2rem !important;
	
}

/* Base card */
.page-redleague .prize-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: .9rem 1rem 1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 20px -14px rgba(0,0,0,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* Content sits above FX */
.page-redleague .prize-card .pc-top,
.page-redleague .prize-card .pc-amount,
.page-redleague .prize-card .pc-note { position: relative; z-index: 2; }

/* Headline row */
.page-redleague .prize-card .pc-top {
  display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem;
  font-weight: 900;
}
.page-redleague .prize-card .pc-title { letter-spacing:.2px; }

/* Amount (big) + glint */
.page-redleague .prize-card .pc-amount {
  display:flex; align-items: baseline; gap:.25rem; margin:.15rem 0 .35rem; position:relative;
}
.page-redleague .prize-card .pc-amount .num { font-size: 2.4rem; line-height: 1; font-weight: 900; }
.page-redleague .prize-card .pc-amount .currency { font-size: 1.25rem; font-weight: 800; opacity: .9; }

/* Glint sweep across the amount */
.page-redleague .prize-card .pc-amount::after{
  content:""; position:absolute; inset:-20% -40%; z-index:1; pointer-events:none;
  background: linear-gradient(70deg, transparent 46%, rgba(255,255,255,.35) 50%, transparent 54%);
  transform: translateX(-60%);
  animation: rlgGlint 3.8s ease-in-out infinite;
}
@keyframes rlgGlint {
  0% { transform: translateX(-60%) }
  100% { transform: translateX(60%) }
}

/* Notes */
.page-redleague .prize-card .pc-note { opacity:.85; font-weight:600; }

/* --- GOLD CARD: visible coins + gold color theme --- */
.page-redleague .prize-card.prize-gold{
  background:
    radial-gradient(220px 160px at 15% 0%, rgba(250,204,21,.25), transparent 62%),
    radial-gradient(200px 140px at 110% 10%, rgba(253,230,138,.22), transparent 60%),
    linear-gradient(180deg, rgba(250,204,21,.12), rgba(250,204,21,.06));
  box-shadow:
    inset 0 0 0 1px rgba(250,204,21,.35),
    0 16px 30px -18px rgba(250,204,21,.55);
}
.page-redleague .prize-card.prize-gold .pc-amount .num {
  color: #facc15; /* amber-400 */
  /* gold gradient text with fallback */
  background: linear-gradient(90deg, #fde68a, #facc15, #f59e0b);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.page-redleague .prize-card.prize-gold .pc-amount .currency { color: #f59e0b; }

/* Coins layer */
.page-redleague .prize-card.prize-gold .pc-fx{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.page-redleague .prize-card.prize-gold .pc-fx .coin{
  position:absolute; bottom:-20%; color: rgba(250,204,21,.95);
  text-shadow: 0 2px 10px rgba(250,204,21,.35);
  font-weight: 900; filter: drop-shadow(0 0 8px rgba(250,204,21,.35));
  animation: rlgCoinRise var(--dur,8s) linear infinite;
  opacity:.0; transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}
/* Staggered coins across width with negative delays to “already be in air” */
.page-redleague .prize-card.prize-gold .c1{ left:8%;  font-size:28px; --dur:8.6s; animation-delay:-2.1s; }
.page-redleague .prize-card.prize-gold .c2{ left:22%; font-size:24px; --dur:7.6s; animation-delay:-4.0s; }
.page-redleague .prize-card.prize-gold .c3{ left:36%; font-size:30px; --dur:9.2s; animation-delay:-1.4s; }
.page-redleague .prize-card.prize-gold .c4{ left:52%; font-size:22px; --dur:8.0s; animation-delay:-3.1s; }
.page-redleague .prize-card.prize-gold .c5{ left:66%; font-size:26px; --dur:8.8s; animation-delay:-5.2s; }
.page-redleague .prize-card.prize-gold .c6{ left:78%; font-size:24px; --dur:7.9s; animation-delay:-1.8s; }
.page-redleague .prize-card.prize-gold .c7{ left:88%; font-size:20px; --dur:8.4s; animation-delay:-3.8s; }
.page-redleague .prize-card.prize-gold .c8{ left:94%; font-size:28px; --dur:9.6s; animation-delay:-6.0s; }

@keyframes rlgCoinRise {
  0%   { transform: translateY(0)     translateX(0)    scale(.9) rotate(0deg);   opacity:0; }
  8%   { opacity:.95; }
  50%  { transform: translateY(-55%)  translateX(-12px) scale(1)  rotate(140deg); opacity:.9; }
  100% { transform: translateY(-115%) translateX(18px)  scale(1.05) rotate(330deg); opacity:0; }
}

/* --- SILVER CARD: stars/sparkles + silver/ice theme --- */
.page-redleague .prize-card.prize-silver{
  background:
    radial-gradient(220px 160px at 20% 0%, rgba(203,213,225,.28), transparent 60%),
    radial-gradient(200px 140px at 110% 10%, rgba(148,163,184,.22), transparent 60%),
    linear-gradient(180deg, rgba(148,163,184,.20), rgba(148,163,184,.08));
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,.45),
    0 16px 30px -18px rgba(148,163,184,.55);
}
.page-redleague .prize-card.prize-silver .pc-amount .num {
  /* icy silver gradient text */
  background: linear-gradient(90deg, #e5e7eb, #cbd5e1, #a1a1aa);
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.page-redleague .prize-card.prize-silver .pc-amount .currency { color: #cbd5e1; }

/* Stars layer */
.page-redleague .prize-card.prize-silver .pc-fx{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.page-redleague .prize-card.prize-silver .pc-fx .spark{
  position:absolute; top:110%; color: rgba(229,231,235,.95);
  text-shadow: 0 2px 10px rgba(148,163,184,.35);
  font-weight: 900; filter: drop-shadow(0 0 10px rgba(148,163,184,.45));
  animation: rlgStarDrift var(--dur,7.2s) ease-in-out infinite;
  opacity:0; transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}

.page-redleague .prize-card.prize-silver .s1{ left:10%; font-size:20px; --dur:7.6s; animation-delay:-2.2s; }
.page-redleague .prize-card.prize-silver .s2{ left:28%; font-size:18px; --dur:6.8s; animation-delay:-3.1s; }
.page-redleague .prize-card.prize-silver .s3{ left:44%; font-size:22px; --dur:7.9s; animation-delay:-1.8s; }
.page-redleague .prize-card.prize-silver .s4{ left:60%; font-size:16px; --dur:7.3s; animation-delay:-4.6s; }
.page-redleague .prize-card.prize-silver .s5{ left:76%; font-size:20px; --dur:7.8s; animation-delay:-5.6s; }
.page-redleague .prize-card.prize-silver .s6{ left:90%; font-size:18px; --dur:6.9s; animation-delay:-2.9s; }

@keyframes rlgStarDrift {
  0%   { transform: translateY(0)      translateX(0)     scale(.9) rotate(0deg);   opacity:0; }
  10%  { opacity:.95; }
  45%  { transform: translateY(-45%)   translateX(8px)   scale(1)  rotate(20deg);  opacity:.9; }
  70%  { transform: translateY(-80%)   translateX(-8px)  scale(1.05) rotate(-20deg); }
  100% { transform: translateY(-120%)  translateX(12px)  scale(1.1) rotate(0deg);  opacity:0; }
}





/* --- Disable the old amount-only glint --- */
.page-redleague .prize-card .pc-amount::after { content: none !important; }

/* --- New full-card glint (hover/focus-only) --- */
.page-redleague .prize-card {
  position: relative; /* ensure ::after positions correctly */
}
.page-redleague .prize-card::after {
  content: "";
  position: absolute;
  /* larger than the card so the diagonal pass fully covers edges */
  inset: -35% -65%;
  /* soft diagonal highlight */
  background: linear-gradient(
    70deg,
    transparent 46%,
    rgba(255, 255, 255, .14) 50%,
    transparent 54%
  );
  transform: translateX(-120%);
  opacity: 0;               /* invisible until hover */
  pointer-events: none;
  z-index: 3;               /* above content & FX, but subtle */
  filter: blur(.5px);
}

/* Hover/focus trigger (runs once each time) */
.page-redleague .prize-card:hover::after,
.page-redleague .prize-card:focus-within::after {
  animation: rlgCardGlint 1.6s ease forwards;
  opacity: 1;
}

/* Slightly different subtlety per theme */
.page-redleague .prize-card.prize-gold:hover::after,
.page-redleague .prize-card.prize-gold:focus-within::after {
  animation-duration: 1.5s;
  background: linear-gradient(
    70deg,
    transparent 46%,
    rgba(255, 255, 255, .18) 50%,
    transparent 54%
  );
}
.page-redleague .prize-card.prize-silver:hover::after,
.page-redleague .prize-card.prize-silver:focus-within::after {
  animation-duration: 1.7s;
  background: linear-gradient(
    70deg,
    transparent 46%,
    rgba(255, 255, 255, .12) 50%,
    transparent 54%
  );
}

@keyframes rlgCardGlint {
  0%   { transform: translateX(-120%); opacity: 0; }
  6%   { opacity: .85; }
  50%  { transform: translateX(0%);    opacity: .95; }
  100% { transform: translateX(120%);  opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-redleague .prize-card:hover::after,
  .page-redleague .prize-card:focus-within::after {
    animation: none;
    opacity: .08; /* very faint static sheen */
  }
}








/* ===========================
   RED LIGA — Mini Leader Widget
   =========================== */
.redliga-mini { display:block; max-width: 460px; }

/* Big #1 card */
.redliga-mini .rlm-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,223,99,.12), rgba(255,223,99,.06));
  border: 1px solid rgba(255,215,0,.25);
  border-radius: 14px;
  padding: .8rem .9rem .85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  cursor: pointer;
}
.redliga-mini .rlm-headline { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.redliga-mini .rlm-badge { font-weight:900; font-size:1.15rem; }
.redliga-mini .rlm-title { font-weight:800; }
.redliga-mini .rlm-year { margin-left:auto; opacity:.8; font-weight:700; }

.redliga-mini .rlm-mainrow { display:flex; align-items:center; gap:.55rem; }
.redliga-mini .rlm-raceicon { width:28px; height:14px; object-fit:contain; image-rendering:-webkit-optimize-contrast; filter:drop-shadow(0 0 2px rgba(0,0,0,.15)); }
.redliga-mini .rlm-name { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.redliga-mini .rlm-streak {
  display:inline-flex; align-items:center; gap:.25rem; margin-left:.25rem;
  font-size:.78rem; font-weight:800; letter-spacing:.2px; padding:2px 6px; border-radius:999px;
  background: rgba(255,255,255,.06);
}
.redliga-mini .rlm-streak.streak-win  { color:#16a34a; background:rgba(34,197,94,.12); }
.redliga-mini .rlm-streak.streak-loss { color:#dc2626; background:rgba(239,68,68,.12); }
.redliga-mini .rlm-streak.streak-none { color:#94a3b8; background:rgba(148,163,184,.12); }
.redliga-mini .rlm-rrs { margin-left:auto; font-weight:800; white-space:nowrap; }
.redliga-mini .rlm-subrow { display:flex; align-items:center; gap:.35rem; margin-top:.2rem; opacity:.9; flex-wrap:wrap; }

.redliga-mini .rlm-slides .rlm-slide { display:none; }
.redliga-mini .rlm-slides .rlm-slide.is-active { display:block; }

/* Small #2 and #3 cards container */
.redliga-mini .rlm-subcards { margin-top:.6rem; }
.redliga-mini .rlm-subslides .rlm-subslide { display:none; }
.redliga-mini .rlm-subslides .rlm-subslide.is-active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

/* Mini cards base (rank, race icon, nickname only) */
.redliga-mini .rlm-mini {
  position: relative;
  display:flex; align-items:center; gap:.65rem;
  width:100%;
  text-decoration:none; color:inherit;
  padding: 0 .7rem;
  border-radius: 12px;
  border: 1px solid transparent;
  min-height: 36px;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.redliga-mini .rlm-mini:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }

.redliga-mini .rlm-mini--silver {
  background: linear-gradient(180deg, rgba(210,214,220,.22), rgba(210,214,220,.12));
  border-color: rgba(160,165,175,.35);
}
.redliga-mini .rlm-mini--bronze {
  background: linear-gradient(180deg, rgba(205,127,50,.24), rgba(205,127,50,.12));
  border-color: rgba(180,110,45,.38);
}

.redliga-mini .rlm-mini--silver .mm-rank {
	color: #494b4f;
	margin-right: 6px;
}

.redliga-mini .rlm-mini--bronze .mm-rank {
	color: #533315;
	margin-right: 6px;
}


.redliga-mini .mm-l { display:flex; align-items:center; gap:.5rem; min-width:0; }
.redliga-mini .mm-rank { font-weight:900; width:1.5ch; text-align:right; }
.redliga-mini .mm-icon { width:28px; height:14px; object-fit:contain; image-rendering:-webkit-optimize-contrast; filter:drop-shadow(0 0 2px rgba(0,0,0,.12)); }
.redliga-mini .mm-name {
  font-weight: 800;
	font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.redliga-mini .mm-name:hover { text-decoration: underline; }



















.post-head .feed-post__meta {
  display:flex; align-items:center; gap:.45rem;
  font-size:12px; font-weight:800; opacity:.95;
}
.feed-post__title { display:block; font-size:28px; margin-top:.15rem; color:#fff; text-decoration:none; }


/* Red button */
.btn.btn-red {
    display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; cursor:pointer;
  padding:8px 12px; border-radius:.45rem; font-weight:600; font-size:12px;
}
.btn.btn-red:hover { filter:brightness(1.06); }





/* Notice pills, fully clickable */
.notice-card { position: relative; }
.notice-card .notice-link {
  display: block;
  padding: 2px 2px;
gap: 8px;
border-radius: 12px;
  text-decoration: none;
  color: inherit;
	font-size: 13px;
}
.notice-card .notice-link:hover {
  background: #0c0c0c;
}

.notice-card a:hover {
	text-decoration: none;
}

.notice-card .notice-head {
  display: flex;
  align-items: center;

  gap: .5rem;
  margin-bottom: .25rem;
}
.notice-card .notice-meta .notice-title {
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.notice-card .notice-tags {
  margin-top: .25rem;
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}



/* Pills list is single column */
.pills-list{display:block;}
.pills-list{padding:0;margin:0;margin-bottom: 1em;}


/* Fully clickable one-line pills */
.notice-link.notice-line{
  display:flex; align-items:center; width:100%;

 color:inherit; white-space:nowrap; overflow:hidden;
}
.notice-link.notice-line:hover{background:#0c0c0c;}
.notice-link .ellipsis{min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis;}
.notice-link .feed-date{margin-left:auto; flex:0 0 auto; opacity:.9; white-space:nowrap;}

.pill-ghost{background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff;}
.flag-16{width:18px; height:12px; object-fit:cover; border-radius:2px; vertical-align:middle; margin-right: .2rem}
.sep{opacity:.8; margin:0 .25rem;}
/* Borderless fade for posts */

.feed-post.feed-post--blend{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0) 70%); border-radius:.8rem; padding:.9rem 1rem 1.1rem;}








/* ===== Media Lightbox inside .main-frame (tight + readable) ===== */
.main-frame { position: relative; }

/* Overlay fills the frame; adds zero layout space */
.rc-lb[hidden] { display: none !important; }
.rc-lb {
  position: absolute;             /* JS sizes to the .main-frame viewport */
  z-index: 9999;
  display: grid; place-items: center;
}

/* Full-height backdrop */
.rc-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 1;
}

/* Dialog grid where the first row can shrink fully */
.rc-lb__dialog {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto; /* stage, caption */
  height: 100%;
  width: min(96%, 1200px);
  box-sizing: border-box;
  padding: 8px 10px 10px;
  row-gap: 8px;
  overflow: hidden;  /* keeps the whole UI inside overlay */
}

/* Stage with inner padding so image never touches edges */
.rc-lb__stage {
  position: relative;
  display: grid; place-items: center;
  padding: 16px;
  min-height: 0;
  min-width: 0;
  border-radius: .6rem;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 10px 40px rgba(0,0,0,.5);
  overflow: hidden;
}

/* Image strictly contained; JS also sets max sizes in px */
.rc-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: .4rem;

}

/* Caption: centered text, readable glass, scrolls if long */
/* Caption: centered, readable glass, no scrollbars */
.rc-lb__caption {
  text-align: center;
  padding: 10px 12px;
  border-radius: .6rem;
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  overflow: visible;            /* no scrollbars */
  max-height: none;             /* let it take needed space */
  word-break: normal;
  overflow-wrap: anywhere;      /* avoid long-word overflow */
}


/* Controls */
.rc-lb__nav,
.rc-lb__close {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.35);
  color: #fff;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: .6rem;
  font-weight: 900; font-size: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rc-lb__close { top: 12px; right: 12px; }
.rc-lb__prev  { top: 50%; left: 14px;  transform: translateY(-50%); }
.rc-lb__next  { top: 50%; right: 14px; transform: translateY(-50%); }

/* Lock only the frame while open */
.main-frame.rc-lb-open { overflow: hidden !important; }








/* Leader pill */
.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:999px;  line-height:1; }
.pill-compact { font-family: var(--font-primary);padding:.1rem .45rem;font-size:13px; }
.pill-dim { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }

/* Discord copy button */
.rc-copy-discord {  width:1rem; height:1rem; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:transparent; cursor:pointer; }


.rc-social__btn { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:transparent; cursor:pointer; }

.members-table .col-social { white-space:nowrap; }




/* Discord copy anchor baseline */
.rc-copy-discord {
  position: relative;                /* anchor for the tooltip */

  gap: .4rem;
  text-decoration: none;
}

/* Tooltip shown after click (toggle via .is-copied on the anchor) */
.rc-copy-discord.is-copied::after {
  content: "Copied";                /* change to "Copied" if you prefer EN */
  position: absolute;
  top: -28px;                        /* above the icon/text */
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  z-index: 100;
  opacity: 0;
  animation: rcCopyToast 1.1s ease both;
}

@keyframes rcCopyToast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* Make sure the cell doesn’t clip the tooltip */
.members-table .col-social { overflow: visible; }















/* A11y helper */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0;
}

/* Default: hide toggle on desktop */
.nav-toggle { display: none; }

@media (max-width: 980px) {
  /* Hide the top bar on mobile */
  .top-nav { display: none !important; }

  /* Red line behind the hamburger */
  .mobile-bar {
    display: flex;
    justify-content: flex-end;   /* hamburger on the right */
    align-items: center;
    background: var(--clan-red, #b70000);
    padding: 8px 12px;
  }

  /* Show the hamburger, make it readable on red */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.45);
    background: transparent;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: rgba(255,255,255,.75); }
  .nav-toggle__icon { display: block; }

  /* Mobile menu: hidden by default, centered when open */
  .main-navigation .main-nav {
    display: none;
    flex-direction: column;
    align-items: center;      /* centers the flex items */
    text-align: center;       /* centers link text */
    background: var(--clan-red, #b70000);
    padding: 6px 0;
  }
  .main-navigation.is-open .main-nav { display: flex; }

  .main-navigation .main-nav li { width: 100%; }
  .main-navigation .main-nav a {
    display: block;
    padding: 12px 8px;
    color: #fff;
    border-bottom: 1px solid var(--clan-dark-red, #7a0000);
  }
  .main-navigation .main-nav li:last-child a { border-bottom: none; }
	
	  .theme-toggle { display: none !important; }
}














/* Members table → compact mobile cards with inline flag+name+race */
@media (max-width: 880px){
  .members-table { width: 100%; border-collapse: separate; table-layout: auto; }
  .members-table colgroup, .members-table thead { display: none !important; }

  .members-table tbody { display: block; }
  .members-table tr {
    display: grid;
    /* first line: [flag][name][race] */
    grid-template-columns: 28px 1fr 28px;
    grid-auto-rows: min-content;
    column-gap: .6rem;
    row-gap: .35rem;

    margin: 0 0 .6rem 0;
    padding: .6rem .7rem;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: .6rem;
  }

  .members-table td { display: block; border: 0; padding: 0; }

  /* default labels for cells, except the top trio */
  .members-table td::before{
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: .74rem;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
  }

  /* Top line (compact): place and hide labels */
  .members-table .col-flag { grid-column: 1; grid-row: 1; align-self: left; text-align:left; }
  .members-table .col-name { grid-column: 2; grid-row: 1; align-self: center; }
  .members-table .col-race { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
  .members-table .col-flag::before,
  .members-table .col-name::before,
  .members-table .col-race::before { content: ""; display: none; }

  /* Subsequent lines */
  .members-table .col-status { grid-column: 1 / -1; grid-row: 2; }
  .members-table .col-social { grid-column: 1 / -1; grid-row: 3; display: flex; gap: .5rem; flex-wrap: wrap; }
  .members-table .col-note   { grid-column: 1 / -1; grid-row: 4; white-space: normal; }

  /* Nice touches */
  .members-table .col-name a { font-weight: 800; text-decoration: none; }
}

/* Ultra small screens: shrink columns, optionally hide long notes */
@media (max-width: 480px){
  .members-table tr { grid-template-columns: 22px 1fr 22px; }
  .members-table .col-note { display: none; }
}






/* =========================
   Clanwar cards — responsive
   ========================= */

/* Base polish */
.page-clanwars .cw-team { font-size: clamp(14px, 3.7vw, 28px); }
.page-clanwars .cw-tag  { font-size: 14px; opacity: .7; }
.page-clanwars .cw-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }

/* 1) Tablet & down: two-row “dense” card
   Row 1:  [OUR team]   [score / vs]   [OPP team]
   Row 2:  league/season pills + date (smaller) */
@media (max-width: 900px){
  .page-clanwars .cw-card .cw-card-link{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "teams-left score teams-right"
      "meta      meta  meta";
    align-items: center;
    gap: 8px 10px;
  }

  /* Put the TEAMS row in the grid’s first line */
  .page-clanwars .cw-main { grid-area: meta; } /* contains top+teams; we’ll reorder inside */
  .page-clanwars .cw-meta { grid-area: score; justify-self: center; } /* works for upcoming too */

  /* Inside .cw-main: teams first, meta second */
  .page-clanwars .cw-row.cw-teams{
    order: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* our | vs/score | opp */
    align-items: center;
    gap: 8px;
  }
  .page-clanwars .cw-row.cw-top{
    order: 2;
    display: flex;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
  }
  .page-clanwars .cw-date{ margin-left: 0; }

  /* Align sides */
  .page-clanwars .cw-col.cw-our{ justify-content: flex-start; text-align: left; }
  .page-clanwars .cw-col.cw-opp{ justify-content: flex-end;   text-align: right; }
  .page-clanwars .cw-vs{ opacity: .9; font-weight: 900; }

  /* If score sits *inside* teams (PAST cards), center it nicely */
  .page-clanwars .cw-row.cw-teams > .cw-meta{
    grid-column: 2; /* middle cell */
    justify-content: center;
  }
}

/* 2) Phone: hide non-essentials, shrink spacing */
@media (max-width: 640px){
  /* Hide long extras to keep one-line teams tight */
  .page-clanwars .cw-tag{ display: none; }       /* opponent short tag */
  .page-clanwars .cw-logo{ display: none; }      /* both logos off; flags stay */
  .page-clanwars .cw-vs{ font-size: 12px; }

  .page-clanwars .cw-row.cw-teams{ gap: 6px; }
  .page-clanwars .cw-team{ font-weight: 800; }

  /* Chips row: keep only date by default */
  .page-clanwars .cw-row.cw-top .pill{ display: none; } /* league/season pills */
  .page-clanwars .cw-date{ opacity: .85; }

  /* Score placement for UPCOMING (score is sibling .cw-meta) */
  .page-clanwars .cw-card.result-upcoming .cw-meta{
    grid-area: score;
    justify-self: end;
    align-self: center;
  }
}

/* 3) Tiny phones: allow ultra-compact names */
@media (max-width: 420px){
  .page-clanwars .cw-team{
    max-width: 42vw;           /* keep ellipsis working */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}







/* === Red League — responsive cards on mobile (keeps desktop) === */
@media (max-width: 860px){
  /* Hide header row and turn TRs into tidy cards */
  .page-redleague .redliga-table thead { display: none !important; }
  .page-redleague .redliga-table { table-layout: auto; border-collapse: separate; }
  .page-redleague .redliga-table tbody tr{
    display: grid;
    grid-template-columns: 34px 1fr auto;         /* rank | name | elo */
    grid-auto-rows: min-content;
    gap: .35rem .6rem;
    padding: .6rem .7rem;
    margin: 0 0 .6rem 0;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: .6rem;
  }
  .page-redleague .redliga-table tbody td{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Top line */
  .page-redleague .redliga-table .col-rank  { grid-column: 1; grid-row: 1; align-self: center; text-align: center; font-weight: 900; }
  .page-redleague .redliga-table .col-name  { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
  .page-redleague .redliga-table .col-elo   { grid-column: 3; grid-row: 1; align-self: center; text-align: right; font-weight: 900; }

  /* Second line: race | squad | W/L */
  .page-redleague .redliga-table .col-race  { grid-column: 1; grid-row: 2; align-self: center; }
  .page-redleague .redliga-table .col-squad { grid-column: 2; grid-row: 2; align-self: center; }
  .page-redleague .redliga-table .col-wl    { grid-column: 3; grid-row: 2; align-self: center; text-align: right; }

  /* Third line: streak chip (right) if present */
  .page-redleague .redliga-table .col-streak{ grid-column: 3; grid-row: 3; justify-self: end; margin-top: .15rem; }

  /* Inline flag + truncation for names */
  .page-redleague .redliga-table .rlg-name{
    display: inline-flex; align-items: center; gap: .35rem;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 800; text-decoration: none;
  }
  .page-redleague .redliga-table .rlg-name:hover { text-decoration: underline; }

  /* Tidy labels for meta cells (uses data-label if you add it in PHP) */
  .page-redleague .redliga-table tbody td::before{
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: .72rem;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .1rem;
  }
  /* No labels on the top-line triplet */
  .page-redleague .redliga-table .col-rank::before,
  .page-redleague .redliga-table .col-name::before,
  .page-redleague .redliga-table .col-elo::before { content: ""; display:none; }
}

/* Ultra small phones: hide squad if space is tight */
@media (max-width: 420px){
  .page-redleague .redliga-table .col-squad { display: none; }
}

/* Flag before name (desktop + mobile) */
.page-redleague .redliga-table .rlg-flag{
  width: 18px; height: 12px; object-fit: cover; image-rendering: pixelated;
  border-radius: 2px; vertical-align: -2px;margin-right: 3px;
}
/* Rangliste width fix — prefer natural sizing on desktop */
.page-redleague .redliga-table{
  table-layout: auto !important;              /* stop the hard column squeeze */
  border-collapse: separate !important;       /* match your spaced-row variant */
  border-spacing: 0 6px !important;
}

/* Let the Name breathe; keep numeric cols modest */
.page-redleague .redliga-table col.w-name   { width: auto !important; }
.page-redleague .redliga-table col.w-elo    { width: 90px !important; }
.page-redleague .redliga-table col.w-wl     { width: 140px !important; }
.page-redleague .redliga-table col.w-streak { width: 88px !important; }

/* Prevent weird truncation inside the name cell */
.page-redleague .redliga-table .rlg-name { display:inline-flex; align-items:center; gap:.35rem; min-width:0; }




/* === Red League: kill conflicting fixed table rules on small screens === */
@media (max-width: 1024px){
  /* 1) Convert the table to block context and remove fixed widths */
  .page-redleague .redliga-table{
    display: block;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 .6rem !important;
    table-layout: auto !important;          /* overrides old 'fixed' */
    box-sizing: border-box;
  }
  .page-redleague .redliga-table-wrap{ overflow-x: visible !important; }
  .page-redleague .redliga-table colgroup,
  .page-redleague .redliga-table col,
  .page-redleague .redliga-table thead{ display: none !important; } /* drop fixed columns */

  /* 2) Make body/cards flow full width */
  .page-redleague .redliga-table tbody{ display: block; }
  .page-redleague .redliga-table tbody tr{
    display: grid;
    grid-template-columns: 44px 1fr auto;   /* rank | name | rrs */
    grid-auto-rows: min-content;
    gap: .35rem .6rem;
    width: 100%;
    padding: .6rem .7rem;
    margin: 0 0 .6rem 0;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: .6rem;
    box-sizing: border-box;
  }
  .page-redleague .redliga-table tbody td{
    display: block;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;                            /* allow text shrink */
  }

  /* 3) Top line mapping */
  .page-redleague .redliga-table .col-rank { grid-column:1; grid-row:1; text-align:center; font-weight:900; }
  .page-redleague .redliga-table .col-name { grid-column:2; grid-row:1; min-width:0; }
  .page-redleague .redliga-table .col-elo  { grid-column:3; grid-row:1; text-align:right; font-weight:900; }

  /* 4) Second line: race | squad | W/L (right) */
  .page-redleague .redliga-table .col-race  { grid-column:1; grid-row:2; }
  .page-redleague .redliga-table .col-squad { grid-column:2; grid-row:2; }
  .page-redleague .redliga-table .col-wl    { grid-column:3; grid-row:2; text-align:right; }

  /* 5) Third line: streak chip aligned right */
  .page-redleague .redliga-table .col-streak{ grid-column:3; grid-row:3; justify-self:end; margin-top:.1rem; }

  /* 6) Name + flag stay on one line and can truncate */
  .page-redleague .redliga-table .rlg-name{
    display:inline-flex; align-items:center; gap:.35rem;
    min-width:0; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-weight:800; text-decoration:none;
  }
  .page-redleague .redliga-table .rlg-flag{
    width:18px; height:12px; object-fit:cover; image-rendering:pixelated; border-radius:2px; flex:0 0 auto;
  }
}

/* Optional: on very small phones hide squad for space */
@media (max-width: 420px){
  .page-redleague .redliga-table .col-squad { display: none; }
}



/* === Red League (mobile) — per-squad leader highlight without per-cell borders === */
@media (max-width: 1024px){
  /* Neutralize old TD-level highlight so it doesn't draw a box around each cell */
  .page-redleague .redliga-table tbody tr.is-top1 td,
  .page-redleague .redliga-table tbody tr.is-top2 td{
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  /* Highlight the whole row/card instead */
  .page-redleague .redliga-table tbody tr.is-top1{
    position: relative;
    background:
      linear-gradient(90deg, rgba(250,204,21,.12), rgba(255,255,255,0) 45%),
      rgba(255,255,255,.035);
    box-shadow:
      0 0 0 1px rgba(250,204,21,.28),
      0 6px 14px rgba(250,204,21,.16);
  }
  .page-redleague .redliga-table tbody tr.is-top1::before{
    content:""; position:absolute; inset:0 auto 0 0; width:4px;
    background: linear-gradient(#FFD700, #E6C200); border-radius:.6rem 0 0 .6rem;
  }

  .page-redleague .redliga-table tbody tr.is-top2{
    position: relative;
    background:
      linear-gradient(90deg, rgba(203,213,225,.12), rgba(255,255,255,0) 45%),
      rgba(255,255,255,.035);
    box-shadow:
      0 0 0 1px rgba(203,213,225,.26),
      0 5px 12px rgba(203,213,225,.14);
  }
  .page-redleague .redliga-table tbody tr.is-top2::before{
    content:""; position:absolute; inset:0 auto 0 0; width:4px;
    background: linear-gradient(#C0C0C0, #A9A9A9); border-radius:.6rem 0 0 .6rem;
  }
}






/* ===========================
   Downloads archive — responsive
   Works with your existing markup:
   - <ul class="download-list">
   - <li class="download-item">
       <a class="download-row"> … .download-title .download-meta .download-tags … </a>
       <span class="download-actions"> .btn-view .btn-download </span>
   =========================== */

/* Tablet and down: 2-column grid (content | actions), tags wrap below content */
@media (max-width: 980px){
  .downloads-archive .download-item{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "row actions"
      "tags actions";
    align-items: center;
    gap: 8px 10px;
    padding: 10px 0;               /* bigger tap target */
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .downloads-archive .download-row{
    grid-area: row;
    display: flex;                  /* keep your inline flow, but allow wraps */
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;                   /* lets title truncate correctly */
  }

  /* Title: keep single-line on tablets (will allow 2 lines on phones below) */
  .downloads-archive .download-title{
    flex: 1 1 160px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Meta bits (vX, size) sit to the right of the title and can wrap if needed */
  .downloads-archive .download-meta{ flex: 0 0 auto; opacity: .85; font-size: 12px; }

  /* Tags live on their own line under the content */
  .downloads-archive .download-tags{
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Actions in the right column */
  .downloads-archive .download-actions{
    grid-area: actions;
    display: flex;
    gap: 6px;
  }
}

/* Phones: actions drop to a third row, title may wrap to 2 lines */
@media (max-width: 560px){
  .downloads-archive .download-item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "row"
      "tags"
      "actions";
  }
  .downloads-archive .download-actions{
    justify-content: stretch;       /* full-width buttons look great on mobile */
  }
  .downloads-archive .download-actions .btn-view,
  .downloads-archive .download-actions .btn-download,
  .downloads-archive .download-actions .download-button{
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Allow a 2-line title instead of clipping */
  .downloads-archive .download-title{
    white-space: normal;
    display: -webkit-box;           /* 2-line clamp (WebKit/Blink) */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

























/* ===========================
   Replay archive — responsive rows
   =========================== */

/* Tablet: 2-column grid (content | actions) */
@media (max-width: 980px){
  /* Turn each LI into a compact grid card */
  .post-type-archive-replay .replay-list .replay-item,
  .archive-replay        .replay-list .replay-item,
  .replay-archive        .replay-list .replay-item{
    display: grid !important;
    grid-template-columns: 1fr auto;         /* content | actions */
    grid-template-areas:
      "main actions"
      "meta actions";
    align-items: center;
    gap: 6px 10px;
    padding: 8px 0;
  }

  /* Make the clickable row a grid-friendly block of content */
  .replay-list .replay-item > .replay-row{
    grid-area: main;
    display: grid;
    grid-template-columns: auto 1fr;         /* date | players */
    align-items: center;
    gap: 6px 8px;
    width: 100%;
  }

  /* Date stops forcing width; stays nice and narrow */
  .replay-list .replay-date{
    width: auto;                              /* override 50px on small screens */
    min-width: 3.2ch;
    font-variant-numeric: tabular-nums;
    opacity: .85;
  }

  /* Player names line stays on one line, truncates if needed */
  .replay-list .replay-players{
    margin-left: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
  }

  /* Small meta (map / time) can sit under the players */
  .replay-list .replay-mini{
    grid-area: meta;
    margin: 0;               /* override the desktop margin */
    opacity: .85;
    font-size: 12px;
  }

  /* Actions column on the right (works whether you use .replay-actions or a single .replay-download link) */
  .replay-list .replay-actions{ grid-area: actions; display: flex; gap: 6px; }
  .replay-list a.replay-download{ grid-area: actions; }
}

/* Phone: stack to 3 rows (content, meta, full-width actions) */
@media (max-width: 620px){
  .post-type-archive-replay .replay-list .replay-item,
  .archive-replay        .replay-list .replay-item,
  .replay-archive        .replay-list .replay-item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "meta"
      "actions";
  }

  /* Let long player strings wrap on phones */
  .replay-list .replay-row{ grid-template-columns: auto 1fr; }
  .replay-list .replay-players{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Make the buttons tap-friendly and full-width */
  .replay-list .replay-actions{ justify-content: stretch; }
  .replay-list .replay-actions .btn{ flex: 1 1 auto; justify-content: center; }
  .replay-list a.replay-download{
    display: inline-flex; justify-content: center; width: 100%;
  }
}















/* === Replay archive: keep icon+name on one line, center names + "vs" === */
@media (max-width: 980px){
  /* Center the player line and allow a second line for the map/meta */
  .replay-list .replay-players{
    display: flex;
    flex-wrap: wrap;              /* lets the map line drop below */
    align-items: center;
    justify-content: center;      /* center names + vs */
    text-align: center;
    gap: 4px 6px;
    width: 100%;
    margin-left: 0;               /* cancel the desktop indent on narrow screens */
  }

  /* Keep each race icon glued to its following name */
  .replay-list .replay-players .race-icon + span{
    white-space: nowrap;          /* "icon + name" stays together on one line */
  }

  /* Make "vs" look balanced when centered */
  .replay-list .replay-players .vs{
    margin: 0 8px;
    font-weight: 800;
  }

  /* Map/time: full-width second line, small and centered */
  .replay-list .replay-players .replay-mini{
    flex: 0 0 100%;
    order: 2;                     /* force below the names row */
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
  }
}

/* Tiny phones: allow name wrapping but keep icon right next to its name */
@media (max-width: 620px){
  .replay-list .replay-players{
    gap: 3px 5px;
  }
  .replay-list .replay-players span{
    white-space: normal;          /* names can wrap if very long */
  }
  .replay-list .replay-players .race-icon + span{
    white-space: nowrap;          /* still bind icon with its own name */
  }
  .replay-list .replay-players .vs{ margin: 0 6px; }
}









/* Upload spinner (button) */
.replay-upload-form .spinner {
  display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-2px;
  border:2px solid currentColor; border-right-color: transparent; border-radius:50%;
  animation: rcspin .7s linear infinite;
}
@keyframes rcspin { to { transform: rotate(360deg); } }





.dl-countdown[hidden],
#dl-btn[hidden]{ display:none !important; }

.dl-countdown{
   padding:6px 10px; border-radius:8px;
  border:1px solid var(--rc-border, #333);
  background: var(--rc-bg-muted, #111); color: var(--rc-fg, #fff);
  font-size:12px; display:inline-flex; align-items:center; gap:8px;
}
.dl-cancel, .dl-now{
  font-size:12px; line-height:1; padding:4px 8px; border-radius:6px;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:inherit;
  text-decoration:none; cursor:pointer;
}
.dl-cancel:hover, .dl-now:hover{ background:rgba(255,255,255,.08); }











.replay-teams{
  display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; margin:16px 0 8px;
}
.replay-teams .vs-col{
  align-self:center; font-weight:700; letter-spacing:.06em; opacity:.9; padding:0 4px;
}
.team-card{
  background:var(--rc-bg-muted,#111); border:1px solid var(--rc-border,#333);
  border-radius:12px; padding:12px;
}
.team-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.team-li{ display:flex; align-items:center; gap:8px; }
.team-race{ width:28px; height:14px; image-rendering:pixelated; }
.team-li .apm{ margin-left:auto; opacity:.8; font-size:12px; }

/* 2v2 hero layout: Left team | VS | Right team */
.team-hero{
  display:flex;
  align-items:stretch;   /* make VS match the team-card height nicely */
  justify-content:space-between;
  gap:16px;
}

/* Teams take equal width; VS is only as wide as its content */
.team-hero .team-card{ flex:1 1 0; }

/* Override any 1v1 .rh-vs rules */
.team-hero .rh-vs{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  width:auto;            /* important override if your 1v1 sets width:100% */
  min-width:56px;        /* gives it a nice pillar look */
  border:1px solid var(--rc-border,#333);
  border-radius:10px;
  background:var(--rc-bg-muted,#111);
}

/* Team card internals (optional polish) */
.team-hero .team-label{ margin:0 0 8px; font-size:14px; opacity:.9; }
.team-hero .team-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.team-hero .team-li{ display:flex; align-items:center; gap:8px; }
.team-hero .team-race{ width:28px; height:14px; image-rendering:pixelated; }
.team-hero .apm{ margin-left:auto; opacity:.8; font-size:12px; }

/* Responsive: stack on small screens */
@media (max-width: 640px){
  .team-hero{ flex-direction:column; gap:12px; }
  .team-hero .rh-vs{ order:2; width:100%; min-width:0; }
}
























/* =========================================================
   RCC Single – compact card
   ========================================================= */
.rcc-single-card{
  background: linear-gradient(180deg, rgba(206,0,0,.10), rgba(206,0,0,.06)), var(--rcc-card);
  border:1px solid var(--rcc-border);
  border-left:8px solid var(--rcc-red);
  border-radius:14px;
  padding:14px;
  display:grid;
  gap:14px;
}
.rcc-single-head{
  display:grid;
  grid-template-columns: 80px 1fr auto;
  gap:14px; align-items:center;
}
.rcc-single-head .img img{
  width:80px; height:80px; object-fit:contain; object-position:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.06);
}
.rcc-title-in-card{ margin:0; font-size:26px; color:#fff; font-weight:900; letter-spacing:.2px }
.rcc-single-head .meta{ margin-top:4px; display:flex; gap:12px; font-size:12px; color:var(--rcc-muted) }
.rcc-single-head .meta .pool .label{ text-transform:uppercase; letter-spacing:.4px; opacity:.85; margin-right:4px }

.rcc-single-head .champ{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:12px;
  background: rgba(206,0,0,.22); border:1px solid rgba(206,0,0,.55);
  color:#fff; font-weight:900;
}
.rcc-single-head .champ .medal{ font-size:18px }
.rcc-single-head .champ .money{
  font-size:11px; padding:2px 6px; border-radius:999px; margin-left:2px;
  background: rgba(206,0,0,.25); border:1px solid rgba(206,0,0,.45); color:#ffe3e3
}

.rcc-single-winners{ }
.rcc-single-links{ display:flex; gap:10px; flex-wrap:wrap }
.card-ish{
  background:#0e0a0a; border:1px solid rgba(206,0,0,.35); border-radius:12px; padding:10px;
}
.rcc-bracket-embed iframe{ width:100%; min-height:520px }

/* Reuse the mini link style */
.rcc-single-links .rcc-mini{ border:1px solid rgba(206,0,0,.6); background: rgba(206,0,0,.18); }

/* Ensure no inherited date emoji anywhere here */
.rcc-single-page .rcc-single-card .meta .date::before{ content:none !important; }





















/* =========================================================
   RCC — Single: hero podium (styled like clanwar hero)
   ========================================================= */
.rcc-hero{
  margin: .35rem 0 1rem;
  background: linear-gradient(90deg, rgba(239,68,68,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .9rem;
  padding: .9rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr auto;     /* left (img + title) | big podium | links */
  gap: .9rem;
  align-items: center;
}
.rcc-hero-left{
  display: grid; grid-template-columns: 86px 1fr; gap: .7rem; align-items: center;
}
.rcc-hero-media img{
  width: 86px; height: 86px; object-fit: contain; object-position: center;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.10);
  background: #0d0d0d;
}
.rcc-hero-h1{ margin: 0; font-family: var(--font-heading); font-size: 30px; font-weight: 900; letter-spacing: .2px; color: #fff; }
.rcc-hero-meta{ margin-top: 4px; display: flex; gap: 12px; font-size: 12px; color: #cbd5e1; }
.rcc-hero-meta .label{ text-transform: uppercase; letter-spacing: .4px; opacity: .85; margin-right: 4px; }

/* big centered podium */
.rcc-hero-podium{ display: block; }
.rcc-hero .rcc-podium{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: end; justify-items: center; text-align: center; gap: 14px;
}
.rcc-hero .rcc-place .name{ font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcc-hero .rcc-place .money{
  font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-top: 4px; display: inline-block;
  background: rgba(206,0,0,.20); border: 1px solid rgba(206,0,0,.45); color: #ffe6e6;
}

/* hero scale (podium silhouette) */
.rcc-hero .rcc-place-1 .medal{ font-size: 34px; }
.rcc-hero .rcc-place-1 .name  { font-size: 32px; }
.rcc-hero .rcc-place-2 .medal{ font-size: 24px; opacity:.95; }
.rcc-hero .rcc-place-2 .name  { font-size: 22px; opacity:.95; }
.rcc-hero .rcc-place-3 .medal{ font-size: 24px; opacity:.95; }
.rcc-hero .rcc-place-3 .name  { font-size: 22px; opacity:.95; }

/* tiny utilities on hero (right) */
.rcc-hero-links{ display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.rcc-hero-links .rcc-mini{
  display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px;
  text-decoration: none; color: #fff; background: transparent; border: 0; padding: 0;
}
.rcc-hero-links .rcc-mini:hover{ text-decoration: underline; }

/* Single body card (kept sleek) */
.rcc-single-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .9rem;
  padding: .8rem;
  display: grid; gap: .8rem;
}
.rcc-bracket.card-ish{ background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10); border-radius: .75rem; padding: .6rem; }
.rcc-bracket iframe{ width: 100%; min-height: 520px; }
.rcc-content.card-ish{ background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10); border-radius: .75rem; padding: .8rem; }

/* smaller screens */
@media (max-width: 980px){
  .rcc-hero{ grid-template-columns: 1fr; }
  .rcc-hero-links{ justify-content: flex-start; }
}







/* ===================== RCC row cards (all info in one row) ===================== */
:root{ --rcc-red:#ce0000; --rcc-deep:#170b0b; --rcc-ink:#eef2f6; --rcc-muted:#b6bcc2; --rcc-brd:rgba(206,0,0,.55); }

.rcc-page .rcc-list{ display:grid; gap:12px; }

.rcc-card.rcc-row-card{
  position:relative;
  display:grid;
  grid-template-columns: 64px minmax(180px, 24%) minmax(320px, 1fr) auto; /* media | title | winners | utils */
  align-items:center;
  gap:12px;
  padding:8px 12px;
  background: linear-gradient(180deg, rgba(206,0,0,.10), rgba(206,0,0,.06)), var(--rcc-deep);
  border:1px solid var(--rcc-brd);
  border-left:8px solid var(--rcc-red);
  border-radius:12px;
}
.rcc-card .rcc-hit{ position:absolute; inset:0; z-index:1; border-radius:inherit; }

.rcc-card .rcc-col{ position:relative; z-index:2; }

/* media */
.rcc-col-media img{
  width:64px; height:64px; object-fit:contain; object-position:center; display:block;
  border-radius:8px; 
}

/* title + meta */
.rcc-title-link{
  font-size:22px; font-weight:900; letter-spacing:.2px; color:var(--rcc-ink); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
 a.rcc-title-link {
	color:#ffffff;
}
.rcc-title-link:hover{ color:#fff; text-decoration:underline; }
.rcc-meta{  display:flex; gap:16px; align-items:center; font-size:13px; color:var(--rcc-muted); }
.rcc-meta .rcc-date::before{ content:none !important; }
.rcc-meta .rcc-pool .label{ text-transform:uppercase; letter-spacing:.4px; opacity:.85; margin-right:4px }

/* winners inline, podium-like scale (2 | 1 | 3) */
.rcc-col-winners{ min-width:0; }
.rcc-winners-inline{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:baseline; justify-content:center; gap:18px; white-space:nowrap;
}
.rcc-winners-inline .rcc-place{ display:inline-flex; align-items:baseline; gap:8px; color:#fff; }
.rcc-winners-inline .m{ line-height:1; }
.rcc-winners-inline .n{ font-weight:900; }
.rcc-winners-inline .x{ font-size:11px; opacity:.8; margin-left:4px }

/* scale */
.rcc-winners-inline .rcc-p1 .m{ font-size:24px; }
.rcc-winners-inline .rcc-p1 .n{ font-size:22px; }
.rcc-winners-inline .rcc-p2 .m,
.rcc-winners-inline .rcc-p3 .m{ font-size:18px; opacity:.95; }
.rcc-winners-inline .rcc-p2 .n,
.rcc-winners-inline .rcc-p3 .n{ font-size:16px; opacity:.95; }

/* utils (same row, far right) */
.rcc-col-utils .rcc-utils-row{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.rcc-col-utils .rcc-mini{
  display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px;
  text-decoration:none; color:#fff; background:transparent; border:0; padding:0;
}
.rcc-col-utils .rcc-mini:hover{ text-decoration:underline; }

/* responsive stack */
@media (max-width: 980px){
  .rcc-card.rcc-row-card{ grid-template-columns: 56px 1fr auto; grid-auto-rows:auto; row-gap:6px; }
  .rcc-col-winners{ grid-column:1 / -1; order:3; }
  .rcc-col-utils{ grid-column:1 / -1; order:4; }
  .rcc-col-media img{ width:56px; height:56px; }
}

/* ===================== RCC single: header, podium, details ===================== */
.rcc-single-page .rcc-top{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:.9rem; padding:.9rem;
  display:grid; grid-template-columns: 86px 1fr; gap:.8rem; align-items:center; margin:.4rem 0 .9rem;
}
.rcc-single-page .rcc-top .logo img{
  width:86px; height:86px; object-fit:contain; object-position:center; border-radius:10px; 
}
.rcc-single-page .rcc-top h1{ margin:0; font-size:30px; font-weight:900; letter-spacing:.2px; color:#fff; }
.rcc-single-page .rcc-top .meta{ margin-top:4px; display:flex; gap:12px; font-size:12px; color:#cbd5e1; }
.rcc-single-page .rcc-top .meta .date::before{ content:none !important; }

.rcc-podium-section{
  background: linear-gradient(180deg, rgba(206,0,0,.10), rgba(206,0,0,.06)), var(--rcc-deep);
  border:1px solid var(--rcc-brd);
  border-radius:.9rem; padding:1rem; margin-bottom:.9rem;
}
.rcc-podium-section .rcc-podium{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: 1fr 1fr 1fr; align-items:end; justify-items:center; text-align:center; gap:16px;
}
.rcc-podium-section .rcc-place .n{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcc-podium-section .rcc-place .x{
  font-size:14px; font-weight:800; padding:2px 8px; border-radius:999px; margin-top:4px; display:inline-block;
  background: rgba(206,0,0,.20); border:1px solid rgba(206,0,0,.45); color:#ffe6e6;
}
/* big scale */
.rcc-podium-section .rcc-p1 .m{ font-size:34px; }
.rcc-podium-section .rcc-p1 .n{ font-size:32px; }
.rcc-podium-section .rcc-p2 .m,
.rcc-podium-section .rcc-p3 .m{ font-size:24px; }
.rcc-podium-section .rcc-p2 .n,
.rcc-podium-section .rcc-p3 .n{ font-size:22px; }

.rcc-details{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:.9rem; padding:.9rem;
}
.rcc-details h2{ margin:.1rem 0 .6rem; font-size:18px; }
.rcc-details .rcc-details-list{ list-style:none; padding:0; margin:0 0 .6rem; display:grid; gap:.3rem; }
.rcc-details .rcc-details-list li strong{ margin-right:.4rem; }
.rcc-details .card-ish{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10); border-radius:.75rem; padding:.6rem; margin-top:.6rem; }
.rcc-details .rcc-bracket iframe{ width:100%; min-height:520px; }

.rcc-back{ margin:.9rem 0 0; }
.rcc-back a{ color:#fff; text-decoration:none; font-weight:800; }
.rcc-back a:hover{ text-decoration:underline; }

/* small screens */
@media (max-width: 960px){
  .rcc-podium-section .rcc-p1 .n{ font-size:28px; }
  .rcc-podium-section .rcc-p2 .n,
  .rcc-podium-section .rcc-p3 .n{ font-size:20px; }
}



/* winners left→right with 1st most prominent, amounts more visible */
.rcc-winners-inline{ justify-content:center; }
.rcc-winners-inline .x{ font-size:14px; font-weight:900; color:#ffe6e6; margin-left:0px; }
.rcc-winners-inline .rcc-p1 .m{ font-size:24px; }
.rcc-winners-inline .rcc-p1 .n{ font-size:22px; }
.rcc-winners-inline .rcc-p2 .m,
.rcc-winners-inline .rcc-p3 .m{ font-size:18px; opacity:.95; }
.rcc-winners-inline .rcc-p2 .n,
.rcc-winners-inline .rcc-p3 .n{ font-size:16px; opacity:.95; }













/* Hide caption row entirely when no description is present */
.rc-lb--no-desc .rc-lb__caption { display: none; }
.rc-lb--no-desc .rc-lb__dialog {
  grid-template-rows: 1fr;  /* single row, no caption row */
  row-gap: 0;               /* remove gap that could look like a bar */
  padding-bottom: 8px;      /* tidy bottom padding */
}

/* Keep nav arrows centered regardless of caption presence
   Make them position relative to the overlay (not the stage/dialog) */
.rc-lb__dialog, .rc-lb__stage { position: static; } /* ensures .rc-lb (the overlay) is the positioned ancestor */






/* Squad pills are clickable selections */
.page-clanwars .cw-squad-list .pill { cursor: pointer; user-select: none; }
.page-clanwars .cw-squad-list .pill.is-active {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.42);
}

/* Hide filtered-out cards safely */
.cw-card[hidden] { display: none !important; }


















/* ===== Member Single: Authored Blog Posts ===== */
.member-single .member-authored-posts {
  margin-top: 1rem;
}

.member-single .member-authored-posts h2 {
  margin-top: 0;

}

/* Grid list */
.member-single .member-post-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .member-single .member-post-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .member-single .member-post-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Cards */
.member-single .member-post-item {
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 12px 14px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.member-single .member-post-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

/* Title + date */
.member-single .member-post-item .post-title {
  display: block;
  font-weight: 600;
  text-decoration: none;
}

.member-single .member-post-item .post-title:hover {
  text-decoration: underline;
}

.member-single .member-post-item .post-date {
  display: block;
  margin-top: 4px;
  font-size: .875rem;
  opacity: .75;
}

/* ===== Member Single: fine-tune CW match list flag spacing ===== */


.member-single .mcw-match-list .opp .flag-16 {
  width: 18px;
  height: 12px;
  object-fit: cover;
  flex: 0 0 16px;
}





















/* ===== RCC — Statistics (bottom of /rcc) ===== */
.rcc-stats { margin-top: 1.2rem; }
.rcc-stats__title { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 900; }

.rcc-stats__grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px){ .rcc-stats__grid { grid-template-columns: 1fr; } }

.rcc-stat-card{
  border-radius: .8rem;
  padding: .7rem .8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
}
.rcc-stat-card__title{ margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 900; }

.rcc-toplist{ list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .35rem; }
.rcc-topitem{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem; }
.rcc-topitem__name{ font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcc-topitem__meta{ opacity: .95; font-size: .95em; }
.rcc-topitem__meta.r{ font-weight: 900; }

.rcc-chip{ display: inline-block; margin-left: .4rem; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }

.rcc-total-pools{
  margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed rgba(255,255,255,.12);
  display: flex; align-items: baseline; gap: .4rem; font-weight: 800;
}
.rcc-total-pools .label{ font-size: .95em; opacity: .85; }







.page-clanwars .cw-past .cw-card .cw-vs {
  visibility: hidden;
}


















/* =========================================
   Single Download — subtle “member-single” vibe
   ========================================= */

body.single-download .entry-header {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .8rem;
  padding: .9rem 1rem;
  box-shadow: none;
}

body.single-download .entry-title {
  font-family: var(--font-heading);

  margin: 0 0 .35rem;
  color: #fff;
}

/* Meta chips (date · FORMAT · vX · size) — match pill look */
body.single-download .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  font-size: 13px;
  opacity: .95; /* overrides earlier .single-download .entry-meta */
}
body.single-download .entry-meta .dot { opacity: .5; }
body.single-download .entry-meta time,
body.single-download .entry-meta span:not(.dot) {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  line-height: 1;
}

/* Actions row (keep it calm) */
body.single-download .download-actions {
  gap: 8px !important;
  margin: .75rem 0 1rem;
}

/* Keep your red button; just unify rounding and nix shadows */
body.single-download a.download-button {
  border-radius: .6rem;
  box-shadow: none;
}

/* Countdown chip — simple, no glow */
body.single-download .dl-countdown {
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* Content area = same card recipe as member blocks */
body.single-download .entry-content {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .75rem;
  padding: .9rem 1rem;
  box-shadow: none;
  color: #e9e9e9;
	margin-bottom: 1em;
}

/* Links: tidy underline feel */
body.single-download .entry-content a {
  color: var(--clan-red);
  border-bottom: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
}
body.single-download .entry-content a:hover { border-color: rgba(255,255,255,.32); }

/* Tags—reuse your pill look */
body.single-download .entry-tags { margin-top: .5rem; gap: .4rem; }
body.single-download .entry-tags .pill {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* Mobile tweaks */
@media (max-width: 720px){
  body.single-download .entry-header { padding: .75rem .9rem; }
  body.single-download .entry-title { font-size: 24px; }
}



.frontpage-ad {
	margin-top: .7rem;
	margin-bottom: .4rem;
	
}
.frontpage-ad a {
	transition: all 1s ease-in-out;
}
.frontpage-ad a:hover img {
	transform: translateY(-1px);
	
}














/* === Replay upload modal (layout-only; keep theme button styles) === */
.post-type-archive-replay .main-frame { position: relative; }

/* Title row: button next to headline, respecting page paddings */
.replay-archive-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 0rem;
}
.replay-archive-bar .btn { margin-left: auto; } /* Upload button sits to the right */

/* Fullscreen (inside main-frame) modal */
.replay-modal {
  position: absolute;
  inset: 0;                /* fills the main-frame */
  display: none;
  place-items: center;
  z-index: 40;
}
.replay-modal.open { display: grid; }

.replay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
}

.replay-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(720px, 92%);
  max-height: 90%;
  overflow: auto;
  padding: 1rem;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .75rem;
}

.replay-modal-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* Keep your existing replay-upload-form inputs tidy; no button color overrides here */
.replay-upload-form label { display:block; font-size:12px; margin:.5rem 0; opacity:.9; }
.replay-upload-form input[type="file"],
.replay-upload-form textarea { width:100%; margin-top:.25rem; }
.replay-upload-form button[type="submit"] { margin-top:.5rem; }














/* Skin the native file button */
.replay-upload-form input[type="file"] {
  font: inherit;          /* match your site font */
  color: inherit;
}

/* Modern browsers */
.replay-upload-form input[type="file"]::file-selector-button {
  font: inherit;
  padding: .45rem .75rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}

/* Old Chromium/WebKit fallback */
.replay-upload-form input[type="file"]::-webkit-file-upload-button {
  font: inherit;
  padding: .45rem .75rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}

.replay-upload-form input[type="file"]::file-selector-button:hover,
.replay-upload-form input[type="file"]::-webkit-file-upload-button:hover {
  background: rgba(255,255,255,.12);
}

.replay-upload-form input[type="file"]::file-selector-button:focus-visible,
.replay-upload-form input[type="file"]::-webkit-file-upload-button:focus-visible {
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}











/* Minimal spinner that inherits your button color */
.replay-btn-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.125em;
  margin-left: .5rem;
  animation: rcspin .8s linear infinite;
}

@keyframes rcspin { to { transform: rotate(360deg); } }

/* Optional: prevent closing while uploading */
.replay-modal.is-uploading .replay-modal-close { pointer-events: none; opacity: .5; }
.replay-modal.is-uploading [data-close] { pointer-events: none; }



















/* ===== Replay filter bar ===== */
.replay-filterbar {
  margin: .5em 0 1.5em 0;
  padding: .5rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}
.replay-filterbar .rf-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Inputs adopt theme font/colors but get a neat shell */
.replay-filterbar input[type="search"],
.replay-filterbar select {
  font: inherit;
  color: inherit;
  padding: .45rem .6rem;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.replay-filterbar input[type="search"] {
  flex: 1 1 260px;
}

.replay-filterbar .rf-races {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}
.replay-filterbar .rf-vs { opacity: .65; }
.replay-filterbar .rf-clear.btn { padding: .35rem .6rem; }

.replay-filterbar .rf-count {
  font-size: 12px;
  opacity: .8;
}

/* Screen reader only helper */
.sr-only {
  position: absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* hide elements flagged as [hidden] everywhere */
[hidden]{display:none!important}

/* hide the default pagination while filters are active */
.main-frame.filter-active .pagination{display:none}

/* small loading pulse in the filter bar when pulling more pages */
.replay-filterbar .rf-loading{display:none;align-items:center;gap:.4rem;font-size:12px;opacity:.85}
.replay-filterbar.is-loading .rf-loading{display:inline-flex}
.replay-filterbar .rf-loading .replay-btn-spinner{width:.9em;height:.9em;margin:0}







/* Always hide elements explicitly flagged as [hidden] */
[hidden]{display:none!important}

/* Hide server pagination while filters are active */
.main-frame.filter-active .pagination:not(.pagination-client){display:none}

/* Client pager look */
.pagination-client{
  display:flex; align-items:center; gap:.6rem; margin:.75rem 0 0;
  font-size:14px;
}
.pagination-client .page{
  padding:.35rem .6rem; border:1px solid rgba(255,255,255,.16);
  border-radius:8px; background:rgba(255,255,255,.06); color:inherit; cursor:pointer;
}
.pagination-client .page[disabled]{opacity:.5; cursor:default}

/* Filterbar loading pulse (reuses your spinner from earlier) */
.replay-filterbar .rf-loading{display:none; align-items:center; gap:.4rem; font-size:12px; opacity:.85}
.replay-filterbar.is-loading .rf-loading{display:inline-flex}
.replay-filterbar .rf-loading .replay-btn-spinner{width:.9em; height:.9em; margin:0}









/* --- Replay filter bar: compact + styled --- */

/* overall spacing/height */

.replay-filterbar .rf-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem;
}

/* inputs + selects use same sizing */
.replay-filterbar input[type="search"],
.replay-filterbar select,
.replay-filterbar .rf-clear.btn{
  height:36px; line-height:34px;
  padding:0 .75rem;
  font-size:14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
}

/* search field */
#replayFilterText{
  min-width:240px;
}

/* nice placeholder */
#replayFilterText::placeholder{opacity:.7}

/* red focus ring (replace blue outline) */
.replay-filterbar input[type="search"]:focus,
.replay-filterbar select:focus,
.replay-filterbar .rf-clear.btn:focus{
  outline:none;
  border-color:#ce0000 !important;
  box-shadow:0 0 0 2px #ce0000 inset, 0 0 0 1px #ce0000;
}

/* also catch keyboard-only focus */
.replay-filterbar input[type="search"]:focus-visible,
.replay-filterbar select:focus-visible,
.replay-filterbar .rf-clear.btn:focus-visible{
  outline:none;
  border-color:#ce0000 !important;
  box-shadow:0 0 0 2px #ce0000 inset, 0 0 0 1px #ce0000;
}

/* VS separator */
.rf-vs{opacity:.7; padding:0 .2rem;}

/* Clear button look */
.replay-filterbar .rf-clear.btn{
  background:#fff;
  border-color:rgba(0,0,0,.12);
  cursor:pointer;
  transition:filter .12s ease, border-color .12s ease;
}
.replay-filterbar .rf-clear.btn:hover{
  border-color:#ce0000; filter:brightness(0.98);
}

/* --- Select styling (custom arrow, consistent colors) --- */

.replay-filterbar select{
  -webkit-appearance:none; appearance:none;
  padding-right:2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ce0000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right .6rem center;
  background-size:12px 8px;
}

/* Ensure readable dropdown options (browser-dependent) */
.replay-filterbar select option{
  color:#111;               /* readable on white popup */
  background:#fff;          /* many browsers respect this */
}

/* --- Dark shell theme support (from your theme toggle) --- */
.replay-filterbar input[type="search"],
.replay-filterbar select,
.replay-filterbar .rf-clear.btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
.replay-filterbar select option{
  color:#fff;
  background:#161616; /* fallback; some browsers ignore background for options */
}

/* Keep the loading chip subtle & aligned */
.replay-filterbar .rf-loading{
  display:none; align-items:center; gap:.4rem;
  font-size:12px; opacity:.85;
}
.replay-filterbar.is-loading .rf-loading{display:inline-flex}
.replay-filterbar .rf-loading .replay-btn-spinner{width:.9em;height:.9em;margin:0}

/* Slimmer count text */
#replayFilterCount{ font-size:12px; opacity:.85; }

/* Tighten the bar vertically without cramping */
@media (max-width:640px){
  #replayFilterText{min-width:180px;}
}



.replay-page .entry-header,
.replay-page h1 {
	margin-bottom: 0;
}





/* Header layout */
.replay-archive-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
}
.replay-archive-bar .rbar-right{
  display:flex; align-items:center; gap:.6rem; flex-shrink:0;
}

/* Inline status */
.replay-inline-status{
  font-size:12px; line-height:1; white-space:nowrap;
  padding:.35rem .5rem; border-radius:10px;
  border:1px solid transparent; background:rgba(0,0,0,.04); color:#111;
}
.replay-inline-status.status-success{ color:#2ecc71; border-color:#2ecc71; background:transparent; }
.replay-inline-status.status-error{   color:#ce0000; border-color:#ce0000; background:transparent; }

/* Dark theme */
html[data-shell-theme="dark"] .replay-inline-status{
  background:rgba(255,255,255,.06); color:#fff; border-color:transparent;
}
html[data-shell-theme="dark"] .replay-inline-status.status-success{ color:#5be58f; border-color:#5be58f; }
html[data-shell-theme="dark"] .replay-inline-status.status-error{   color:#ff6a6a; border-color:#ff6a6a; }



.frontpage .entry-header,
.frontpage .entry-title {
	margin-bottom: .5rem;
}


.replay-upload-trigger {
	background: #ce0000 !important;
	font-weight: 800 !important;
}













/* ===== Bombastic StarLeague — Sidebar Ad (v3) ===== */
.bsl-ad{
  --w:340px; --h:80px;
  --radius:12px;
  --border:rgba(255,255,255,.14);
  --ink:#e9f1ff;

  position:relative;
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:4px;
  width:min(100%, var(--bsl-w, var(--w)));
  height:var(--bsl-h, var(--h));
  padding:10px 10px 10px 12px;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(8,16,35,.75), rgba(8,16,35,.85));
  isolation:isolate;
  text-decoration:none !important;
}
.bsl-ad:link,
.bsl-ad:visited,
.bsl-ad:hover,
.bsl-ad:focus,
.bsl-ad * { text-decoration:none !important; }

/* Wallpaper pushed way back with heavy brand tint (behind content) */
.bsl-ad::before{
  content:"";
  position:absolute; inset:-14%;
  background:
    linear-gradient(0deg, rgba(20,51,91,.72), rgba(18,29,43,.86)),
    var(--bsl-wallpaper, url("/wp-content/uploads/2025/10/Wallpaper1.jpg")) center / cover no-repeat;
  filter:brightness(.55) saturate(.9) contrast(.95);
  transform:scale(1.18) translate3d(-6%, -4%, 0);
  animation:bsl-drift 24s linear infinite;
  z-index:-1;
}
@keyframes bsl-drift{
  0%   {transform:scale(1.18) translate3d(-6%, -4%, 0) rotate(.001deg);}
  50%  {transform:scale(1.18) translate3d( 6%,  4%, 0) rotate(.001deg);}
  100% {transform:scale(1.18) translate3d(-6%, -4%, 0) rotate(.001deg);}
}

/* Artwork layout */
.bsl-ad__logo{
  width:55px; height:55px; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.65));margin-right: 6px;
}

/* Make wordmark much larger and left-aligned */
.bsl-ad__middle{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:4px; min-width:0; line-height:1;
}
.bsl-ad__brand{
  height:36px; /* bigger */
  width:auto; object-fit:contain;
  align-self:flex-start; /* left aligned */
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));
  opacity:1;
}
/* Season: smaller, sits to the bottom-right under the brand */
.bsl-ad__season{
  height:18px; width:auto; object-fit:contain;
  align-self:flex-start;  /* pushes it to the right under the brand */
  margin-top:1px; margin-right:2px;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));
}

/* Dark CTA themed around #14335b */
.bsl-ad__cta{
  position:relative;
  display:inline-grid; place-items:center;
  padding:.45rem .7rem;
  border-radius:999px;
  font:600 12px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
  letter-spacing:.35px; text-transform:uppercase;
  color:#eaf1ff;
  background:linear-gradient(180deg, #2a4f83, #14335b 58%, #0f2748);
  border:1px solid rgba(200,220,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.35);
  white-space:nowrap;
  overflow:hidden;
  transition:filter .15s ease, transform .15s ease, box-shadow .2s ease;
}
.bsl-ad__cta::after{
  content:"";
  position:absolute; inset:-2px;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:bsl-sheen 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bsl-sheen{
  0% { transform:translateX(-120%); }
  60%,100% { transform:translateX(120%); }
}

/* Hover: keep artwork fixed; only subtle CTA response */
.bsl-ad:hover .bsl-ad__cta{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.45);
}
.bsl-ad:hover .bsl-ad__logo,
.bsl-ad:hover .bsl-ad__brand,
.bsl-ad:hover .bsl-ad__season{ transform:none; }

/* Focus */
.bsl-ad:focus-visible{
  outline:2px solid #7cb5ff;
  outline-offset:2px;
  border-color:rgba(124,181,255,.7);
}

/* Widget nicety */
.widget .bsl-ad{ display:block; margin-bottom:14px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bsl-ad::before{ animation:none; }
  .bsl-ad__cta::after{ animation:none; }
}











.badge-trial,
.pill-status.pill-trial {
  color: #94abd4;
  background: linear-gradient(180deg, #1b2a44 0%, #162338 100%);
	
  border-color: #304566;
}

.badge-trial,
.badge-honorary {
text-transform: capitalize; 	
}


/* Single member page: capitalize the status label visually */
.member-single .pill-status { 
  text-transform: capitalize; 
}











/* ===== Single: Prev/Next footer (uniform, dark, responsive) ===== */
.rc-post-nav {
  margin-top: 2.5rem;
}

.rc-post-nav .nav-links {
  display: flex;
  gap: 12px;
}

/* Make cards share space evenly */
.rc-post-nav .nav-previous,
.rc-post-nav .nav-next {
  flex: 1 1 0;
}

/* If there is only a single card, it should span full width */
.rc-post-nav .nav-links > .nav-previous:only-child,
.rc-post-nav .nav-links > .nav-next:only-child {
  flex: 1 0 100%;
  max-width: 100%;
}

/* Card styling */
.rc-post-nav a {
  display: block;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid #181818;
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 96px;
  height: 100%;
  outline: none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover and focus */
.rc-post-nav a:hover,
.rc-post-nav a:focus-visible {
  background: #0a0a0a;
  border-color: #222;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Uniform text blocks */
.rc-post-nav .rc-nav-kicker {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 6px;
}

.rc-post-nav .rc-nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* clamp long titles to two lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  line-height: 1.25;
  font-size: 16px;
}

/* No arrows, both cards look identical */
.rc-post-nav .nav-previous a::before,
.rc-post-nav .nav-next a::after { content: none; }

/* Mobile stack */
@media (max-width: 720px) {
  .rc-post-nav .nav-links {
    flex-direction: column;
  }
}

















/* Members archive: squad header row with right-aligned count */
.squad-headerbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1rem 0 .5rem;
}

.squad-headerbar .squad-heading {
  margin: 0;
	display: flex;
  justify-content: center;
  align-items: center;
}

.squad-headerbar .squad-count {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .squad-headerbar { align-items: flex-start; }
  .squad-headerbar .squad-count { font-size: .9rem; }
}














/* ===== SLON Tour — Sidebar Ad (compact, dark, animated gradient) ===== */
.slon-ad{
  --w:340px; --h:60px;
  --radius:12px;
  --ink:#eaf6ff;

  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:8px;
  width:min(100%, var(--slon-w, var(--w)));
  height:var(--slon-h, var(--h));
  padding:4px 10px 7px 15px;                /* tighter */
  box-sizing:border-box;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  text-decoration:none !important;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #061625, #071a2b); /* dark base */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.35);
  isolation:isolate;
}
.slon-ad:link, .slon-ad:visited, .slon-ad:hover, .slon-ad:focus, .slon-ad *{
  text-decoration:none !important;
}

/* Modern animated gradient background (cross-browser friendly) */
.slon-ad::before{
  content:"";
  position:absolute; inset:-18%;
  background:
    radial-gradient(60% 80% at 15% 30%, color-mix(in srgb, var(--slon-accent, #8fe7fb) 28%, transparent) 0%, transparent 60%),
    radial-gradient(50% 60% at 85% 25%, color-mix(in srgb, var(--slon-primary, #134d7b) 45%, transparent) 0%, transparent 62%),
    radial-gradient(70% 60% at 70% 85%, color-mix(in srgb, var(--slon-contrast, #ee9422) 14%, transparent) 0%, transparent 65%);
  opacity:.9;
  transform:scale(1.1);
  animation: slon-blobs-1 22s ease-in-out infinite;
  z-index:-1;
}
.slon-ad::after{
  content:"";
  position:absolute; inset:-22%;
  background:
    radial-gradient(60% 80% at 20% 75%, color-mix(in srgb, var(--slon-primary, #134d7b) 35%, transparent) 0%, transparent 60%),
    radial-gradient(50% 60% at 90% 60%, color-mix(in srgb, var(--slon-accent, #8fe7fb) 18%, transparent) 0%, transparent 64%);
  opacity:.6;
  transform:scale(1.15);
  animation: slon-blobs-2 28s ease-in-out infinite;
  z-index:-1;
}
@keyframes slon-blobs-1{
  0%,100% { transform:translate3d(0,0,0) scale(1.1); }
  50%     { transform:translate3d(-2%, -1.5%, 0) scale(1.1); }
}
@keyframes slon-blobs-2{
  0%,100% { transform:translate3d(0,0,0) scale(1.15); }
  50%     { transform:translate3d(2%, 1.5%, 0) scale(1.15); }
}

/* Logo remains big despite reduced height */
.slon-ad__logo{
  width:50px; height:50px; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
}

/* Text */
.slon-ad__middle{
  display:flex; flex-direction:column; min-width:0; gap:2px; line-height:1.05;
}
.slon-ad__title{
  font-weight:800; font-size:13px; letter-spacing:.2px;
  color:var(--ink);
  text-shadow:0 1px 8px rgba(0,0,0,.25);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slon-ad__subtitle{
  font-weight:600; font-size:11px; letter-spacing:.25px;
  color:rgba(143,231,251,.96); /* #8fe7fb on dark */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* CTA — only element with hover interaction */
.slon-ad__cta{
  display:inline-grid; place-items:center;
  padding:.36rem .60rem;
  border-radius:999px;
  font:700 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
  letter-spacing:.35px; text-transform:uppercase;
  color:#f2f6ff;
  background:linear-gradient(180deg, #1a3e62, var(--slon-primary, #134d7b) 62%, #0a2744);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 3px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.slon-ad:hover .slon-ad__cta{
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Keep other contents static on hover */
.slon-ad:hover .slon-ad__logo,
.slon-ad:hover .slon-ad__title,
.slon-ad:hover .slon-ad__subtitle{ transform:none; }

/* Focus */
.slon-ad:focus-visible{
  outline:2px solid rgba(143,231,251,.65);
  outline-offset:2px;
}

/* Widget nicety */
.widget .slon-ad{ display:block; margin-bottom:14px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .slon-ad::before,
  .slon-ad::after{ animation:none; }
}









.js-squad {
	padding: 6px 10px;
}






  .sr-only {
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
.cw-toggle-more{
  width:100%; height:22px; padding:0; display:flex; align-items:center; justify-content:center;
  background:#0b0b0b; color:#a3a3a3; border:1px solid #1f1f1f; border-radius:6px; cursor:pointer;
  transition:opacity .2s ease, background .2s ease, border-color .2s ease;
  line-height:0; /* keeps the icon perfectly centered vertically */
}
.cw-toggle-more:hover{ opacity:.9; }
.cw-toggle-more:focus{ outline:2px solid #404040; outline-offset:2px; }

/* Chevron: smaller + reliable rotation across browsers */
.cw-toggle-more .chev{
  width:16px; height:16px; display:inline-block;
  transition:transform .2s ease;
  transform-origin:50% 50%;
  transform-box:fill-box; /* important for SVG rotation in some engines */
}
.cw-toggle-more[aria-expanded="true"] .chev{ transform:rotate(180deg); }








/* Twitch live dot for archive icons */
.member-social--archive .ms-link--twitch { position: relative; display: inline-block; }



/* ===== Twitch LIVE: static dot + radar pulse (archive list) ===== */
.member-social--archive .ms-link--twitch {
  position: relative;
  display: inline-block;
}

/* The solid red dot with black ring */
.member-social--archive .ms-link--twitch[data-live="1"]::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e11d48;              /* same red as on single */
  box-shadow: 0 0 0 2px #000;        /* crisp ring on dark bg */
  z-index: 1;                        /* keep above the halo */
}

/* The pulsing halo behind the dot */
.member-social--archive .ms-link--twitch[data-live="1"]::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  z-index: 0;
  /* Start of the pulse */
  box-shadow: 0 0 0 0 rgba(225, 29, 72, .55);
  animation: msPulse 1.6s infinite;
  will-change: box-shadow;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .member-social--archive .ms-link--twitch[data-live="1"]::after {
    animation: none;
  }
}

/* Same pulse we used on .ms-live-dot */
@keyframes msPulse {
  0%   { box-shadow: 0 0 0 0   rgba(225, 29, 72, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(225, 29, 72, 0); }
  100% { box-shadow: 0 0 0 0   rgba(225, 29, 72, 0); }
}








.mcw-match .score-wo {
  font-weight: 700;
  letter-spacing: 0.05em;
}



  /* Centered two-line opponent block */
  .mcw-match .opp-inner {
    display: inline-block;
    text-align: center;
  }

  .mcw-match .opp-mainline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
  }

  .mcw-match .opp-team {
    font-weight: 500;
  }

  .mcw-match .opp-vs {
    display: block;
    font-size: 0.85em;
	  font-weight: 500;
    opacity: 0.85;
    margin-top: -2px;
  }

  /* Remove text underline when hovering a CW row */
  .mcw-match .line,
  .mcw-match .line:hover {
    text-decoration: none;
  }