/* =====================================================================================================================
   WCCF Online - the MyBB theme's stylesheet (theme "WCCF Online", a child of MyBB's Default theme)

   Source of truth: WCCFOnline\mybb\theme\wccf.css. mybb\apply.php writes it into MyBB as the theme's last stylesheet
   (every page), after MyBB's own global.css, which it restyles. apply.php appends one generated block: each forum's
   colour (setup\board.json) on its lead square and its dot.

   Look (2026-10-13): Hack Forums' arrangement - MyBB's own, since Hack Forums runs MyBB - dark, in WCCF 2010-11's
   orange and gold, with the game's own parts measured from its screens (research\GAME-UI-MAP.md): the dark striped
   title bar for every table's heading bar, the roster's taupe header band for column headings, the fixture list's
   black striped bars for the front page's forum rows, its coloured lead square (with ») for each forum's status, and
   the roster's white-ringed position dots for sub-forums. The same palette as the Flarum theme it replaced
   (forum\theme\wccf.less, contrast-checked by forum\tools\contrast.py: 0 failing pairs).
   ===================================================================================================================== */


/* ---- 1. Fonts (self-hosted; apply.php copies theme\assets to images\wccf) --------------------------------------- */

@font-face {
  font-family: "Barlow Condensed";
  src: url(../../../images/wccf/fonts/barlow-condensed-latin.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url(../../../images/wccf/fonts/dm-sans-latin.woff2) format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}


/* ---- 2. Tokens ------------------------------------------------------------------------------------------------- */

:root {
  /* surfaces: warm near-blacks from the game's pitch-night black */
  --wc-bg-sunken: #0A0705;
  --wc-bg: #110D0A;
  --wc-s1: #19130F;
  --wc-s2: #201914;
  --wc-s3: #2A221B;
  --wc-s4: #352B23;
  /* text */
  --wc-text-1: #F6F0E8;
  --wc-text-2: #D2C7B9;
  --wc-text-3: #AB9F90;
  /* the game's orange and gold */
  --wc-ember: #E96913;
  --wc-amber: #F9A41D;
  --wc-amber-hi: #FBB336;
  --wc-gold: #E4CD7D;
  --wc-signal: #F2BE1F;
  --wc-red: #CC370B;
  --wc-red-text: #FF8A66;
  --wc-on-accent: #130902;
  /* the game's interface (research\GAME-UI-MAP.md) */
  --wc-titlebar: #383838;
  --wc-titlebar-hi: #666666;
  --wc-on-titlebar: #EFEDE2;
  --wc-row: #0D0B0A;
  --wc-rim-top: #7E7270;
  --wc-rim-bottom: #5A514A;
  --wc-roster: #6B665B;
  --wc-on-roster: #F2F1F0;
  --wc-rule: #FD6708;
  --wc-read: #867D6F;
  --wc-tag: var(--wc-amber);
  /* lines, shape, type */
  --wc-line: rgba(255, 228, 196, 0.08);
  --wc-line-2: rgba(255, 228, 196, 0.14);
  --wc-line-ctrl: #7A6C5E;
  --wc-r1: 4px;
  --wc-r2: 6px;
  --wc-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --wc-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --wc-pop: 0 14px 34px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --wc-panel-height: 52px;
}


/* ---- 3. Base ---------------------------------------------------------------------------------------------------- */

html {
  scroll-padding-top: calc(var(--wc-panel-height) + 10px);
}
body,
#container {
  background: var(--wc-bg);
  color: var(--wc-text-1);
  font-family: var(--wc-body);
  font-size: 15px;
  line-height: 1.5;
}
/* MyBB's global.css sets #container to at least 990px and .wrapper to 970px, so phones scrolled sideways (measured: a
   990px page in a 375px window, 2026-10-13) */
#container {
  min-width: 0;
}
a:link,
a:visited,
a:active {
  color: var(--wc-amber-hi);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--wc-gold);
}
::selection {
  background: rgba(249, 164, 29, 0.35);
  color: var(--wc-text-1);
}
.wrapper {
  width: auto;
  min-width: 0;
  max-width: 1100px;
  padding: 0 15px;
}
.smalltext {
  font-size: 13.5px;
}
.largetext {
  font-family: var(--wc-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}
hr {
  border: 0;
  border-top: 1px solid var(--wc-line-2);
}
fieldset {
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
}
#content {
  background: transparent;
  padding: 18px 0 10px;
}


/* ---- 4. The ticker and the masthead (theme\templates\header.html) --------------------------------------------------- */

/* the ticker: the game's black strip (a fine dot grid, a thin white line under it) with its yellow text, scrolling
   slowly; it stops under the pointer, and stands still for anyone whose system asks for reduced motion (section 14) */
.wc-ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  height: 30px;
  background-color: #050302;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
  background-size: 4px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--wc-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-signal);
}
.wc-ticker-track {
  display: inline-flex;
  animation: wc-ticker 80s linear infinite;
}
.wc-ticker-track span {
  position: relative;
  padding: 0 28px;
}
.wc-ticker-track span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  background: var(--wc-ember);
  transform: rotate(45deg);
}
.wc-ticker:hover .wc-ticker-track {
  animation-play-state: paused;
}
@keyframes wc-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* the masthead: dark and plain - the crest and the name; the centre circle and halfway line faint on the right */
#logo {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  background: var(--wc-bg-sunken);
  border-bottom: 1px solid var(--wc-line-2);
}
#logo::before {
  content: "";
  position: absolute;
  top: -40px;
  bottom: -40px;
  right: 7%;
  width: 300px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 108px, rgba(255, 228, 196, 0.07) 109px, rgba(255, 228, 196, 0.07) 111px, transparent 112px),
    radial-gradient(circle at 50% 50%, rgba(255, 228, 196, 0.1) 3px, transparent 4px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 228, 196, 0.06) calc(50% - 1px), rgba(255, 228, 196, 0.06) calc(50% + 1px), transparent calc(50% + 1px));
}
#logo .wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.wc-logo,
.wc-logo:link,
.wc-logo:visited,
.wc-logo:hover {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--wc-text-1);
}
.wc-crest {
  flex: 0 0 auto;
  width: 58px;
  height: 66px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.wc-logo-text {
  display: flex;
  flex-direction: column;
}
.wc-logo-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.wc-logo-word {
  font-family: var(--wc-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--wc-text-1);
}
.wc-logo-online {
  font-family: var(--wc-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-amber);
}
.wc-logo-tag {
  margin-top: 6px;
  font-size: 15px;
  color: var(--wc-text-2);
}
/* MyBB's top links (Search, Member List, Calendar, Help): quiet, on the right of the crest */
#logo ul.top_links {
  float: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
}
#logo ul.top_links li {
  margin: 0 0 0 14px;
}
#logo ul.top_links a,
#logo ul.top_links a:visited {
  color: var(--wc-text-2);
  font-size: 14px;
}
#logo ul.top_links a:hover {
  color: var(--wc-amber-hi);
}


/* ---- 5. The bar and the section buttons (theme\templates\header.html and header_welcomeblock_*.html) -------------- */

/* the bar (MyBB's #panel), one row stuck to the top while the page scrolls: a member's links on the left - User CP,
   messages with the unread count, new posts, Mod CP and Admin CP for staff - and search, profile and log out on the
   right (a visitor: log in, sign up). The welcome block and the search are MyBB's two pieces side by side (MyBB fills
   the welcome block before the search, so one cannot hold the other); order places them */
#panel {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wc-s1);
  border-bottom: 1px solid var(--wc-line-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.wc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-height: var(--wc-panel-height);
  font-size: 14px;
}
.wc-bar > ul.wc-bar-links {
  order: 1;
}
.wc-bar > form {
  order: 2;
  margin-left: auto;
}
.wc-bar > .wc-bar-account {
  order: 3;
}
#header ul.wc-bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
}
#header ul.wc-bar-links li {
  display: block;
  margin: 0;
}
/* MyBB's #header ul.menu li a gives every header link a sprite icon; these are plain words */
#header ul.wc-bar-links li a,
#header ul.wc-bar-links li a:visited {
  padding: 0;
  background-image: none;
  line-height: inherit;
  font-weight: 600;
  color: var(--wc-text-2);
  text-decoration: none;
}
#header ul.wc-bar-links li a:hover {
  color: var(--wc-amber-hi);
}
.wc-count {
  display: inline-block;
  min-width: 8px;
  margin-left: 3px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--wc-text-1);
  background: var(--wc-s3);
  border-radius: 10px;
}
.wc-bar-account {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wc-bar-account a,
.wc-bar-account a:visited {
  font-weight: 700;
  color: var(--wc-text-1);
  text-decoration: none;
}
.wc-bar-account a:hover {
  color: var(--wc-amber-hi);
}
.wc-bar-account a.button.wc-signup,
.wc-bar-account a.button.wc-signup:visited {
  background: var(--wc-amber);
  border-color: var(--wc-amber);
  color: var(--wc-on-accent);
}
.wc-bar-account a.button.wc-signup:hover {
  background: var(--wc-amber-hi);
  color: var(--wc-on-accent);
}
#search {
  display: flex;
  gap: 6px;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
}
#search input.textbox {
  width: 200px;
  padding: 6px 9px;
}
/* MyBB's own rule for this button names #search, so it outranks the general button rule below */
#search input.button {
  background: var(--wc-s3);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r1);
  color: var(--wc-text-1);
  padding: 6px 12px;
  font-weight: 600;
}
#search input.button:hover {
  background: var(--wc-s4);
}

