/* ==========================================================================
   Vanguard — theme styles

   The MYKD template's own main.css does the heavy lifting: the header, the
   angled plates, the drawn button outlines, the carousels and the section
   titles are all its components, used with their original markup. This file
   only adds what the template had no equivalent for — the rate chips, the
   rank badge on a player card, the siege cycle list, the server and language
   pickers, and the flash messages the controllers set.

   Everything reads from the template's own tokens, so the colour options in
   the admin panel drive these additions too.
   ========================================================================== */

/* ---------- header additions ---------- */

.vanguard-pick { position: relative; }

.vanguard-pick > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--tg-border-1, rgba(255,255,255,.14));
    border-radius: 3px;
    color: var(--tg-body-color, #a9b0bd);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.vanguard-pick > button:hover {
    border-color: var(--tg-theme-primary, #45f882);
    color: var(--tg-heading-color, #fff);
}

.vanguard-pick__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 180px;
    padding: 5px;
    background: var(--tg-common-color-black-3, #0b0e13);
    border: 1px solid var(--tg-border-1, rgba(255,255,255,.14));
    box-shadow: 0 16px 38px rgba(0,0,0,.55);
}

.vanguard-pick__menu.is-open { display: block; }

.vanguard-pick__menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    color: var(--tg-body-color, #a9b0bd);
    font-size: .8rem;
}

/* Language picker rows: flag, the language in its own words, and a mark on
   the one you are already reading — which is the single most useful thing
   a language menu can say. */
.vanguard-pick > button .lang-flag { font-size: 1rem; line-height: 1; }
.vanguard-pick__menu .lang-flag { width: 20px; flex: 0 0 20px; text-align: center; font-size: .95rem; }
.vanguard-pick__menu .lang-name { flex: 1 1 auto; white-space: nowrap; }
.vanguard-pick__menu .lang-tick { font-size: .68rem; flex: 0 0 auto; }
.vanguard-pick__menu a.is-on {
    color: var(--tg-theme-primary, #45f882);
    font-weight: 600;
}

.vanguard-pick__menu a:hover { background: rgba(255,255,255,.05); color: var(--tg-heading-color, #fff); }

/* ---------- flash messages ---------- */

/* A stack in the corner, clear of the page's own composition. */
.vanguard-flashes {
    position: fixed;
    top: 96px;
    right: 22px;
    z-index: 200;
    display: grid;
    gap: 9px;
    width: min(380px, calc(100vw - 32px));
}

.vanguard-flash {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    background: color-mix(in srgb, var(--tg-common-color-black) 96%, #000);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 12%, transparent);
    border-left: 3px solid var(--tg-theme-primary);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
    color: var(--tg-heading-color);
    font-size: .86rem;
    line-height: 1.45;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .3s ease, transform .3s ease;
}

.vanguard-flash.is-going { opacity: 0; transform: translateX(14px); }

.vanguard-flash > i { margin-top: 2px; color: var(--tg-theme-primary); }
.vanguard-flash > span { flex: 1 1 auto; min-width: 0; }

.vanguard-flash__x {
    flex: 0 0 auto;
    padding: 0 2px;
    background: none;
    border: 0;
    color: var(--tg-body-color);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.vanguard-flash__x:hover { color: var(--tg-heading-color); }

.vanguard-flash.is-bad { border-left-color: #ef4444; }
.vanguard-flash.is-bad > i { color: #ef4444; }
.vanguard-flash.is-info { border-left-color: var(--tg-theme-secondary); }
.vanguard-flash.is-info > i { color: var(--tg-theme-secondary); }

@media (prefers-reduced-motion: reduce) {
    .vanguard-flash { transition: none; }
}

@media (max-width: 767.98px) {
    .vanguard-flashes { top: 78px; right: 12px; left: 12px; width: auto; }
}

/* ---------- account menu ---------- */

.vanguard-account > button { max-width: 210px; }
.vanguard-account > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vanguard-account .vanguard-pick__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vanguard-account .vanguard-pick__menu a i { width: 14px; text-align: center; }
.vanguard-account .vanguard-pick__menu a.is-admin { color: var(--tg-theme-secondary); }
.vanguard-account .vanguard-pick__menu a.is-out {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
}

/* ---------- banner: the rate chips ---------- */

.vanguard-rates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 34px;
    padding: 0;
}

.vanguard-rates li {
    min-width: 108px;
    padding: 12px 20px;
    background: rgba(0,0,0,.42);
    border: 1px solid var(--tg-border-1, rgba(255,255,255,.14));
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    text-align: center;
}

.vanguard-rates b {
    display: block;
    color: var(--tg-theme-primary, #45f882);
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.vanguard-rates em {
    color: var(--tg-body-color, #a9b0bd);
    font-size: .64rem;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------- player cards: rank, class, figures ---------- */

.streamers__thumb { position: relative; }

.streamers__thumb img {
    width: 100%;
    /* Class art is 680x400 landscape; the template's slot is a portrait.
       Cropping just above centre keeps the figure, not the sky. */
    height: 210px;
    object-fit: cover;
    object-position: center 32%;
}

.vanguard-rank {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 3px 10px;
    background: var(--tg-theme-primary, #45f882);
    color: var(--tg-common-color-black, #0b0e13);
    font-size: .74rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.vanguard-cls {
    display: block;
    margin-top: 2px;
    color: var(--tg-theme-secondary, #ffbe18);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vanguard-figs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tg-border-1, rgba(255,255,255,.12));
}

.vanguard-figs b {
    color: var(--tg-heading-color, #fff);
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vanguard-figs em {
    display: block;
    color: var(--tg-body-color, #a9b0bd);
    font-size: .58rem;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- weekly siege cycle ---------- */

.vanguard-cycle { display: grid; gap: 8px; }

.vanguard-cycle__row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 15px 22px;
    background: rgba(0,0,0,.45);
    border: 1px solid var(--tg-border-1, rgba(255,255,255,.12));
    border-left: 3px solid transparent;
}

.vanguard-cycle__row.is-done { opacity: .55; }

.vanguard-cycle__row.is-now {
    border-left-color: var(--tg-theme-primary, #45f882);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--tg-theme-primary, #45f882) 14%, transparent),
        rgba(0,0,0,.45) 42%);
}

.vanguard-cycle__step {
    color: var(--tg-body-color, #a9b0bd);
    font-size: .8rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.vanguard-cycle__label {
    color: var(--tg-heading-color, #fff);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vanguard-cycle__time {
    color: var(--tg-body-color, #a9b0bd);
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vanguard-cycle__now {
    padding: 3px 11px;
    background: var(--tg-theme-primary, #45f882);
    color: var(--tg-common-color-black, #0b0e13);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---------- castle plates ---------- */

/* Guild emblems are 8px pixel art; the template's slot expects a photo. */
.match__winner-wrap .team-logo-img img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* The plate behind the label is sized for the template's short word at the
   template's tracking; a translated label runs past its left edge and ends up
   behind the emblem. Widen the plate and set the label inside it. */
.vanguard .match__winner-img .svg-icon { width: 200px; }

.vanguard .match__winner-place {
    font-size: 22px;
    letter-spacing: 1px;
    padding: 12px 46px 12px 26px;
}

/* ---------- responsive ---------- */

@media (max-width: 767.98px) {
    .vanguard-cycle__row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; padding: 13px 16px; }
    .vanguard-cycle__time, .vanguard-cycle__now { grid-column: 2; justify-self: start; }
    .vanguard-rates li { min-width: 92px; padding: 10px 14px; }
    .streamers__thumb img { height: 180px; }
}

/* ==========================================================================
   Header fit

   The template's demo menu had six items; this site has eight real sections,
   plus a server and a language control. At the template's tracking that
   overflows the bar and the flex row wraps, dropping the logo out of line —
   so the menu is told not to wrap and given room to shrink instead.
   ========================================================================== */

.tgmenu__nav { flex-wrap: nowrap; gap: 18px; }

.tgmenu__navbar-wrap.tgmenu__main-menu { flex: 1 1 auto; min-width: 0; justify-content: center; }

.tgmenu__nav .logo,
.tgmenu__nav .tgmenu__action { flex: 0 0 auto; }

.tgmenu__navbar-wrap .navigation { flex-wrap: nowrap; }
.tgmenu__navbar-wrap .navigation > li { white-space: nowrap; }

.tgmenu__navbar-wrap .navigation > li > a {
    padding: 0 clamp(7px, .8vw, 16px);
    font-size: clamp(.68rem, .78vw, .86rem);
    letter-spacing: .04em;
}

/* The action list holds the two pickers and the sign-in plate; keep them on
   one line and vertically centred against the menu. */
.tgmenu__action > .list-wrap { display: flex; align-items: center; gap: 8px; margin: 0; }
.tgmenu__action > .list-wrap > li { margin: 0; }

@media (max-width: 1399.98px) {
    .vanguard-pick > button { padding: 5px 9px; font-size: .68rem; }
}

/* ==========================================================================
   Player card artwork

   Class artwork is a wide scene, not a portrait. Cropping to fill the card
   keeps the figure in frame instead of letterboxing it into a strip.
   ========================================================================== */



/* ==========================================================================
   Reveal animations must never hide content

   WOW.js hides every .wow element inline until it scrolls into view. If its
   observer does not fire — a short page, a prerender, a browser that skips
   the scroll event — the content is simply never shown. Content on a CMS
   cannot depend on that, so the elements stay visible and the animation is
   additive: WOW still adds its class and the keyframes still play.
   ========================================================================== */

.wow {
    visibility: visible !important;
    /* WOW parks an element on the animation's first keyframe — for the
       slide-ins that is opacity 0, three thousand pixels off-screen — and
       only releases it when the scroll handler fires. `forwards` drops that
       waiting state, so an element that is never triggered simply stays where
       it belongs instead of vanishing. */
    animation-fill-mode: forwards !important;
}

/* ==========================================================================
   Display font must never blank the headline

   The template declares its display face with no font-display, so Chrome
   applies a block period and paints nothing at all until the font arrives —
   on a slow connection the banner headline is simply missing for seconds.
   Re-declaring the same face with swap keeps the fallback on screen and
   swaps the real face in when it loads.
   ========================================================================== */

@font-face {
    font-family: "berlin_sans_fb_demibold";
    src: url("../../mykd2/fonts/berlin_sans_fb_demi_bold-webfont.woff2") format("woff2"),
         url("../../mykd2/fonts/berlin_sans_fb_demi_bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Overrides for mustack-custom.css

   That sheet is loaded for the CMS components on the inherited pages, but it
   also carries header and hero rules shaped for the default theme's layout.
   These put this theme's own geometry back.
   ========================================================================== */

.vanguard .tgmenu__navbar-wrap ul { margin-left: 0 !important; }

.vanguard .tgmenu__navbar-wrap ul li a {
    padding: 0 clamp(7px, .8vw, 16px) !important;
    font-size: clamp(.68rem, .78vw, .86rem) !important;
    letter-spacing: .04em !important;
}

.vanguard .tgmenu__action { margin-right: 0 !important; }
.vanguard .tgmenu__action > .list-wrap > li { margin-left: 0 !important; }

/* The banner is this theme's own composition, not the default theme's hero. */
.vanguard .banner__content.slider__content {
    margin: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   Banner height

   The template's banner is sized for a headline over a full-bleed photo with
   nothing else in it. This one carries a tagline, rate chips and buttons, so
   the template's padding leaves a dead black band under the content.
   ========================================================================== */

.vanguard .banner__padding { padding: 200px 0 120px; }

@media (max-width: 1500px) {
    .vanguard .banner__padding { padding: 170px 0 100px; }
}

@media (max-width: 767.98px) {
    .vanguard .banner__padding { padding: 130px 0 80px; }
}

/* ==========================================================================
   The template's leftover green

   main.css resolves most colours from --tg-theme-primary, but three things
   carry the template's own green regardless of what an admin picks: the
   headline's drop shadow, the divider artwork under the banner, and the dash
   under every section title (a fill baked into title_shape.svg). Each is
   re-derived from the theme colour here so the page is one palette.
   ========================================================================== */

/* Headline shadow. */
.vanguard .slider__content .title,
.vanguard .banner__content .title {
    text-shadow: -1px 5px 0 color-mix(in srgb, var(--tg-theme-primary) 66%, transparent);
}

/* Section dash: the SVG becomes a mask so the theme colour paints it. */
.vanguard .section__title::after {
    background-image: none;
    background-color: var(--tg-theme-primary);
    -webkit-mask-image: url("../../mykd2/img/bg/title_shape.svg");
    mask-image: url("../../mykd2/img/bg/title_shape.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The divider under the banner. result_bg.png is a dark panel with a bright
   green wedge along its top edge, so the artwork is dropped and the same
   shape drawn in the theme colour: a thin angled bar over a dark ground. */
.vanguard .match__result-bg {
    background-image: none !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tg-common-color-black) 88%, transparent),
        var(--tg-common-color-black) 62%);
    clip-path: polygon(0 62px, 100% 0, 100% 100%, 0 100%);
}

.vanguard .match__result-area::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -70px;
    height: 70px;
    z-index: -1;
    background: var(--tg-theme-primary);
    clip-path: polygon(0 62px, 100% 0, 100% 9px, 0 70px);
}

/* The template's cursor ring is green too. */
.vanguard .cb-cursor::before { background: var(--tg-theme-primary) !important; }

/* ==========================================================================
   Header

   Sits over the banner artwork, so it is tinted rather than solid — dark
   enough for the menu to read, light enough to show the art behind it. It
   turns solid once the page is scrolled and the header is over content.
   ========================================================================== */

.vanguard .tg-header__area {
    background: color-mix(in srgb, var(--tg-common-color-black) 55%, transparent);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    border-bottom: 1px solid color-mix(in srgb, var(--tg-heading-color) 8%, transparent);
    transition: background .25s ease;
}

.vanguard .tg-header__area.sticky-menu,
.vanguard .tg-header__area.is-stuck {
    background: color-mix(in srgb, var(--tg-common-color-black) 92%, transparent);
}

/* ---------- dropdowns ---------- */

.vanguard .tgmenu__navbar-wrap .navigation li.menu-item-has-children > a { position: relative; padding-right: 18px !important; }

.vanguard .tgmenu__navbar-wrap .navigation li.menu-item-has-children > a::after {
    content: "\f107";
    position: absolute;
    right: 2px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .72em;
    opacity: .7;
}

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 60;
    min-width: 224px;
    margin: 0;
    padding: 7px;
    list-style: none;
    background: color-mix(in srgb, var(--tg-common-color-black) 97%, #000);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    border-top: 2px solid var(--tg-theme-primary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.vanguard .tgmenu__navbar-wrap .navigation li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li { display: block; white-space: nowrap; }

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li a {
    display: block;
    padding: 9px 13px !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
    line-height: 1.3;
    color: var(--tg-body-color);
    border-radius: 3px;
}

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li a:hover,
.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li.active > a {
    background: color-mix(in srgb, var(--tg-theme-primary) 16%, transparent);
    color: var(--tg-heading-color);
}

/* The last groups would otherwise open past the right edge. */
.vanguard .tgmenu__navbar-wrap .navigation > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; }

/* ==========================================================================
   Banner: show the whole artwork

   cover on a fixed-height section crops the picture. Tying the section's
   height to the image's own proportions means the full artwork is on screen
   at every width.
   ========================================================================== */

.vanguard .banner__area {
    display: flex;
    align-items: center;
    min-height: min(calc(100vw * 0.647), 940px);
}

.vanguard .banner__area > .container { width: 100%; }

.vanguard .banner__bg {
    background-size: cover;
    background-position: center top;
}

/* ==========================================================================
   The live player count

   Everything else in that row is a fixed rate. This is the one number that
   changes, so it reads as live rather than as another statistic.
   ========================================================================== */

.vanguard .vanguard-rates li.is-live {
    position: relative;
    padding-top: 26px;
    border-color: color-mix(in srgb, var(--tg-theme-primary) 55%, transparent);
    background: color-mix(in srgb, var(--tg-theme-primary) 12%, rgba(0, 0, 0, .55));
}

.vanguard .vanguard-rates li.is-live b { color: var(--tg-heading-color); }

.vanguard .vanguard-live {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--tg-theme-primary);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vanguard .vanguard-live__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tg-theme-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-theme-primary) 70%, transparent);
    animation: vanguard-pulse 2s infinite;
}

@keyframes vanguard-pulse {
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tg-theme-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-theme-primary) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .vanguard .vanguard-live__dot { animation: none; }
}

/* ==========================================================================
   Footer

   Four columns over a bar: what the server is (with its rates), the sections
   split into two readable lists, and where the community is. The template's
   own footer was three columns of invented contact details.
   ========================================================================== */

.vanguard-foot {
    background: color-mix(in srgb, var(--tg-common-color-black) 55%, #000);
    border-top: 1px solid color-mix(in srgb, var(--tg-heading-color) 8%, transparent);
}

.vanguard-foot__main { padding: 62px 0 46px; }

.vanguard-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)) minmax(0, 1fr);
    gap: 40px;
}

.vanguard-foot__logo { display: inline-block; margin-bottom: 18px; }
.vanguard-foot__logo img { max-height: 52px; width: auto; }

.vanguard-foot__brand p {
    max-width: 42ch;
    margin: 0 0 22px;
    color: var(--tg-body-color);
    font-size: .88rem;
    line-height: 1.75;
}

.vanguard-foot__rates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.vanguard-foot__rates li {
    padding: 8px 15px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 9%, transparent);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    text-align: center;
}

.vanguard-foot__rates b {
    display: block;
    color: var(--tg-theme-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.vanguard-foot__rates em {
    color: var(--tg-body-color);
    font-size: .58rem;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vanguard-foot__col h4 {
    margin: 0 0 18px;
    color: var(--tg-heading-color);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vanguard-foot__col h4::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 9px;
    background: var(--tg-theme-primary);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.vanguard-foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.vanguard-foot__col ul a {
    color: var(--tg-body-color);
    font-size: .85rem;
    transition: color .15s ease, padding-left .15s ease;
}

.vanguard-foot__col ul a:hover { color: var(--tg-theme-primary); padding-left: 4px; }

.vanguard-foot__social { display: grid; gap: 8px; margin-bottom: 18px; }

.vanguard-foot__social a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 9%, transparent);
    border-radius: 4px;
    color: var(--tg-body-color);
    font-size: .8rem;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.vanguard-foot__social a i { width: 16px; text-align: center; color: var(--tg-theme-primary); }

.vanguard-foot__social a:hover {
    border-color: var(--tg-theme-primary);
    background: color-mix(in srgb, var(--tg-theme-primary) 10%, transparent);
    color: var(--tg-heading-color);
}

.vanguard-foot__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--tg-theme-primary);
    color: var(--tg-common-color-black);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.vanguard-foot__cta:hover { filter: brightness(1.1); color: var(--tg-common-color-black); }

.vanguard-foot__bar {
    border-top: 1px solid color-mix(in srgb, var(--tg-heading-color) 8%, transparent);
    padding: 18px 0;
}

.vanguard-foot__bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vanguard-foot__bar p { margin: 0; color: var(--tg-body-color); font-size: .78rem; }
.vanguard-foot__bar nav { display: flex; flex-wrap: wrap; gap: 18px; }
.vanguard-foot__bar nav a { color: var(--tg-body-color); font-size: .78rem; }
.vanguard-foot__bar nav a:hover { color: var(--tg-theme-primary); }

@media (max-width: 1199.98px) {
    .vanguard-foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; }
    .vanguard-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .vanguard-foot__grid { grid-template-columns: 1fr; }
    .vanguard-foot__bar .container { justify-content: center; text-align: center; }
}

/* The news section's divider is the same story as the castle one: the wedge
   is painted into blog_bg3.png in the template's green. Same treatment. */
.vanguard .blog-area3-bg-thumb {
    background-image: none !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tg-common-color-black) 90%, transparent),
        var(--tg-common-color-black) 55%);
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
}

.vanguard .blog-area3::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 78px;
    z-index: -1;
    background: var(--tg-theme-primary);
    clip-path: polygon(0 70px, 100% 0, 100% 22px, 0 78px);
}

/* Both wedges: thin at the low edge, thicker at the high one, the way the
   template's artwork was drawn. */
.vanguard .match__result-area::before {
    top: -78px;
    height: 78px;
    clip-path: polygon(0 70px, 100% 0, 100% 22px, 0 78px);
}

.vanguard .match__result-bg { clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%); }

/* The template keeps a second accent — "teal", its own green — for the social
   tiles and a few borders. Pointing it at the theme colour keeps the page to
   one palette whatever an admin picks. */
.vanguard { --tg-common-color-teal: var(--tg-theme-primary); }

/* The banner sits in its own stacking context at z-index 1, so an open
   dropdown was painted underneath it and clipped at the header's edge. The
   header needs to sit above the page it overlays. */
.vanguard header,
.vanguard .tg-header__area { position: relative; z-index: 90; overflow: visible; }
.vanguard .tgmenu__wrap,
.vanguard .tgmenu__nav,
.vanguard .tgmenu__navbar-wrap { overflow: visible; }
.vanguard .tgmenu__navbar-wrap .navigation > li { position: relative; }

/* ==========================================================================
   Banner type scale

   The template sets the headline at 150px because its demo copy was one short
   word. A server name wraps to two lines at that size and swallows the
   artwork, so the headline and its tagline are scaled to the viewport and
   capped well below the template's ceiling.
   ========================================================================== */

.vanguard .banner__content .title {
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    line-height: 1;
    margin-bottom: 14px;
}

.vanguard .banner__content p {
    font-size: clamp(.86rem, 1.15vw, 1.05rem);
    letter-spacing: .16em;
    line-height: 1.6;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Sign up

   With registration on, the header carries both actions. Register is the one
   being asked for, so it keeps the filled plate and signing in steps back to
   an outline.
   ========================================================================== */

.vanguard .tgmenu__action .tg-btn-3.is-secondary { opacity: .82; }
.vanguard .tgmenu__action .tg-btn-3.is-secondary:hover { opacity: 1; }

.vanguard-mobile__auth {
    display: grid;
    gap: 8px;
    margin: 18px 0;
}

.vanguard-mobile__auth a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 14%, transparent);
    color: var(--tg-heading-color);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.vanguard-mobile__auth a.is-primary {
    background: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
    color: var(--tg-common-color-black);
}

.vanguard-mobile__auth a:hover { border-color: var(--tg-theme-primary); }
.vanguard-mobile__auth a.is-primary:hover { filter: brightness(1.1); }

/* ==========================================================================
   Account plate and notification bell

   The account control keeps the template's drawn plate — it is the same
   control it always was, it just opens a menu now instead of going straight
   to the panel. The bell sits beside it as a quiet ring that only draws
   attention when there is something in it.
   ========================================================================== */

.vanguard-account { position: relative; }

.vanguard-account > button.tg-btn-3 {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.vanguard-account__caret { margin-left: 4px; font-size: .8em; opacity: .75; }

/* ---------- bell ---------- */

.vanguard-bell { position: relative; display: flex; align-items: center; }

.vanguard-bell > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 16%, transparent);
    border-radius: 50%;
    color: var(--tg-heading-color);
    font-size: 1rem;
    transition: border-color .2s ease, color .2s ease;
}

.vanguard-bell > a:hover {
    border-color: var(--tg-theme-primary);
    color: var(--tg-theme-primary);
}

#notifBadge {
    display: none;
    position: absolute;
    top: -3px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e74c3c;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

#notifDropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    width: min(340px, calc(100vw - 32px));
    max-height: 420px;
    overflow: hidden;
    background: color-mix(in srgb, var(--tg-common-color-black) 97%, #000);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 12%, transparent);
    border-top: 2px solid var(--tg-theme-primary);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

.vanguard-bell__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--tg-heading-color) 9%, transparent);
}

.vanguard-bell__head span {
    color: var(--tg-heading-color);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vanguard-bell__head a { color: var(--tg-theme-primary); font-size: .72rem; }

#notifList { max-height: 320px; overflow-y: auto; padding: 5px 0; }

.vanguard-bell__all {
    display: block;
    padding: 11px;
    border-top: 1px solid color-mix(in srgb, var(--tg-heading-color) 9%, transparent);
    color: var(--tg-theme-primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}

.vanguard-bell__all:hover { background: color-mix(in srgb, var(--tg-theme-primary) 10%, transparent); }

/* ==========================================================================
   Dropdown behaviour

   Three things made the groups awkward to use:

   1. The menu links had their vertical padding removed when the bar was made
      to fit eight sections, leaving an 11px-tall hover target in a 60px bar —
      you had to find a thin line of text. They now fill the bar's height.
   2. The panel opened 8px below the link, so the pointer crossed dead space
      on the way into it and the menu closed. It now meets the link, with a
      transparent bridge covering the header's own padding.
   3. The caret was an icon-font glyph that did not resolve in this build. It
      is drawn in CSS instead, so it cannot go missing.
   ========================================================================== */

.vanguard .tgmenu__navbar-wrap .navigation > li > a {
    display: flex;
    align-items: center;
    padding: 22px clamp(7px, .8vw, 16px) !important;
}

.vanguard .tgmenu__navbar-wrap .navigation li.menu-item-has-children > a {
    gap: 7px;
    padding-right: clamp(7px, .8vw, 16px) !important;
}

/* A drawn chevron, rotated so it points down. */
.vanguard .tgmenu__navbar-wrap .navigation li.menu-item-has-children > a::after {
    content: "";
    position: static;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .65;
    font-family: inherit;
    transition: transform .18s ease, opacity .18s ease;
}

.vanguard .tgmenu__navbar-wrap .navigation li.menu-item-has-children:hover > a::after {
    transform: translateY(1px) rotate(225deg);
    opacity: 1;
}

/* The panel meets the link, and the strip between it and the header's lower
   edge stays part of the hover target. */
.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu {
    top: 100%;
    transform: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

/* Sub-items are sentences, not labels — the bar's tracking makes them hard
   to scan at this size. */
.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li a {
    text-transform: none !important;
    letter-spacing: .01em !important;
    font-size: .82rem !important;
}

/* Eight rankings at the template's line height made a 400px-tall panel; the
   list reads better tightened up. */
.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li a {
    padding: 8px 12px !important;
    line-height: 1.35 !important;
}

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu { padding: 6px; }

/* The bar sets a tall line-height on its list items; the panel's rows
   inherit it and stay taller than their content needs. */
.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu li { line-height: 1.35; }

/* ==========================================================================
   Where the dropdown opens

   The header's vertical padding sat outside the menu items, so an item ended
   well short of the bar's lower edge and a panel anchored to it opened
   partway up the header — by a different amount at every width, because that
   padding scales (22px at 1920, 12px at 1280). Putting the spacing on the
   links instead makes an item exactly as tall as the bar, so the panel lands
   on the bar's lower edge at any size, and lines up with the label above it.
   ========================================================================== */

.vanguard .tg-header__area { padding-top: 0 !important; padding-bottom: 0 !important; }

.vanguard .tgmenu__nav,
.vanguard .tgmenu__navbar-wrap.tgmenu__main-menu,
.vanguard .tgmenu__navbar-wrap .navigation { align-items: stretch; }

.vanguard .tgmenu__nav > .logo,
.vanguard .tgmenu__nav > .tgmenu__action { display: flex; align-items: center; }

.vanguard .tgmenu__navbar-wrap .navigation > li { display: flex; align-items: stretch; }

.vanguard .tgmenu__navbar-wrap .navigation > li > a {
    padding-top: clamp(20px, 2.2vw, 30px) !important;
    padding-bottom: clamp(20px, 2.2vw, 30px) !important;
}

/* Flush against the bar, and starting under the label rather than under the
   link's padding. */
.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu {
    top: 100%;
    left: clamp(7px, .8vw, 16px);
}

.vanguard .tgmenu__navbar-wrap .navigation > li:nth-last-child(-n+2) .sub-menu {
    left: auto;
    right: clamp(7px, .8vw, 16px);
}

.vanguard .tgmenu__navbar-wrap .navigation li .sub-menu::before { display: none; }

/* ==========================================================================
   Rate chips: legible over any artwork

   These sit on top of the banner image, and at the template's translucency
   the lightning and glow behind them came straight through the figures. The
   panel is now dark enough to read against on its own, blurred so whatever is
   behind it stays out of the numbers, and edged so the chip reads as a chip.
   ========================================================================== */

.vanguard .vanguard-rates li {
    background: color-mix(in srgb, var(--tg-common-color-black) 86%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-color: color-mix(in srgb, var(--tg-heading-color) 16%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.vanguard .vanguard-rates b { text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }

.vanguard .vanguard-rates em { color: color-mix(in srgb, var(--tg-heading-color) 72%, transparent); }

.vanguard .vanguard-rates li.is-live {
    background:
        linear-gradient(color-mix(in srgb, var(--tg-theme-primary) 14%, transparent),
                        color-mix(in srgb, var(--tg-theme-primary) 6%, transparent)),
        color-mix(in srgb, var(--tg-common-color-black) 88%, transparent);
    border-color: color-mix(in srgb, var(--tg-theme-primary) 60%, transparent);
}














/* ==========================================================================
   Vanguard — its own sections

   Everything above is the shell this CMS's MYKD themes share: header,
   dropdowns, pickers, account menu, bell, flashes, footer.

   The home page uses the template's own index-3 components — the HUD-framed
   banner, the pill-and-underline section titles, the service cards, the
   fixture rows and the roster cards — so this file deliberately adds very
   little: the pieces the template had no equivalent for, and nothing that
   would fight its own geometry.

   Violet against the other themes' orange and cyan, so the three read as
   different sites rather than one site recoloured.
   ========================================================================== */

/* ---------- banner ---------- */

/* The frame is drawn by the template's own .banner__bg-shape, positioned
   against the section's padding and margin — so those are left exactly as
   the template set them. Only the photo layer is this theme's. */

.vanguard .banner__area-two .banner__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
}

.vanguard .vg-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(95deg,
        color-mix(in srgb, var(--tg-common-color-black) 92%, transparent) 8%,
        color-mix(in srgb, var(--tg-common-color-black) 52%, transparent) 60%,
        color-mix(in srgb, var(--tg-common-color-black) 78%, transparent));
}

.vanguard .banner__area-two .banner__content .title {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1;
    text-shadow: none;
}

.vanguard .banner__area-two .banner__content p {
    max-width: 50ch;
    color: var(--tg-body-color);
    line-height: 1.75;
}

/* Rate chips, dark enough to hold their own over artwork. */
.vanguard .vg-rates { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; padding: 0; }

.vanguard .vg-rates li {
    min-width: 104px;
    padding: 12px 18px;
    background: color-mix(in srgb, var(--tg-common-color-black) 86%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 16%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    text-align: center;
}

.vanguard .vg-rates b {
    display: block;
    color: var(--tg-theme-primary);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

.vanguard .vg-rates em {
    color: color-mix(in srgb, var(--tg-heading-color) 72%, transparent);
    font-size: .62rem;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vanguard .vg-rates li.is-live {
    position: relative;
    padding-top: 26px;
    border-color: color-mix(in srgb, var(--tg-theme-primary) 60%, transparent);
    background:
        linear-gradient(color-mix(in srgb, var(--tg-theme-primary) 16%, transparent),
                        color-mix(in srgb, var(--tg-theme-primary) 6%, transparent)),
        color-mix(in srgb, var(--tg-common-color-black) 88%, transparent);
}

.vanguard .vg-rates li.is-live b { color: var(--tg-heading-color); }

.vanguard .vg-live {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--tg-theme-primary);
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vanguard .vg-live__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tg-theme-primary);
    animation: vanguard-pulse 2s infinite;
}

@keyframes vanguard-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-theme-primary) 70%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tg-theme-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-theme-primary) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .vanguard .vg-live__dot { animation: none; }
}

/* ---------- buttons ---------- */

/* tg-btn-4 is the template's cut-corner button: the plate lives on an inner
   span, the corner marks on the anchor. Used as built; the filled variant
   only swaps the faint inner fill for the theme colour, and takes the
   secondary colour on the corners so they read as accents, not as nicks. */
.vanguard .tg-btn-4 span { padding: 15px 30px; font-size: .78rem; letter-spacing: .1em; }
.vanguard .tg-btn-4.is-fill span:after { opacity: 1; background: var(--tg-theme-primary); }
.vanguard .tg-btn-4.is-fill:hover span:after { filter: brightness(1.12); }
.vanguard .tg-btn-4.is-fill:hover { color: var(--tg-common-color-white); }
.vanguard .tg-btn-4.is-fill:after,
.vanguard .tg-btn-4.is-fill:before { background: var(--tg-theme-secondary); }

.vanguard .vg-more { margin: 50px 0 0; text-align: center; }

/* ---------- service cards ---------- */

/* The template's card leads with a photograph. A CMS section has none, so
   that slot carries the section's icon on a tinted plate instead — the rest
   of the card is the template's. */
.vanguard .service-card .service-card-img.vg-plate a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background:
        radial-gradient(90% 90% at 50% 0%,
            color-mix(in srgb, var(--tg-theme-primary) 24%, transparent),
            transparent 70%),
        color-mix(in srgb, var(--tg-common-color-black) 55%, #000);
    color: var(--tg-theme-primary);
    font-size: 2.6rem;
}

.vanguard .service-card:hover .service-card-img.vg-plate a { color: var(--tg-theme-secondary); }

/* ---------- fixture rows ---------- */

.vanguard .upcoming-match__item2 .upcoming-match__team img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    image-rendering: pixelated;
}

.vanguard .upcoming-match__item2 .team--info .game-name { color: var(--tg-body-color); }

.vanguard .vg-none {
    margin: 0;
    padding: 28px;
    background: color-mix(in srgb, var(--tg-common-color-black) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    color: var(--tg-body-color);
    text-align: center;
}

/* ---------- roster ---------- */

.vanguard .team__item2 .team__thumb { position: relative; }

.vanguard .team__item2 .team__thumb img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center 30%;
}

.vanguard .vg-rank {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 3px 11px;
    background: var(--tg-theme-primary);
    color: var(--tg-common-color-white);
    font-size: .72rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.vanguard .vg-stats {
    display: flex;
    gap: 22px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
}

.vanguard .vg-stats > span { display: flex; flex-direction: column; }
.vanguard .vg-stats b { color: var(--tg-heading-color); font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vanguard .vg-stats em { color: var(--tg-body-color); font-size: .58rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- sections the template dressed in its own green ---------- */

/* service_bg3.png and match_bg3.png have the template's green painted into
   them, which no colour setting can reach, so neither is used and the same
   shapes are drawn from the theme colour instead. */

.vanguard .service__area3 {
    background:
        radial-gradient(120% 80% at 50% 0%,
            color-mix(in srgb, var(--tg-theme-primary) 9%, transparent),
            transparent 62%),
        var(--tg-common-color-black);
}

.vanguard .upcoming-match__area3 {
    position: relative;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--tg-theme-primary) 7%, transparent),
            transparent 40%),
        color-mix(in srgb, var(--tg-common-color-black) 60%, #000);
    overflow: hidden;
}

.vanguard .upcoming-match__area3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 34px;
    background: var(--tg-theme-primary);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---------- vote strip ---------- */

.vanguard .vg-votes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
}

.vanguard .vg-votes__label {
    color: var(--tg-body-color);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.vanguard .vg-votes__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.vanguard .vg-votes__row a {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    color: var(--tg-body-color);
    font-size: .78rem;
    font-weight: 700;
}

.vanguard .vg-votes__row a:hover { border-color: var(--tg-theme-primary); color: var(--tg-heading-color); }
.vanguard .vg-votes__row img { max-height: 28px; width: auto; }

/* ==========================================================================
   Header controls: centred in the bar

   The menu items fill the bar's height so the dropdowns anchor to its lower
   edge. That stretches the action column too — but the column carries
   Bootstrap's d-md-block, whose display:block !important beats flex centring,
   so its row of controls sat against the top. The full height centres it.
   ========================================================================== */

.tgmenu__action > .list-wrap { height: 100%; }
.tgmenu__nav > .logo { height: 100%; }

/* The inlined marks take their colour from the shape wrapper. */
.vanguard .banner__shape { color: var(--tg-theme-primary); }
.vanguard .banner__shape svg { display: block; }

/* The scribble under each heading is section-line.png with the template's
   green painted into it. Used as a mask so the theme colour draws it. */
.vanguard .section__title .title2 .section-line {
    display: block;
    height: 18px;
    background-color: var(--tg-theme-primary);
    -webkit-mask-image: url("../../mykd2/img/others/section-line.png");
    mask-image: url("../../mykd2/img/others/section-line.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ==========================================================================
   Vanguard — the blocks added for feature parity

   A tile grid, a figure row and a social row. Three components carry five
   blocks between them, drawn in this theme's own vocabulary — cut corners,
   the violet accent, the secondary colour on figures — so they read as part
   of the page rather than as additions.
   ========================================================================== */

.vanguard .vg-figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vanguard .vg-figs li {
    padding: 24px 16px;
    background: color-mix(in srgb, var(--tg-common-color-black) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    border-top: 2px solid var(--tg-theme-primary);
    text-align: center;
}

.vanguard .vg-figs b {
    display: block;
    margin-bottom: 5px;
    color: var(--tg-theme-primary);
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vanguard .vg-figs em {
    color: var(--tg-body-color);
    font-size: .66rem;
    font-style: normal;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ---------- tiles: classes, market items, shop packs ---------- */

.vanguard .vg-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.vanguard .vg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: color-mix(in srgb, var(--tg-common-color-black) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    transition: border-color .18s ease, transform .18s ease;
}

.vanguard .vg-tile:hover { border-color: var(--tg-theme-primary); transform: translateY(-3px); }
.vanguard .vg-tile.is-top { border-color: color-mix(in srgb, var(--tg-theme-primary) 55%, transparent); }

.vanguard .vg-tile__pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }

.vanguard .vg-tile__pic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--tg-common-color-black) 90%, transparent));
}

.vanguard .vg-tile__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .4s ease; }
.vanguard .vg-tile:hover .vg-tile__pic img { transform: scale(1.06); }

/* Item art is small and sits on its own plate rather than filling the tile. */
.vanguard .vg-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    background: rgba(0, 0, 0, .3);
    color: color-mix(in srgb, var(--tg-theme-primary) 60%, transparent);
    font-size: 2rem;
}

.vanguard .vg-tile__icon img { max-height: 92px; width: auto; image-rendering: pixelated; }

.vanguard .vg-tile__body { display: block; padding: 13px 15px 15px; }

.vanguard .vg-tile__name {
    display: block;
    margin-bottom: 9px;
    color: var(--tg-heading-color);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.35;
}

.vanguard .vg-tile.is-item .vg-tile__name { text-transform: none; letter-spacing: 0; }

.vanguard .vg-tile__bar {
    display: block;
    height: 4px;
    margin-bottom: 9px;
    background: color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    overflow: hidden;
}

.vanguard .vg-tile__bar > span { display: block; height: 100%; background: var(--tg-theme-primary); }

.vanguard .vg-tile__nums { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vanguard .vg-tile__nums b { color: var(--tg-theme-secondary); font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vanguard .vg-tile__nums em { color: var(--tg-body-color); font-size: .7rem; font-style: normal; font-weight: 700; }

/* ---------- social row ---------- */

.vanguard .vg-social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 13px;
}

.vanguard .vg-social a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 28px 18px;
    background: color-mix(in srgb, var(--tg-common-color-black) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--tg-heading-color) 10%, transparent);
    color: var(--tg-body-color);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}

.vanguard .vg-social a i { color: var(--tg-theme-primary); font-size: 1.9rem; transition: color .18s ease; }

.vanguard .vg-social a span {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vanguard .vg-social a:hover {
    border-color: var(--tg-theme-primary);
    color: var(--tg-heading-color);
    transform: translateY(-3px);
}

.vanguard .vg-social a:hover i { color: var(--tg-theme-secondary); }

/* ---------- Vanguard: the hero split ---------- */

/* In its own column the countdown and the video are panels, not lines of
   copy — the same treatment the other split heroes use. */
.vanguard .vg-hero-split .ms-cd { margin: 0; }

.vanguard .vg-hero-split .ms-cd__box {
    display: block;
    padding: 24px 26px;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--tg-theme-primary) 34%, transparent);
    border-left-width: 2px;
    border-left-color: var(--tg-theme-primary);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.vanguard .vg-hero-split .ms-cd__clock { justify-content: space-between; gap: 10px; }
.vanguard .vg-hero-split .ms-cd__clock li { flex: 1 1 0; min-width: 0; }
.vanguard .vg-hero-split .ms-hv { max-width: none; margin: 0; }

/* Under the artwork, when a cut-out is configured as well. */
.vanguard .banner__img + .vg-hero-split { margin-top: 24px; }

@media (max-width: 1199.98px) {
    .vanguard .vg-hero-split { margin-top: 28px; }
}

/* ---------- service cards keep their own height ------------------------ */

/*
 * Three of the six carry a stat row and three do not, and a stretched grid
 * gave the tagless ones a third of a card of empty space under the title.
 * Each card is as tall as what is in it; the row still aligns at the top,
 * which is the edge that reads.
 */

.vanguard .service__area3 .row { align-items: flex-start; }