/* ===============================================
   POLISH - HEADER AND FOOTER
   A light retouch loaded AFTER the page CSS. The header and footer components
   inject their own <style> into <head> when they start, so every rule here
   uses the wrapper id/class (#headerc-d-placeholder ...) to be one step
   stronger and win without !important.
   Looks only: no sizes of the header or footer change.
   Works for both forms (signed-out: header-/footer-, signed-in: headerc-/footerc-).
   To go back to the old look, remove this one <link> from the page.
   =============================================== */

/* ---------- HEADER: top title bar ---------- */
.header-d-wrap .header-d-title::before,
.header-p-wrap .header-p-title::before,
.header-d-wrap .headerc-d-title::before,
.header-p-wrap .headerc-p-title::before {
  background: linear-gradient(90deg, rgba(61, 0, 24, 0.15), rgba(110, 0, 44, 0.5) 50%, rgba(61, 0, 24, 0.15));
}

.header-d-wrap .header-d-title span,
.header-p-wrap .header-p-title span,
.header-d-wrap .headerc-d-title span,
.header-p-wrap .headerc-p-title span {
  color: rgba(225, 225, 225, 0.72);
  text-shadow: 0 0 12px rgba(0, 255, 146, 0.18);
}

/* ---------- HEADER: main bar ---------- */
.header-d-wrap .header-d-details::before,
.header-p-wrap .header-p-details::before,
.header-d-wrap .headerc-d-details::before,
.header-p-wrap .headerc-p-details::before {
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.88), rgba(6, 6, 6, 0.88));
}

.header-d-wrap .header-d-details,
.header-p-wrap .header-p-details,
.header-d-wrap .headerc-d-details,
.header-p-wrap .headerc-p-details {
  box-shadow: 0 1px 0 rgba(0, 255, 146, 0.2), 0 8px 22px rgba(0, 0, 0, 0.55);
}

/* Logo: the shape of the logo itself (square with cut corners, not round ones). The picture already
   has those corners, so the box is left open and the ring and the glow are drawn along the picture's
   own edge. Hover glows green instead of blurring. */
.header-d-wrap .header-d-logo,
.header-p-wrap .header-p-logo,
.header-d-wrap .headerc-d-logo,
.header-p-wrap .headerc-p-logo {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.header-d-wrap .header-d-logo img,
.header-p-wrap .header-p-logo img,
.header-d-wrap .headerc-d-logo img,
.header-p-wrap .headerc-p-logo img {
  filter: drop-shadow(0 0 0.6px rgba(205, 205, 205, 0.5)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  transition: filter 0.3s ease;
}

.header-d-wrap .header-d-logo:hover,
.header-p-wrap .header-p-logo:hover,
.header-d-wrap .headerc-d-logo:hover,
.header-p-wrap .headerc-p-logo:hover {
  filter: none;
  box-shadow: none;
}

.header-d-wrap .header-d-logo:hover img,
.header-p-wrap .header-p-logo:hover img,
.header-d-wrap .headerc-d-logo:hover img,
.header-p-wrap .headerc-p-logo:hover img {
  filter: drop-shadow(0 0 0.8px #00ff92) drop-shadow(0 0 0.8px #00ff92) drop-shadow(0 0 10px rgba(0, 255, 146, 0.5));
}

/* Date and time: a bit easier to read. */
.header-d-wrap .header-d-time,
.header-p-wrap .header-p-time,
.header-d-wrap .headerc-d-time,
.header-p-wrap .headerc-p-time {
  font-weight: 200;
  color: rgba(205, 205, 205, 0.58);
  letter-spacing: 0.03em;
}

/* Buttons and links: hover turns bright with a green glow (the old hover was
   dark red on black, or a blur). */
.header-d-wrap .header-d-demo,
.header-d-wrap .header-d-wallet,
.header-p-wrap .header-p-demo,
.header-p-wrap .header-p-wallet,
.header-d-wrap .headerc-d-profile,
.header-d-wrap .headerc-d-play,
.header-p-wrap .headerc-p-profile,
.header-p-wrap .headerc-p-play {
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.header-d-wrap .header-d-demo:hover,
.header-p-wrap .header-p-demo:hover,
.header-d-wrap .headerc-d-play:hover,
.header-p-wrap .headerc-p-play:hover {
  color: #ffffff;
  filter: none;
  text-shadow: 0 0 12px rgba(0, 255, 146, 0.8);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.header-d-wrap .header-d-wallet:hover,
.header-p-wrap .header-p-wallet:hover,
.header-d-wrap .headerc-d-profile:hover,
.header-p-wrap .headerc-p-profile:hover {
  color: #00ff92;
  filter: none;
  text-shadow: 0 0 12px rgba(0, 255, 146, 0.6);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* ---------- FOOTER ---------- */
.footer-d-wrap .footer-d-pages::before,
.footer-p-wrap .footer-p-pages::before,
.footer-d-wrap .footerc-d-pages::before,
.footer-p-wrap .footerc-p-pages::before {
  background: linear-gradient(0deg, rgba(16, 16, 16, 0.88), rgba(6, 6, 6, 0.88));
}

.footer-d-wrap .footer-d-pages,
.footer-p-wrap .footer-p-pages,
.footer-d-wrap .footerc-d-pages,
.footer-p-wrap .footerc-p-pages {
  box-shadow: 0 -1px 0 rgba(0, 255, 146, 0.18), 0 -8px 22px rgba(0, 0, 0, 0.5);
}

.footer-d-wrap .footer-d-pages a,
.footer-p-wrap .footer-p-pages a,
.footer-d-wrap .footerc-d-pages a,
.footer-p-wrap .footerc-p-links a,
.footer-p-wrap .footerc-p-pages a {
  color: rgba(215, 215, 215, 0.85);
  letter-spacing: 0.08em;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.footer-d-wrap .footer-d-pages a:hover,
.footer-p-wrap .footer-p-pages a:hover,
.footer-d-wrap .footerc-d-pages a:hover,
.footer-p-wrap .footerc-p-links a:hover,
.footer-p-wrap .footerc-p-pages a:hover {
  color: #00ff92;
  filter: none;
  text-shadow: 0 0 10px rgba(0, 255, 146, 0.55);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Dividers: thin and quiet instead of a white dash with a red glow. */
.footer-d-wrap .footer-d-sep,
.footer-d-wrap .footerc-d-sep {
  height: 10px;
  background: rgba(205, 205, 205, 0.28);
  box-shadow: none;
}

/* Copyright bar: same fading band as the title bar at the top. */
.footer-d-wrap .footer-d-rights::before,
.footer-p-wrap .footer-p-rights::before,
.footer-d-wrap .footerc-d-rights::before,
.footer-p-wrap .footerc-p-rights::before {
  background: linear-gradient(90deg, rgba(61, 0, 24, 0.15), rgba(110, 0, 44, 0.5) 50%, rgba(61, 0, 24, 0.15));
}

.footer-d-wrap .footer-d-rights span,
.footer-p-wrap .footer-p-rights span,
.footer-d-wrap .footerc-d-rights span,
.footer-p-wrap .footerc-p-rights span {
  color: rgba(215, 215, 215, 0.5);
  letter-spacing: 0.04em;
}

/* Phone: the footer links sit in one row, so keep the letter spacing small. */
@media (max-width: 768px) {
  .footer-p-wrap .footer-p-pages a,
  .footer-p-wrap .footerc-p-links a,
  .footer-p-wrap .footerc-p-pages a {
    letter-spacing: 0.03em;
  }
}