/* the section buttons, as Hack Forums has them: centred under the bar, each a picture and a name, the one for the
   page being shown lit; they wrap to a second row rather than run off a narrow screen */
.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 2px;
}
.wc-tabs a,
.wc-tabs a:link,
.wc-tabs a:visited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  font-family: var(--wc-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wc-text-1);
  background: var(--wc-s2);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.wc-tabs a:hover {
  background: var(--wc-s3);
  border-color: var(--wc-line-ctrl);
}
.wc-tabs a[aria-current="page"] {
  color: var(--wc-amber-hi);
  background: rgba(249, 164, 29, 0.12);
  border-color: var(--wc-amber);
}
.wc-tabs img {
  display: block;
  width: 22px;
  height: 22px;
}


/* ---- 6. Tables: every heading bar is the game's title bar, every column-heading row its roster band --------------- */

table {
  color: var(--wc-text-1);
}
.tborder {
  margin: 0 auto;
  padding: 0;
  background: #000;
  border: 1px solid #000;
  border-radius: var(--wc-r2);
}
/* the game's dark title bar: grey lit in the centre under 1px black lines at 45 degrees every 4px, a 3px black base,
   wide-spaced light capitals, then the 2px orange rule of its title cards */
.thead {
  padding: 11px 16px;
  font-family: var(--wc-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wc-on-titlebar);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  background:
    repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, var(--wc-titlebar), var(--wc-titlebar-hi) 50%, var(--wc-titlebar));
  box-shadow: inset 0 -3px 0 #000;
  border: 0;
  border-bottom: 2px solid var(--wc-rule);
}
.thead a:link,
.thead a:visited,
.thead a:active {
  color: var(--wc-on-titlebar);
  text-decoration: none;
}
.thead .smalltext {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13.5px;
  color: #DCD8CC;
}
/* a thread's own heading bar (and a private message's) holds its title - a member's words, so not turned into capitals.
   Only the table that holds the posts itself: on User CP pages that table sits inside a layout table */
table:has(> tbody > tr > td#posts_container) > tbody > tr > td.thead {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 17px;
}
/* a poll's heading holds the member's question - not turned into capitals either (the poll box is a form to polls.php,
   its results a table with MyBB's vote bars) */
form[action="polls.php"] td.thead,
table:has(.pollbar) td.thead {
  text-transform: none;
  letter-spacing: 0.01em;
}
/* a poll's vote bars in the theme's amber, in place of MyBB's grey picture */
.pollbar {
  height: 10px;
  background: var(--wc-amber);
  border: 0;
  border-radius: 2px;
}
/* the game's roster header band: taupe, small light capitals */
.tcat {
  padding: 7px 12px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-on-roster);
  background: var(--wc-roster);
  border: 0;
  border-bottom: 3px solid var(--wc-rim-top);
}
.tcat a:link,
.tcat a:visited,
.tcat a:active {
  color: var(--wc-on-roster);
}
/* rows: dark, alternating as the roster does */
.trow1,
.trow2 {
  color: var(--wc-text-1);
  border: 0;
  border-bottom: 1px solid var(--wc-line-2);
}
.trow1 {
  background: var(--wc-s1);
}
.trow2 {
  background: #1E1713;
}
.trow_shaded {
  background: #2A1A15;
}
/* a group heading inside a list: "Pinned Threads", "Normal Threads" */
.trow_sep {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  background: var(--wc-s3);
  color: var(--wc-text-2);
  border-bottom: 1px solid var(--wc-line-2);
}
tr.trow_selected td {
  background: #2B2116;
}
.tfoot {
  background: var(--wc-s2);
  color: var(--wc-text-2);
  border-top: 1px solid var(--wc-line-2);
}
.tfoot a:link,
.tfoot a:visited {
  color: var(--wc-amber-hi);
}
.expcolimage {
  opacity: 0.7;
}


/* ---- 7. Forum and thread lists: each forum row is one of the game's fixture bars ----------------------------------- */

/* a forum row is a row holding a forum's picture or lead square: MyBB draws it with one template (forumbit_depth2_forum)
   on the front page and in a section's "Forums in" table, so one set of rules makes both look the same */
/* one solid colour, the surface of the site's other tables (the game's black with lines at 45 degrees, averaged as
   light, is #110F0E - the page's own colour), between the fixture bar's warm-grey rims, top and bottom */
tr:has(> td > .forum_status) {
  background: var(--wc-s1);
}
tr:has(> td > .forum_status) > td {
  padding: 14px 12px;
  background: transparent;
  border-top: 3px solid var(--wc-rim-top);
  border-bottom: 3px solid var(--wc-rim-bottom);
}
tr:has(> td > .forum_status):hover {
  background: var(--wc-s2);
}
tr:has(> td > .forum_status) > td:nth-child(2) > strong > a,
tr:has(> td > .forum_status) > td:nth-child(2) > strong > a:visited {
  font-size: 18px;
  color: var(--wc-text-1);
  text-decoration: none;
}
tr:has(> td > .forum_status) > td:nth-child(2) > strong > a:hover {
  color: var(--wc-amber-hi);
}
/* the description (on the front page with the sub-forums inside it) */
tr:has(> td > .forum_status) .smalltext {
  color: var(--wc-text-3);
  font-size: 14px;
}
/* the counts, in wide digits as the game's scores */
tr:has(> td > .forum_status) > td:nth-child(3),
tr:has(> td > .forum_status) > td:nth-child(4) {
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
/* the last post: title, when, who - right-aligned, as Hack Forums does (MyBB's markup: <a><strong>title</strong></a>) */
tr:has(> td > .forum_status) > td:nth-child(5) .smalltext {
  font-size: 13.5px;
}
tr:has(> td > .forum_status) > td:nth-child(5) .smalltext > a:first-child,
tr:has(> td > .forum_status) > td:nth-child(5) .smalltext > a:first-child:visited {
  font-size: 14.5px;
  color: var(--wc-text-1);
}
tr:has(> td > .forum_status) > td:nth-child(5) .smalltext > a:first-child:hover {
  color: var(--wc-amber-hi);
}

/* thread lists - a forum's (forumdisplay_thread) and a search's, which the Latest button opens
   (search_results_threads_thread): titles bold and light as Hack Forums has them, the starter quiet beneath, the counts
   in the forum rows' figures at a smaller size. Cells are found by what they hold, not by number: the two lists have
   different columns (a search's has the forum's name before the replies) */
tr.inline_row span[id^="tid_"] > a,
tr.inline_row span[id^="tid_"] > a:visited,
tr.inline_row a[id^="tid_"],
tr.inline_row a[id^="tid_"]:visited {
  font-size: 16px;
  font-weight: 700;
  color: var(--wc-text-1);
  text-decoration: none;
}
tr.inline_row span[id^="tid_"] > a:hover,
tr.inline_row a[id^="tid_"]:hover {
  color: var(--wc-amber-hi);
}
tr.inline_row .author {
  color: var(--wc-text-3);
}
/* the replies (the cell holding MyBB's "who posted" link) and the views (the cell after it); the replies link is a
   figure like the views, amber only under the pointer */
tr.inline_row > td:has(> a[href*="action=whoposted"]),
tr.inline_row > td:has(> a[href*="action=whoposted"]) + td {
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
tr.inline_row > td:has(> a[href*="action=whoposted"]) > a,
tr.inline_row > td:has(> a[href*="action=whoposted"]) > a:visited {
  color: var(--wc-text-1);
  text-decoration: none;
}
tr.inline_row > td:has(> a[href*="action=whoposted"]) > a:hover {
  color: var(--wc-amber-hi);
}
/* a search's forum column */
tr.inline_row > td:has(> a[href*="forumdisplay.php"]) > a,
tr.inline_row > td:has(> a[href*="forumdisplay.php"]) > a:visited {
  font-size: 14px;
  color: var(--wc-text-2);
  text-decoration: none;
}
tr.inline_row > td:has(> a[href*="forumdisplay.php"]) > a:hover {
  color: var(--wc-amber-hi);
}
/* the starter's line (theme\templates\forumdisplay_thread.html): the name, then a long thread's pages in brackets,
   "[Pages: 1 2 3]", as Hack Forums has it (forumdisplay_thread_multipage.html) */
.wc-thread-pages {
  margin-left: 14px;
  color: var(--wc-text-3);
}
.wc-thread-pages a,
.wc-thread-pages a:visited {
  color: var(--wc-text-2);
  font-weight: 700;
  text-decoration: none;
}
.wc-thread-pages a:hover {
  color: var(--wc-amber-hi);
}
/* the arrow to a thread's first unread post, before its title (forumdisplay_thread_gotounread.html) */
.wc-unread img {
  margin-right: 3px;
  vertical-align: -1px;
}

/* a thread's status, as Hack Forums marks it: a page, amber when it has posts you have not read, muted when you have
   read them all; a flame on a hot thread (MyBB's hottopic and hottopicviews settings), a lock on a closed one, a light
   dot when you have posted in it. MyBB names the states [dot_][new][hot][close]folder, or movefolder; its own
   thread_status.css places a sprite per state with two classes, so these rules carry one more (span, [class]) */
tr.inline_row > td:first-child {
  padding-left: 14px;
}
span.thread_status[class] {
  position: relative;
  width: 16px;
  height: 20px;
  background: url(../../../images/wccf/thread.svg) center / contain no-repeat;
  vertical-align: middle;
}
span.thread_status[class*="new"] {
  background-image: url(../../../images/wccf/thread-new.svg);
}
span.thread_status[class*="hot"]::before,
span.thread_status[class*="close"]::before {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -3px;
  width: 13px;
  height: 13px;
  background: url(../../../images/wccf/icons/fire.svg) center / contain no-repeat;
}
span.thread_status[class*="close"]::before {
  background-image: url(../../../images/wccf/icons/locked.svg);
}
span.thread_status[class*="dot_"]::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wc-text-1);
  box-shadow: 0 0 0 2px var(--wc-s1);
}
.thread_legend dd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 7px;
  color: var(--wc-text-3);
}

