/* OFF pool overrides — Cthulhu background, all parent blocks transparent */
html { background-color: #05080a; }
body { background: transparent !important; position: relative; }
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  background:
    linear-gradient(rgba(5,8,10,0.65), rgba(5,8,10,0.85)),
    url("/cthulhu-bg.jpg") center / cover no-repeat;
}
/* Strip backgrounds from all parent blocks so the creature shows through */
.wrap, .header, .tiles, .tile, .card, .nav, .title, .sub, .supply-line,
section, header, main, article, .chart-legend, .meta {
  background: transparent !important;
  background-color: transparent !important;
}
/* Thin border on tiles/cards so they're still legible as containers */
.tile, .card {
  border: 1px solid rgba(95,208,160,0.18) !important;
  border-radius: 8px;
}

/* Center the chart containers within their cards, but leave headers/legends/text left-aligned */
.ct-chart {
  width: 80%; max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* Chartist SVG fills its parent — flex-center it just in case it ever renders narrower */
.ct-chart > svg {
  display: block;
  margin: 0 auto;
}

/* OFF circle logo in top-right of header */
.header { position: relative; }
.off-logo {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(95,208,160,0.35);
  z-index: 5;
}
@media (max-width: 640px) {
  .off-logo { width: 56px; height: 56px; top: 8px; right: 8px; }
}