/* One transparent tile covers every screen without intercepting input. */
:root {
  --page-watermark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22230%22%20height%3D%22150%22%20viewBox%3D%220%200%20230%20150%22%3E%3Ctext%20x%3D%22115%22%20y%3D%2275%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20transform%3D%22rotate%28-28%20115%2075%29%22%20font-family%3D%22Arial%2Csans-serif%22%20font-size%3D%2223%22%20font-weight%3D%22600%22%20fill%3D%22%23334c70%22%20fill-opacity%3D%220.18%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%220.8%22%20paint-order%3D%22stroke%22%3E%40csgo2%3C%2Ftext%3E%3C%2Fsvg%3E");
}

body::after,
dialog[open]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  user-select: none;
  background-image: var(--page-watermark);
  background-repeat: repeat;
  background-size: 230px 150px;
}

/* Native modal dialogs live above body overlays, so use the top layer there. */
body:has(dialog[open])::after {
  visibility: hidden;
}

@media (max-width: 760px) {
  body::after,
  dialog[open]::after {
    background-size: 195px 128px;
  }
}