/* the lead square: the fixture bar's coloured square with its white chevrons - or, for a forum given a picture in
   setup\board.json, the picture in its place (rules generated by apply.php at the end); full colour when the forum has
   posts you have not read, muted when you have read them all (the game greys out a side that is out) */
.forum_status {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--wc-tag);
  background-image: none;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}
.forum_status::after {
  content: "\00BB";
  position: absolute;
  inset: 0;
  font: 900 26px/38px var(--wc-body);
  text-align: center;
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.forum_on {
  background-color: var(--wc-tag);
}
.forum_off {
  background-color: var(--wc-tag);
  filter: saturate(0.7) brightness(0.85);
}
.forum_offclose,
.forum_offlink {
  background-color: var(--wc-read);
}
.forum_offclose::after {
  content: "\00D7";
}
.forum_offlink::after {
  content: "\2197";
  font-size: 20px;
}

/* the sub-forums: two columns under the forum's description, each with a small solid dot in the forum's own colour,
   as Hack Forums lists them (theme\templates\forumbit_subforums.html and forumbit_depth3.html) */
ul.wc-subforums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 28px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
ul.wc-subforums li {
  display: flex;
  align-items: center;
  min-width: 0;
}
ul.wc-subforums a,
ul.wc-subforums a:visited {
  font-size: 15px;
  font-weight: 400;
  color: var(--wc-text-2);
  text-decoration: none;
}
ul.wc-subforums a:hover {
  color: var(--wc-amber-hi);
  text-decoration: underline;
}
.subforumicon {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 10px 0 2px;
  background: var(--wc-tag);
  background-image: none;
  border: 0;
  border-radius: 50%;
}
.subforum_minioff {
  filter: saturate(0.55) brightness(0.9);
}

/* the key to the squares, under the table */
.forum_legend {
  color: var(--wc-text-3);
}
.forum_legend dt .forum_status {
  width: 22px;
  height: 22px;
  --wc-tag: var(--wc-amber);
}
.forum_legend dt .forum_status::after {
  font-size: 15px;
  line-height: 21px;
}


/* ---- 8. Breadcrumbs, pagination, buttons, forms, menus ------------------------------------------------------------ */

/* the path bar, as Hack Forums draws it (theme\templates\nav*.html): a house for the front page, each step after it an
   arrow-shaped segment, the page you are on at the far end. MyBB's separators are kept in the markup (.wc-sep, for
   reading without styles) and hidden here; the arrows are drawn. The front page's path is only itself: no bar there,
   as on Hack Forums. */
.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 44px;
  padding: 0;
  background: var(--wc-s1);
  border: 1px solid #000;
  border-radius: var(--wc-r2);
  overflow: hidden;
  color: var(--wc-text-2);
  font-size: 14.5px;
  font-weight: 700;
}
.navigation:not(:has(> a)),
.navigation .wc-sep {
  display: none;
}
/* every step is a full row high, so a step that wraps to a second row (a long thread title) keeps its arrow whole */
.navigation > a:link,
.navigation > a:visited {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px 0 30px;
  color: var(--wc-text-2);
  text-decoration: none;
}
.navigation > a:hover {
  color: var(--wc-amber-hi);
}
/* the arrow closing each segment: the top and right sides of a square turned 45 degrees, 31px a side, so its points
   reach the bar's top and bottom (31 x 1.414 / 2 = 21.9 of the 22 half-height) */
.navigation > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 31px;
  height: 31px;
  border-top: 1px solid var(--wc-line-ctrl);
  border-right: 1px solid var(--wc-line-ctrl);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
/* the first step is the front page: a house in place of the board's name, which stays in the link for screen readers */
.navigation > a:first-child {
  width: 56px;
  padding: 0;
  font-size: 0;
  background: url(../../../images/wccf/home.svg) 17px center / 19px no-repeat;
}
.navigation .active {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 18px 0 30px;
  color: var(--wc-text-1);
}
/* on a thread page in a forum with more than one page of threads, MyBB puts a button after the forum's step that opens
   a list of the forum's pages (theme\templates\nav_dropdown.html: a button with a chevron in place of its blue
   triangle picture). The bar is not positioned, so the list (placed absolutely by MyBB's script) is not clipped by it */
.navigation > .pagination_breadcrumb_link {
  align-self: center;
  width: 26px;
  height: 26px;
  margin: 0 4px 0 12px;
  padding: 0;
  color: var(--wc-text-2);
}
.navigation > .pagination_breadcrumb_link::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: -3px auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.pagination_breadcrumb {
  padding: 8px;
  background: var(--wc-s2);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
  outline: 0;
  box-shadow: var(--wc-pop);
}

/* page numbers, as Hack Forums has them: small square buttons, the current one filled; MyBB's "Pages (5):" label is
   kept for screen readers only; its jump-to-page button (an arrow picture made for light pages) becomes a chevron */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 10px;
  padding-top: 0;
  font-size: 13px;
  color: var(--wc-text-3);
}
.pagination .pages {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pagination a,
.pagination a:visited,
.pagination .pagination_current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 28px;
  height: 28px;
  margin: 0;
  padding: 0 9px;
  background: var(--wc-s3);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r1);
  color: var(--wc-text-1);
  font-weight: 700;
  text-decoration: none;
}
.pagination a:hover {
  background: var(--wc-s4);
  border-color: var(--wc-line-ctrl);
  color: var(--wc-text-1);
}
.pagination .pagination_current {
  background: var(--wc-amber);
  border-color: var(--wc-amber);
  color: var(--wc-on-accent);
}
.pagination .go_page img {
  display: none;
}
.pagination .go_page::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.drop_go_page {
  padding: 8px;
  background: var(--wc-s2);
}
/* the attachment drop box (MyBB's post_attachments_new): its progress bar and dashes are written in the template's own
   style attributes (blue, light grey), which only !important outranks */
#upload_bar {
  background: var(--wc-amber) !important;
}
#dropzone {
  border-color: var(--wc-line-ctrl) !important;
  color: var(--wc-text-2);
}
#dropzone.activated {
  border-color: var(--wc-amber) !important;
}

input.textbox,
textarea,
select {
  background: var(--wc-s2);
  border: 1px solid var(--wc-line-ctrl);
  border-radius: var(--wc-r1);
  color: var(--wc-text-1);
  font-family: var(--wc-body);
  font-size: 15px;
  padding: 6px 8px;
}
input.textbox:focus,
textarea:focus,
select:focus {
  border-color: var(--wc-amber);
  outline: 2px solid rgba(249, 164, 29, 0.35);
  outline-offset: 0;
}
input.button,
button,
a.button,
a.button:link,
a.button:visited {
  background: var(--wc-s3);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r1);
  color: var(--wc-text-1);
  font-family: var(--wc-body);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
}
input.button:hover,
button:hover,
a.button:hover {
  background: var(--wc-s4);
  color: var(--wc-text-1);
}
/* the main actions in WCCF orange */
input.button[name="submit"] {
  background: var(--wc-amber);
  border-color: var(--wc-amber);
  color: var(--wc-on-accent);
}
input.button[name="submit"]:hover {
  background: var(--wc-amber-hi);
  color: var(--wc-on-accent);
}
/* Post Thread, New Reply and Thread Closed, as Hack Forums has them: dark buttons, each with a picture (Fluent's memo,
   reply arrow and lock) in place of MyBB's sprite */
a.button:is(.new_thread_button, .new_reply_button, .closed_button),
a.button:is(.new_thread_button, .new_reply_button, .closed_button):link,
a.button:is(.new_thread_button, .new_reply_button, .closed_button):visited {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px 8px 13px;
  border-color: var(--wc-line-ctrl);
  font-size: 15px;
}
a.button:is(.new_thread_button, .new_reply_button, .closed_button) span {
  padding-left: 29px;
  background: url(../../../images/wccf/icons/memo.svg) left center / 21px no-repeat;
}
a.button.new_reply_button span {
  background-image: url(../../../images/wccf/icons/reply.svg);
}
a.button.closed_button span {
  background-image: url(../../../images/wccf/icons/locked.svg);
}
label.error,
input.error,
textarea.error,
select.error {
  color: var(--wc-red-text);
  border-color: var(--wc-red);
}

.popup_menu {
  background: var(--wc-s2);
  border: 1px solid var(--wc-line-2);
  box-shadow: var(--wc-pop);
}
.popup_menu .popup_item {
  background: var(--wc-s2);
  color: var(--wc-text-1);
}
.popup_menu .popup_item:hover,
.popup_menu a.popup_item:hover {
  background: var(--wc-s3);
  color: var(--wc-text-1);
}

/* MyBB's dialog boxes (the quick login) */
.modal {
  background: var(--wc-s1);
  color: var(--wc-text-1);
  border: 1px solid #000;
  box-shadow: var(--wc-pop);
}


/* ---- 9. Posts: the member column beside each post (MyBB's classic layout, set in setup\board.json) --------------- */

/* the post as Hack Forums lays it out: the member column the post's full height, a thin line between it and the
   message, and under both a strip of small picture buttons. MyBB floats the two columns, so its column stopped where
   its words did; here the post is a flex row and the column always reaches the foot. MyBB's light borders (2px #ccc
   over the column, 1px under the buttons) are taken off - they were the white lines on every post */
.post {
  margin-bottom: 12px;
  background: var(--wc-s1);
  border: 1px solid #000;
  border-radius: var(--wc-r2);
  overflow: hidden;
}
.post .post_author {
  background: var(--wc-s2);
  border: 0;
  border-bottom: 1px solid var(--wc-line-2);
}
.post.classic {
  display: flex;
  flex-wrap: wrap;
  padding-top: 0;
}
/* the member column on the game's striped plate */
.post.classic .post_author {
  flex: 0 0 230px;
  box-sizing: border-box;
  float: none;
  width: auto;
  margin: 0;
  padding: 18px 14px;
  background-color: var(--wc-row);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55)),
    repeating-linear-gradient(45deg, rgba(126, 114, 112, 0.22) 0, rgba(126, 114, 112, 0.22) 1px, transparent 1px, transparent 4px);
  border: 0;
  border-right: 1px solid var(--wc-line-2);
  text-align: center;
}
.post.classic .post_content {
  flex: 1 1 0;
  min-width: 0;
  float: none;
  width: auto;
  padding: 0 0 12px;
}
.post .post_author div.author_avatar img {
  background: var(--wc-s3);
  border: 2px solid #000;
  border-radius: var(--wc-r1);
}
.post .post_author .author_information strong,
.post .post_author .largetext {
  font-size: 17px;
}
.post .post_author a:link,
.post .post_author a:visited {
  color: var(--wc-text-1);
  text-decoration: none;
}
.post .post_author .smalltext {
  color: var(--wc-text-3);
}
.post .post_author div.author_statistics {
  color: var(--wc-text-2);
  font-size: 13px;
}
.post.classic .post_author div.author_statistics {
  margin-top: 12px;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r1);
  text-align: left;
  line-height: 1.7;
}
/* the figures as Hack Forums sets them: the label on the left, the figure on the right (theme\templates\
   postbit_author_user.html, with the reputation, warning level and profile-field rows it holds) */
dl.wc-post-stats {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 0 12px;
  margin: 0;
}
dl.wc-post-stats dt {
  color: var(--wc-text-3);
}
dl.wc-post-stats dd {
  margin: 0;
  text-align: right;
  color: var(--wc-text-1);
  font-variant-numeric: tabular-nums;
}
.post .post_head {
  padding: 9px 14px;
  border-bottom: 1px solid var(--wc-line-2);
  color: var(--wc-text-3);
}
.post .post_head span.post_date {
  color: var(--wc-text-3);
}
.post_body {
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--wc-text-1);
}
/* the signature under a dotted line, centred, as Hack Forums has it */
.post_content .signature {
  margin: 14px 16px 0;
  padding: 12px 0 2px;
  border-top: 1px dotted var(--wc-line-ctrl);
  color: var(--wc-text-2);
  text-align: center;
}
.post .post_meta {
  margin: 6px 16px 0;
  color: var(--wc-text-3);
}
/* the strip of buttons under the post, as Hack Forums has it: small dark squares with a picture each (Fluent's), the
   member's buttons on the left, the post's own on the right. The word stays in the button for screen readers, and
   MyBB gives each button a title, shown under the pointer. A button without a picture here (an add-on's) keeps its
   word */
.post_controls {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  background: var(--wc-bg);
  border-top: 1px solid var(--wc-line-2);
  border-bottom: 0;
}
.post_controls .postbit_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  float: none;
}
.postbit_buttons > a:link,
.postbit_buttons > a:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 34px;
  height: 30px;
  margin: 0;
  padding: 0 9px;
  background: var(--wc-s3);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r1);
  color: var(--wc-text-1);
  font-size: 13px;
}
.postbit_buttons > a:hover {
  background: var(--wc-s4);
  border-color: var(--wc-line-ctrl);
  color: var(--wc-text-1);
}
/* a post chosen for a multi-quote (MyBB's script swaps the class) */
.postbit_buttons > a.postbit_multiquote_on {
  border-color: var(--wc-amber);
  box-shadow: inset 0 0 0 1px var(--wc-amber);
}
.postbit_buttons > a:is(.postbit_pm, .postbit_website, .postbit_find, .postbit_reputation_add, .postbit_edit,
  .postbit_qdelete, .postbit_qrestore, .postbit_quote, .postbit_multiquote, .postbit_multiquote_on, .postbit_report,
  .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm) {
  width: 34px;
  padding: 0;
}
.postbit_buttons > a:is(.postbit_pm, .postbit_website, .postbit_find, .postbit_reputation_add, .postbit_edit,
  .postbit_qdelete, .postbit_qrestore, .postbit_quote, .postbit_multiquote, .postbit_multiquote_on, .postbit_report,
  .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm) span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: none;
}
.postbit_buttons > a:is(.postbit_pm, .postbit_website, .postbit_find, .postbit_reputation_add, .postbit_edit,
  .postbit_qdelete, .postbit_qrestore, .postbit_quote, .postbit_multiquote, .postbit_multiquote_on, .postbit_report,
  .postbit_warn, .postbit_purgespammer, .postbit_reply_pm, .postbit_reply_all, .postbit_forward_pm, .postbit_delete_pm)::before {
  content: "";
  width: 18px;
  height: 18px;
  background: center / contain no-repeat;
}
.postbit_buttons > a.postbit_pm::before { background-image: url(../../../images/wccf/icons/envelope.svg); }
.postbit_buttons > a.postbit_website::before { background-image: url(../../../images/wccf/icons/globe.svg); }
.postbit_buttons > a.postbit_find::before { background-image: url(../../../images/wccf/icons/magnifier.svg); }
.postbit_buttons > a.postbit_reputation_add::before { background-image: url(../../../images/wccf/icons/thumbs-up.svg); }
.postbit_buttons > a.postbit_edit::before { background-image: url(../../../images/wccf/icons/pencil.svg); }
.postbit_buttons > a.postbit_qdelete::before,
.postbit_buttons > a.postbit_delete_pm::before { background-image: url(../../../images/wccf/icons/wastebasket.svg); }
.postbit_buttons > a.postbit_qrestore::before { background-image: url(../../../images/wccf/icons/restore.svg); }
.postbit_buttons > a.postbit_quote::before,
.postbit_buttons > a.postbit_reply_pm::before { background-image: url(../../../images/wccf/icons/reply.svg); }
.postbit_buttons > a.postbit_multiquote::before,
.postbit_buttons > a.postbit_multiquote_on::before { background-image: url(../../../images/wccf/icons/speech-bubble.svg); }
.postbit_buttons > a.postbit_report::before { background-image: url(../../../images/wccf/icons/flag.svg); }
.postbit_buttons > a.postbit_warn::before { background-image: url(../../../images/wccf/icons/warning.svg); }
.postbit_buttons > a.postbit_purgespammer::before { background-image: url(../../../images/wccf/icons/prohibited.svg); }
.postbit_buttons > a.postbit_reply_all::before { background-image: url(../../../images/wccf/icons/reply-all.svg); }
.postbit_buttons > a.postbit_forward_pm::before { background-image: url(../../../images/wccf/icons/forward.svg); }
blockquote {
  background: var(--wc-s2);
  border: 1px solid var(--wc-line-2);
  border-left: 3px solid var(--wc-amber);
  border-radius: var(--wc-r1);
  color: var(--wc-text-2);
}
blockquote cite {
  color: var(--wc-gold);
  border-bottom: 1px solid var(--wc-line-2);
}
/* the arrow after "... Wrote:" that jumps to the quoted post: our amber arrow in place of MyBB's green one */
.quick_jump {
  background: url(../../../images/wccf/unread.svg) left center / 12px no-repeat;
  padding-left: 14px;
}
.codeblock {
  background: var(--wc-s3);
  border: 1px solid var(--wc-line-2);
}
.codeblock .title {
  border-bottom: 1px solid var(--wc-line-2);
  color: var(--wc-text-2);
}
.codeblock code {
  color: var(--wc-text-1);
}


/* ---- 9b. The profile page, as Hack Forums lays it out (theme\templates\member_profile*.html) ------------------------ */

/* the cover (one picture for every member, a night pitch: theme\assets\profile-cover.svg) with the avatar on it and
   the name and title on a plate beneath the avatar */
.wc-profile-cover {
  position: relative;
  height: 236px;
  background: var(--wc-s1) url(../../../images/wccf/profile-cover.svg) center / cover no-repeat;
  border: 1px solid #000;
  border-radius: var(--wc-r2) var(--wc-r2) 0 0;
}
.wc-profile-id {
  position: absolute;
  left: 44px;
  top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wc-profile-avatar img {
  display: block;
  width: 136px;
  height: 136px;
  object-fit: cover;
  background: var(--wc-s3);
  border: 4px solid var(--wc-s1);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(228, 205, 125, 0.55), 0 8px 18px rgba(0, 0, 0, 0.5);
}
.wc-profile-plate {
  margin-top: 8px;
  min-width: 150px;
  padding: 5px 14px 6px;
  text-align: center;
  background: rgba(10, 7, 5, 0.88);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r1);
}
.wc-profile-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-profile-title {
  font-size: 13.5px;
  color: var(--wc-text-2);
}
/* the bar under the cover: the member's threads and posts, a message, a website; buddy, ignore and report on the right
   (each only when MyBB allows it for the one looking) */
.wc-profile-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 9px 14px;
  background: var(--wc-s3);
  border: 1px solid #000;
  border-top: 0;
  border-radius: 0 0 var(--wc-r2) var(--wc-r2);
}
.wc-profile-bar a.button {
  background: var(--wc-s2);
}
.wc-profile-bar a.button:hover {
  background: var(--wc-s4);
}
.wc-profile-bar-end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
/* two columns: the member's activity and details, and a side panel of figures */
.wc-profile-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}
.wc-profile-card {
  padding: 14px 16px 8px;
  background: var(--wc-s1);
  border: 1px solid #000;
  border-radius: var(--wc-r2);
}
.wc-profile-card-name {
  font-size: 20px;
  font-weight: 700;
}
.wc-profile-card-title {
  margin-bottom: 6px;
  color: var(--wc-text-2);
}
table.wc-profile-stats {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
}
table.wc-profile-stats td {
  padding: 6px 0;
  font-size: 14.5px;
  vertical-align: top;
  background: transparent;
  border: 0;
}
table.wc-profile-stats tr + tr td {
  border-top: 1px solid var(--wc-line);
}
table.wc-profile-stats td:first-child {
  padding-right: 12px;
  white-space: nowrap;
  color: var(--wc-text-2);
}
/* the latest activity (mybb\plugins\wccfprofile.php) */
.wc-activity-item {
  padding: 12px 4px;
}
.wc-activity-item + .wc-activity-item {
  border-top: 1px solid var(--wc-line-2);
}
.wc-activity-head {
  font-size: 13.5px;
  color: var(--wc-text-3);
}
a.wc-activity-title,
a.wc-activity-title:visited {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wc-text-1);
  text-decoration: none;
}
a.wc-activity-title:hover {
  color: var(--wc-amber-hi);
}
.wc-activity-text {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--wc-text-2);
}
.wc-activity-none {
  padding: 10px 4px;
  color: var(--wc-text-3);
}
/* the member's online club (mybb\plugins\wccfprofile.php): its name and record, its formation on the Squad Builder's
   board (.wc-sq-pitch, .wc-slot, .wc-bench, .wc-l: the squad builder's own section) and the CLUB CARD's figures */
.wc-club-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 4px 12px;
}
.wc-club-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-club-record {
  font-size: 14px;
  color: var(--wc-text-2);
}
.wc-club-record b {                               /* the figures bright, so L0 never reads as "LO" */
  margin-left: 1px;
  color: var(--wc-text-1);
}
.wc-club-head a.button.wc-club-open {            /* above MyBB's a.button:link margins */
  margin: 0 0 0 auto;
}
.wc-club-body {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);         /* the board with its subs' column, the figures */
  align-items: start;
  gap: 18px;
  padding: 0 4px 6px;
}
.wc-club-board .wc-slot {                        /* to look at, not to move */
  cursor: default;
  touch-action: auto;
}
.wc-club-pitch .wc-slot {                        /* a smaller pitch than the builder's: a back line has room */
  width: 11.5%;
}
.wc-club-board .wc-slot-name {
  font-size: 11px;
}
.wc-club-board .wc-bench {
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px 6px;
}
.wc-club-board .wc-bench-label {
  font-size: 14px;
}
.wc-club-note {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--wc-text-3);
}
/* the club's own links, as the kit's board draws them (wccfpanel.c board_links): each on a dark edge; gold 244,192,18 */
.wc-le {
  stroke: rgba(0, 0, 0, 0.43);
  stroke-width: 4px;
}
.wc-le.wc-le-thick {
  stroke-width: 6.5px;
}
.wc-lg {
  stroke: #F4C012;
  stroke-width: 4.5px;
}
table.wc-club-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.wc-club-table th {
  padding: 4px 4px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--wc-text-3);
  background: transparent;
  border: 0;
}
table.wc-club-table td {
  padding: 5px 4px;
  color: var(--wc-text-1);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--wc-line-2);
}
table.wc-club-table td:first-child {
  font-weight: 700;
  color: var(--wc-amber);
}
table.wc-club-table :is(th, td):nth-child(n + 4) {
  text-align: right;
}
table.wc-club-table tr.wc-club-sub td {          /* on the bench */
  color: var(--wc-text-3);
}


/* ---- 10. Messages and states --------------------------------------------------------------------------------------- */

.red_alert,
.pm_alert,
div.error {
  background: #3A1410;
  border: 1px solid var(--wc-red);
  color: #FFD9CF;
}
div.error p,
div.error p em {
  color: #FFD9CF;
}
.red_alert a:link,
.pm_alert a:link {
  color: #FFE3D9;
}
.success_message {
  color: #8FD18F;
}
.error_message {
  color: var(--wc-red-text);
}
.highlight {
  background: rgba(249, 164, 29, 0.25);
  color: var(--wc-text-1);
}
.online {
  color: #8FD18F;
}
.offline {
  color: var(--wc-text-3);
}
.reputation_positive {
  color: #8FD18F;
}
.reputation_neutral {
  color: var(--wc-text-3);
}
.reputation_negative {
  color: var(--wc-red-text);
}
.subject_new {
  font-weight: 700;
}


/* ---- 11. The footer (theme\templates\footer.html) ------------------------------------------------------------------ */

#footer .upper {
  background: var(--wc-s1);
  border-top: 1px solid var(--wc-line-2);
  border-bottom: 1px solid var(--wc-line-2);
}
#footer .upper a:link,
#footer .upper a:visited {
  color: var(--wc-text-2);
}
#footer .upper a:hover {
  color: var(--wc-amber-hi);
}
#footer .lower {
  background: var(--wc-bg-sunken);
  color: var(--wc-text-3);
}
#footer .lower a:link,
#footer .lower a:visited {
  color: var(--wc-text-2);
}
#footer .lower #current_time {
  color: var(--wc-text-3);
}
.wc-disclaimer {
  display: block;
  margin-bottom: 4px;
  color: var(--wc-text-2);
}


/* ---- 12. Keyboard focus: a clear amber ring ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wc-amber-hi);
  outline-offset: 2px;
}


/* ---- 13. Phones: the tables lose their least needed columns, posts put the member above the post ------------------ */

@media (max-width: 767px) {
  .wrapper {
    padding: 0 10px;
  }
  .wc-logo-word {
    font-size: 40px;
  }
  .wc-logo-online {
    font-size: 18px;
  }
  .wc-crest {
    width: 44px;
    height: 50px;
  }
  #logo ul.top_links {
    display: none;
  }
  #search {
    display: none;
  }
  /* the bar: smaller words, links and account on as many rows as they need (up to 3 for staff), so it scrolls away
     instead of staying stuck over a small screen; the section buttons smaller, wrapping */
  #panel {
    position: static;
  }
  .wc-bar {
    gap: 4px 14px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13.5px;
  }
  #header ul.wc-bar-links {
    gap: 4px 14px;
  }
  .wc-bar > .wc-bar-account {
    margin-left: auto;
  }
  .wc-tabs {
    gap: 8px;
    margin-top: 14px;
  }
  .wc-tabs a,
  .wc-tabs a:link,
  .wc-tabs a:visited {
    gap: 7px;
    padding: 6px 11px 6px 9px;
    font-size: 15px;
  }
  .wc-tabs img {
    width: 18px;
    height: 18px;
  }
  /* the path bar: smaller words and rows; steps that do not fit go on to the next row, each row as tall as its arrows
     (a square 27px a side reaches 19px up and down: 38px rows) */
  .navigation {
    min-height: 38px;
    font-size: 13.5px;
  }
  .navigation > a:link,
  .navigation > a:visited,
  .navigation .active {
    min-height: 38px;
    padding: 0 14px 0 22px;
  }
  .navigation > a::after {
    width: 27px;
    height: 27px;
  }
  .navigation > a:first-child {
    width: 46px;
    padding: 0;
    background-position: 13px center;
    background-size: 17px;
  }
  /* forum lists: only the picture and the forum (with its sub-forums) - the counts and the last post would squeeze the
     names to a word a line; their column headings go too (the front page's Forum heading spans two columns, a
     section table's has a blank cell before it); a smaller picture and tighter cells */
  tr:has(> td > .forum_status) > td:nth-child(n+3),
  tbody[id^="cat_"] > tr:first-child > td:nth-child(n+2),
  tr:has(+ tr > td > .forum_status) > td.tcat:nth-child(n+3) {
    display: none;
  }
  tr:has(> td > .forum_status) > td {
    padding: 12px 6px;
  }
  tr:has(> td > .forum_status) .forum_status {
    width: 28px;
    height: 28px;
  }
  tr:has(> td > .forum_status) .forum_status::after {
    font-size: 19px;
    line-height: 26px;
  }
  tr:has(> td > .forum_status) > td:nth-child(2) > strong > a,
  tr:has(> td > .forum_status) > td:nth-child(2) > strong > a:visited {
    font-size: 16.5px;
  }
  tr:has(> td > .forum_status) .smalltext {
    font-size: 13px;
  }
  ul.wc-subforums {
    grid-template-columns: minmax(0, 1fr);
  }
  /* thread lists (a forum's, a search's): the status picture, the thread with its starter, the replies (and a
     moderator's tick box) - a search's forum column, the views and the last post go, as the forum lists drop their
     counts. The post icon's cell stays (mostly empty): the "Thread / Author" heading spans it, and a row without it
     ends a column short. Cells are found by what they hold (as above), headings by their sort links */
  tr.inline_row > td:has(> a[href*="action=whoposted"]) + td,
  tr.inline_row > td:has(a[href*="action=lastpost"]),
  tr.inline_row > td:has(> a[href*="forumdisplay.php"]),
  td.tcat:has(a[href*="sortby=views"]),
  td.tcat:has(a[href*="sortby=lastpost"]),
  td.tcat:has(a[href*="sortby=forum"]) {
    display: none;
  }
  tr.inline_row > td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* the profile: the avatar centred on a shorter cover, one column with the figures first */
  .wc-profile-cover {
    height: 196px;
  }
  .wc-profile-id {
    left: 50%;
    transform: translateX(-50%);
  }
  .wc-profile-avatar img {
    width: 104px;
    height: 104px;
  }
  .wc-profile-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .wc-profile-side {
    order: -1;
  }
  /* the online club: the board above the figures, the bench's name above its cards */
  .wc-club-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .wc-club-board .wc-bench {
    flex-wrap: wrap;
  }
  .wc-club-board .wc-bench-label {
    flex-basis: 100%;
  }
  /* posts: the member above the post in a short row - the avatar beside the name and title, the figures left out; the
     thread's heading bar puts its threaded-mode switch above the title instead of beside it */
  .post.classic .post_author,
  .post.classic .post_content {
    flex: 0 0 100%;
  }
  .post.classic .post_author {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
    padding: 10px 12px;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid #000;
  }
  .post.classic .post_author div.author_avatar {
    margin: 0;
  }
  .post.classic .post_author div.author_avatar img {
    width: 56px;
    height: auto;
  }
  .post.classic .post_author div.author_information {
    text-align: left;
  }
  .post.classic .post_author div.author_statistics {
    display: none;
  }
  table:has(> tbody > tr > td#posts_container) > tbody > tr > td.thead > .float_right {
    float: none;
    text-align: right;
  }
}


/* ---- 14. Reduced motion ----------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wc-ticker-track {
    animation: none;
  }
}


/* ---- 15. The card database and the squad builder (plugins\wccfcards.php; drawn by theme\assets\cards\cards.js) - */

/* shared: the page's head, the tool bar, rarity and affinity colours, the pictures */
.wc-cards [hidden] {
  display: none !important;
}
.wc-cards {
  margin: 2px 0 26px;
  color: var(--wc-text-1);
}
.wc-cards-wait,
.wc-muted,
.wc-empty {
  color: var(--wc-text-3);
}
.wc-empty {
  padding: 28px 0;
  text-align: center;
}
.wc-page-head {
  margin: 6px 0 16px;
}
.wc-page-head h1 {
  margin: 0;
  font-family: var(--wc-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wc-page-head p {
  margin: 6px 0 0;
  max-width: 760px;
  line-height: 1.5;
  color: var(--wc-text-2);
}
.wc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px;
  background: var(--wc-s1);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
}
.wc-toolbar select,
.wc-chooser-bar select {
  height: 38px;
}
.wc-search {
  flex: 1 1 240px;
  min-width: 0;
  height: 38px;
  padding-left: 38px !important;
  background: var(--wc-bg-sunken) url(../../../images/wccf/icons/magnifier.svg) no-repeat 11px center / 18px 18px !important;
}
.wc-found {
  margin-left: auto;
  font-weight: 700;
  color: var(--wc-text-2);
}
/* the database's rows under the search: the choosers, then the sort and the view (2026-10-15) */
.wc-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.wc-toolbar-row select {
  flex: 1 1 150px;
  min-width: 0;
}
.wc-sort-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-text-3);
}
.wc-sorts {
  flex-wrap: wrap;
}
/* the stat ranges, as the game's CATALOGUE: two handles on one track per stat */
.wc-ranges {
  width: 100%;
}
.wc-ranges summary {
  font-weight: 700;
  color: var(--wc-text-2);
  cursor: pointer;
}
.wc-range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: center;
  gap: 10px 24px;
  margin-top: 10px;
}
.wc-range {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 56px;            /* "95-100" on one line */
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.wc-range-name {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wc-text-2);
}
.wc-range-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--wc-amber-hi);
}
.wc-range-track {
  position: relative;
  height: 22px;
}
.wc-range-track::before {
  position: absolute;
  top: 9px;
  right: 0;
  left: 0;
  height: 4px;
  content: "";
  background: var(--wc-s3);
  border-radius: 2px;
}
.wc-range-fill {
  position: absolute;
  top: 9px;
  height: 4px;
  background: linear-gradient(90deg, var(--wc-ember), var(--wc-amber-hi));
  border-radius: 2px;
}
.wc-range-track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.wc-range-track input[type="range"]::-webkit-slider-runnable-track {
  height: 22px;
  background: none;
}
.wc-range-track input[type="range"]::-moz-range-track {
  background: none;
}
.wc-range-track input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  pointer-events: auto;
  cursor: pointer;
  background: var(--wc-amber-hi);
  border: 2px solid #1A1410;
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
}
.wc-range-track input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  pointer-events: auto;
  cursor: pointer;
  background: var(--wc-amber-hi);
  border: 2px solid #1A1410;
  border-radius: 50%;
}
.wc-range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--wc-text-1);
}
.wc-range-reset {
  justify-self: start;
}
.wc-pills {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--wc-line-ctrl);
  border-radius: 999px;
}
.wc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  font: 700 13px/1 var(--wc-body);
  letter-spacing: 0.04em;
  color: var(--wc-text-2);
  background: var(--wc-s2);
  border: 0;
  border-left: 1px solid var(--wc-line-2);
  cursor: pointer;
}
.wc-pill:first-child {
  border-left: 0;
}
.wc-pill:hover {
  color: var(--wc-text-1);
  background: var(--wc-s3);
}
.wc-pill[aria-pressed="true"] {
  color: var(--wc-on-accent);
  background: var(--wc-amber);
}
/* the rarity buttons carry the card frame's colour as a dot */
.wc-pill[class*="wc-pill-r"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wc-rc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.wc-pill-r1,
.wc-r1 {
  --wc-rc: #F2F1EC;
}
.wc-pill-r2,
.wc-r2 {
  --wc-rc: #2B2B2B;
}
.wc-pill-r3,
.wc-r3 {
  --wc-rc: #C9CCD1;
}
.wc-pill-r4,
.wc-pill-r5,
.wc-r4,
.wc-r5 {
  --wc-rc: var(--wc-gold);
}
.wc-more {
  display: block;
  margin: 18px auto 0;
}
.wc-rar {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  border-radius: 3px;
}
.wc-rar-1 {
  color: #1A1612;
  background: #F2F1EC;
}
.wc-rar-2 {
  color: #F2F1EC;
  background: #000;
  box-shadow: inset 0 0 0 1px var(--wc-line-ctrl);
}
.wc-rar-3 {
  color: #1A1612;
  background: #C9CCD1;
}
.wc-rar-4,
.wc-rar-5 {
  color: var(--wc-on-accent);
  background: var(--wc-gold);
}
/* affinity 1-5: gold, white, then fading down to the red of a pair that links slowest */
.wc-g {
  display: inline-block;
  min-width: 1.7em;
  margin: 2px 5px 2px 0;
  padding: 1px 6px;
  font-weight: 700;
  text-align: center;
  border-radius: 3px;
}
.wc-g5 {
  color: var(--wc-on-accent);
  background: var(--wc-gold);
}
.wc-g4 {
  color: #1A1612;
  background: #F2F1EC;
}
.wc-g3 {
  color: var(--wc-text-1);
  background: var(--wc-s4);
}
.wc-g2 {
  color: var(--wc-text-2);
  background: var(--wc-s3);
}
.wc-g1 {
  color: #FFF;
  background: var(--wc-red);
}
.wc-pic {
  display: block;
  flex: none;
  background: #000;
  border-radius: 3px;
}
/* a face cut round out of the flattened head picture: its middle 64 per cent, a little above centre */
.wc-face {
  display: inline-block;
  flex: none;
  overflow: hidden;
  vertical-align: middle;
  background: #000;
  border-radius: 50%;
}
.wc-face img {
  display: block;
  width: 156.25%;
  max-width: none;
  height: 156.25%;
  margin: -31.25% 0 0 -28.1%;
}

/* the database: a binder of cards */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 14px;
}
.wc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px 10px;
  font: inherit;
  color: inherit;
  text-align: center;
  background: linear-gradient(180deg, var(--wc-s2), var(--wc-s1));
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.wc-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wc-rc);
  border-radius: var(--wc-r2) var(--wc-r2) 0 0;
}
.wc-tile:hover,
.wc-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wc-amber);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
.wc-tile .wc-pic {
  width: 90px;
  height: 128px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.65);
}
.wc-r5 .wc-pic {
  box-shadow: 0 0 0 1px var(--wc-gold), 0 0 18px rgba(228, 205, 125, 0.45);
}
.wc-tile-name {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--wc-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.wc-tile-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
  font-size: 12px;
  color: var(--wc-text-3);
}
.wc-tile-meta b {
  font-size: 13px;
  color: var(--wc-amber-hi);
}

/* the database as a list: the game's roster band over dark rows, scrolling sideways in its own box on a phone */
.wc-cards-scroll {
  overflow-x: auto;
  border: 1px solid #000;
  border-radius: var(--wc-r2);
}
.wc-db {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.wc-db th {
  padding: 0;
  background: var(--wc-roster);
  border-bottom: 3px solid var(--wc-rim-top);
}
.wc-db th button {
  width: 100%;
  padding: 8px;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--wc-on-roster);
  background: none;
  border: 0;
  cursor: pointer;
}
.wc-db th[aria-sort="ascending"] button::after {
  content: " \25B2";
}
.wc-db th[aria-sort="descending"] button::after {
  content: " \25BC";
}
.wc-db td {
  padding: 6px 8px;
  white-space: nowrap;
}
.wc-db td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wc-db-row {
  cursor: pointer;
}
.wc-db-row:hover td {
  background: var(--wc-s3);
}
.wc-db-row:focus-visible {
  outline: 2px solid var(--wc-amber-hi);
  outline-offset: -2px;
}
.wc-who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wc-db-full {
  display: block;
  font-size: 12.5px;
  color: var(--wc-text-3);
}
.wc-db-total {
  font-weight: 700;
  color: var(--wc-amber-hi);
}

/* a card's sheet: a window over the page */
/* (it opens over the page's body, which MyBB's own stylesheet centres: so its text is set back to the left) */
.wc-sheet {
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  text-align: left;
  color: var(--wc-text-1);
  background: var(--wc-s1);
  border: 1px solid var(--wc-line-ctrl);
  border-radius: var(--wc-r2);
  box-shadow: var(--wc-pop);
}
.wc-sheet::backdrop {
  background: rgba(5, 3, 2, 0.78);
}
.wc-sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
  background:
    repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, var(--wc-titlebar), var(--wc-titlebar-hi) 50%, var(--wc-titlebar));
  border-bottom: 2px solid var(--wc-rule);
}
.wc-sheet-head h2 {
  margin: 0;
  font-family: var(--wc-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wc-on-titlebar);
}
.wc-sheet-close,
.wc-x {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--wc-text-1);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
}
.wc-sheet-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
}
/* a sheet with Positions: three columns on a wide screen - the card, his stats and links, where he plays - so it
   needs no scrolling (Ali, 2026-10-15); between a phone and a wide screen, Positions goes under the stats */
.wc-sheet.wc-sheet-wide {
  width: min(1180px, calc(100vw - 24px));
}
.wc-sheet-3 {
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.1fr);
}
.wc-sheet-pos h3:first-child {
  margin-top: 0;
}
@media (min-width: 768px) and (max-width: 1099px) {
  .wc-sheet-3 {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .wc-sheet-3 .wc-sheet-pos {
    grid-column: 2;
  }
}
.wc-sheet-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wc-sheet-card .wc-pic {
  width: 180px;
  height: 256px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
}
.wc-go {
  text-align: center;
}
.wc-sheet-id {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.wc-sheet-id .wc-face {
  box-shadow: 0 0 0 3px var(--wc-gold), 0 6px 16px rgba(0, 0, 0, 0.55);
}
.wc-sheet-short {
  font-family: var(--wc-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}
.wc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}
.wc-chip {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--wc-s3);
  border-radius: 3px;
}
.wc-sheet-club {
  font-size: 14px;
  color: var(--wc-text-2);
}
.wc-stats {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}
.wc-stat {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.wc-stat > span:first-child {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wc-text-2);
}
.wc-statbar {
  height: 9px;
  overflow: hidden;
  background: var(--wc-s3);
  border-radius: 5px;
}
.wc-statbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--wc-ember), var(--wc-amber-hi));
  border-radius: 5px;
}
.wc-stat b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wc-stat-total {
  padding-top: 8px;
  border-top: 1px solid var(--wc-line-2);
}
.wc-stat-total b {
  font-size: 18px;
  color: var(--wc-amber-hi);
}
.wc-sheet-facts {
  margin: 0 0 8px;
  color: var(--wc-text-2);
}
.wc-sheet-skill {
  margin: 0;
}
.wc-sheet-skill span {
  margin-right: 8px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-on-accent);
  background: var(--wc-amber);
  border-radius: 3px;
}
.wc-sheet h3 {
  margin: 20px 0 10px;
  font-family: var(--wc-display);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wc-text-2);
}
.wc-sheet-letter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  line-height: 1.45;
}
.wc-letter {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: var(--wc-display);
  font-size: 22px;
  color: var(--wc-on-accent);
  background: var(--wc-amber);
  border-radius: 50%;
}
.wc-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wc-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
}
.wc-pair b {
  min-width: 12px;
  text-align: center;
}
.wc-pairs-more {
  padding: 6px 12px;
  font-family: inherit;
  color: var(--wc-text-1);
  cursor: pointer;
  background: var(--wc-s3);
  border: 1px solid var(--wc-line-ctrl);
}
.wc-pairs-more:hover {
  background: var(--wc-s2);
}

/* the squad builder: the pitch and the bench beside the chooser and the links */
.wc-sq {
  display: grid;
  grid-template-columns: minmax(0, 586px) minmax(0, 1fr);      /* the 500 px pitch and its subs' column */
  grid-template-rows: auto 1fr;                   /* the key right under the board, however long the chooser */
  grid-template-areas: "board side" "key side";
  align-items: start;
  gap: 22px;
}
.wc-sq-board {
  grid-area: board;
}
.wc-sq > .wc-legend {
  grid-area: key;
  margin-top: 0;
}
.wc-sq-side {
  grid-area: side;
}
/* a wide screen: the key in the page's empty margin, left of the pitch (Ali, 2026-10-16); the board and the chooser
   stay where they were */
@media (min-width: 1800px) {
  .wc-sq {
    grid-template-columns: 320px minmax(0, 586px) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "key board side";
    margin-left: -342px;
  }
}
/* the kit's FORMATION board picture (cards.js pitchPicture: pitch.webp) */
.wc-sq-pitch {
  position: relative;
  aspect-ratio: 68 / 100;
  overflow: hidden;
  background: #1E6B57 center / 100% 100% no-repeat;
  border: 1px solid #000;
  border-radius: var(--wc-r2);
}
.wc-sq-pitch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* the game's own link lines (thin white 255,255,211 at alpha 150; thick 255,255,216 at alpha 230), drawn thinner */
.wc-l {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.15s;
}
.wc-l4 {
  stroke: rgba(255, 255, 211, 0.59);
  stroke-width: 2px;
}
.wc-l5 {
  stroke: rgba(255, 255, 216, 0.9);
  stroke-width: 4.5px;
}
.wc-hl .wc-l {
  opacity: 0.1;
}
.wc-hl .wc-l.on {
  opacity: 1;
}
/* a place: the card itself with its name under it, or an empty frame; on the pitch it stands where it is put */
.wc-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 13%;
  padding: 0;
  font: inherit;
  color: var(--wc-text-1);
  background: none;
  border: 0;
  transform: translate(-50%, -40%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.wc-slot .wc-pic {
  width: 100%;
  height: auto;
  aspect-ratio: 90 / 128;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}
.wc-slot-name {
  max-width: 160%;
  padding: 1px 6px;
  overflow: hidden;
  font-family: var(--wc-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FFF;
  background: rgba(10, 7, 5, 0.88);
  border-radius: 3px;
}
.wc-slot.empty {
  justify-content: center;
  aspect-ratio: 90 / 128;
  background: rgba(0, 0, 0, 0.25);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: auto;
}
.wc-slot.empty:hover {
  border-color: var(--wc-amber-hi);
}
.wc-slot-role {
  font-family: var(--wc-display);
  font-size: 15px;
  color: var(--wc-amber-hi);
}
.wc-slot-plus {
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
}
.wc-slot.on .wc-pic,
.wc-slot.on.empty {
  outline: 3px solid var(--wc-amber);
  outline-offset: 2px;
}
.wc-slot.lit .wc-pic {
  outline: 3px solid #FFF;
  outline-offset: 2px;
}
.wc-slot.dragging {
  z-index: 5;
  cursor: grabbing;
}
.wc-slot.dragging .wc-pic {
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.75);
}
.wc-slot.wc-drop .wc-pic,
.wc-slot.wc-drop.empty {
  outline: 3px dashed var(--wc-amber-hi);
  outline-offset: 3px;
}
/* while a card is pointed at, every other card shows its affinity with him in this corner */
.wc-aff {
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
.wc-bench {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px 10px;
  background: var(--wc-s1);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
}
.wc-bench-label {
  font-family: var(--wc-display);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-text-2);
}
.wc-bench-places {
  display: flex;
  flex: 1;
  justify-content: space-around;
  gap: 8px;
}
.wc-bench .wc-slot {
  position: relative;
  width: 17%;
  transform: none;
}
/* the subs in a column on the pitch's right, as the kit's FORMATION board has them (Ali, 2026-10-16) - the squad
   builder's and a profile's club; on a phone they stay in a row under the pitch */
@media (min-width: 768px) {
  .wc-sq-board,
  .wc-club-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    align-items: start;
    gap: 10px;
  }
  .wc-club-board {
    grid-template-columns: minmax(0, 1fr) 54px;
  }
  .wc-sq-board .wc-bench,
  .wc-club-board .wc-bench {
    flex-direction: column;
    align-items: stretch;                        /* the cards as wide as the column: about a pitch card's size */
    gap: 8px;
    margin-top: 0;
    padding: 8px 5px;
  }
  .wc-sq-board .wc-bench-places,
  .wc-club-board .wc-bench-places {
    flex-direction: column;
    gap: 10px;
  }
  .wc-sq-board .wc-bench .wc-slot,
  .wc-club-board .wc-bench .wc-slot {
    width: 100%;
  }
  .wc-sq-board .wc-bench-label,
  .wc-club-board .wc-bench-label {
    font-size: 14px;
    text-align: center;
  }
  .wc-bench .wc-slot-name {                      /* a long name stays in the column */
    max-width: 100%;
  }
  .wc-club-note {
    grid-column: 1 / -1;
  }
}
.wc-legend {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wc-text-2);
}
.wc-legend p {
  margin: 0 0 6px;
}
.wc-key {
  display: inline-block;
  width: 28px;
  margin-right: 8px;
  vertical-align: middle;
  border-top: 2px solid rgba(255, 255, 211, 0.59);
}
.wc-key5 {
  border-top: 4px solid rgba(255, 255, 216, 0.9);
}
/* the game's gold line, 244,192,18 */
.wc-key-gold {
  border-top: 4px solid #F4C012;
}
.wc-how summary,
.wc-links summary {
  cursor: pointer;
  color: var(--wc-amber-hi);
}
.wc-panel {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--wc-s1);
  border: 1px solid var(--wc-line-2);
  border-radius: var(--wc-r2);
}
.wc-panel h3 {
  margin: 0 0 12px;
  font-family: var(--wc-display);
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wc-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--wc-s2);
  border-radius: var(--wc-r1);
}
.wc-current-who {
  flex: 1;
  min-width: 140px;
}
.wc-current-who small,
.wc-cand-who small {
  display: block;
  color: var(--wc-text-3);
}
.wc-current-do {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wc-chooser-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
/* the chooser's second row (2026-10-16): Type, Edition, Country, Club, Role - as the card database's */
.wc-chooser-more select {
  flex: 1 1 140px;
  min-width: 0;
}
.wc-chooser .wc-ranges {
  margin-bottom: 10px;
}
.wc-cand-count {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--wc-text-3);
}
.wc-cand-list,
.wc-sq-pairs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-cand-list {
  max-height: 460px;
  overflow-y: auto;
  border-top: 1px solid var(--wc-line-2);
}
.wc-cand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 6px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--wc-line);
  cursor: pointer;
}
.wc-cand:hover,
.wc-cand:focus-visible {
  background: var(--wc-s3);
}
.wc-cand-who {
  flex: 1;
  min-width: 0;
}
.wc-cand-fit {
  white-space: nowrap;
}
.wc-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.wc-team-score b {
  display: block;
  font-family: var(--wc-display);
  font-size: 46px;
  line-height: 1;
  color: var(--wc-amber-hi);
}
.wc-team-score span {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wc-text-3);
}
.wc-sq-pairs li {
  padding: 5px 0;
  border-bottom: 1px solid var(--wc-line);
}
.wc-why {
  margin-left: 6px;
  font-size: 13px;
  color: var(--wc-text-3);
}
.wc-links details {
  margin-top: 10px;
}
/* where a player plays (2026-10-15): his role ratings light the pitch zone by zone - under the card pointed at in the
   squad builder, and on his card's sheet - and a tag gives his rating for the spot each starter stands in */
.wc-heat {
  filter: blur(3px);                               /* the zones' tiles melt into one glow */
}
.wc-sq-pitch .wc-heat {
  pointer-events: none;
}
.wc-key-heat {
  display: inline-block;
  width: 28px;
  height: 12px;
  margin-right: 8px;
  vertical-align: middle;
  background: linear-gradient(90deg, #FFE08A, #FF8A2A 60%, #FF5E1A);
  border-radius: 2px;
}
/* "CB 10": the role in white on a dark tag, the rating green (8+), yellow (6-7) or red (below) */
.wc-spotfit {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #F6F0E8;
  background: rgba(12, 9, 7, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}
.wc-spotfit b {
  font-weight: 800;
}
.wc-spotfit .good {
  color: #7EE07A;
}
.wc-spotfit .fair {
  color: #FFD23C;
}
.wc-spotfit .poor {
  color: #FF6B55;
}
.wc-slot .wc-spotfit {
  position: absolute;
  top: -9px;
  left: -9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
.wc-cand-fit .wc-spotfit {
  margin-right: 6px;
}
.wc-posbox {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 8px;
}
.wc-mini {
  position: relative;
  aspect-ratio: 68 / 100;
  overflow: hidden;
  background: #1E6B57 center / 100% 100% no-repeat;
  border: 1px solid #000;
  border-radius: var(--wc-r1);
}
.wc-mini svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wc-mini-line {
  position: absolute;
  right: 5px;
  left: 5px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px #000;
  transform: translateY(-50%);
  pointer-events: none;
}
.wc-mini-line b {
  letter-spacing: 0.06em;
}
.wc-roles {
  display: grid;
  gap: 8px;
}
.wc-role-line h4 {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-text-3);
}
.wc-role {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 70px 18px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wc-text-2);
}
.wc-role.good {
  color: var(--wc-text-1);
}
.wc-role-ab {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.wc-role-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-rolebar {
  height: 7px;
  overflow: hidden;
  background: var(--wc-s3);
  border-radius: 4px;
}
.wc-rolebar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--wc-ember), var(--wc-amber-hi));
  border-radius: 4px;
}
.wc-role b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wc-role.good b {
  color: var(--wc-amber-hi);
}
.wc-sheet-feet {
  margin: 0 0 8px;
  color: var(--wc-text-2);
}
.wc-role-help {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 13px;
}
.wc-role-help dt {
  font-weight: 700;
  color: var(--wc-text-1);
}
.wc-role-help dd {
  margin: 0;
  color: var(--wc-text-2);
}

@media (max-width: 767px) {
  .wc-page-head h1 {
    font-size: 30px;
  }
  .wc-pills {                                     /* the rarity and sort buttons ran off a phone's screen */
    flex-wrap: wrap;
    border-radius: var(--wc-r2);
  }
  .wc-posbox {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
  }
  .wc-role {
    grid-template-columns: 30px minmax(0, 1fr) 44px 16px;
    gap: 6px;
  }
  .wc-role-help {
    grid-template-columns: minmax(0, 1fr);
  }
  .wc-role-help dd {
    margin-bottom: 6px;
  }
  .wc-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  .wc-tile .wc-pic {
    width: 76px;
    height: 108px;
  }
  .wc-sheet-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .wc-sheet-card .wc-pic {
    width: 135px;
    height: 192px;
  }
  .wc-sq {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "board" "key" "side";
  }
  .wc-slot-name {
    font-size: 11px;
  }
  .wc-found {
    margin-left: 0;
  }
}

/* ---- generated by apply.php from setup/board.json: each forum's colour, on its lead square and its dot ---- */
#mark_read_4 { --wc-tag: #E96913; }
#mark_read_5 { --wc-tag: #E96913; }
#mark_read_6 { --wc-tag: #61A961; }
#mark_read_7 { --wc-tag: #D5B45C; }
#mark_read_8 { --wc-tag: #70CFC3; }
#mark_read_9 { --wc-tag: #D5B45C; }
#mark_read_10 { --wc-tag: #F07052; }
#mark_read_11 { --wc-tag: #B7AA89; }
#mark_read_12 { --wc-tag: #B7AA89; }
#mark_read_13 { --wc-tag: #D08A4E; }
/* ---- generated by apply.php from setup/board.json: each forum's picture, in place of its lead square ---- */
.forum_status#mark_read_4 { background: url(../../../images/wccf/icons/rocket.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_4.forum_on::after, .forum_status#mark_read_4.forum_off::after { content: none; }
.forum_status#mark_read_5 { background: url(../../../images/wccf/icons/megaphone.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_5.forum_on::after, .forum_status#mark_read_5.forum_off::after { content: none; }
.forum_status#mark_read_6 { background: url(../../../images/wccf/icons/hammer-and-wrench.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_6.forum_on::after, .forum_status#mark_read_6.forum_off::after { content: none; }
.forum_status#mark_read_7 { background: url(../../../images/wccf/icons/soccer-ball.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_7.forum_on::after, .forum_status#mark_read_7.forum_off::after { content: none; }
.forum_status#mark_read_8 { background: url(../../../images/wccf/icons/speech-balloon.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_8.forum_on::after, .forum_status#mark_read_8.forum_off::after { content: none; }
.forum_status#mark_read_9 { background: url(../../../images/wccf/icons/joker.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_9.forum_on::after, .forum_status#mark_read_9.forum_off::after { content: none; }
.forum_status#mark_read_10 { background: url(../../../images/wccf/icons/clipboard.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_10.forum_on::after, .forum_status#mark_read_10.forum_off::after { content: none; }
.forum_status#mark_read_11 { background: url(../../../images/wccf/icons/house.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_11.forum_on::after, .forum_status#mark_read_11.forum_off::after { content: none; }
.forum_status#mark_read_12 { background: url(../../../images/wccf/icons/ring-buoy.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_12.forum_on::after, .forum_status#mark_read_12.forum_off::after { content: none; }
.forum_status#mark_read_13 { background: url(../../../images/wccf/icons/joystick.svg) center / contain no-repeat; box-shadow: none; }
.forum_status#mark_read_13.forum_on::after, .forum_status#mark_read_13.forum_off::after { content: none; }