html {
  overflow-y: scroll;
  /* min-width: 445px; */
}

@view-transition {
  navigation: auto;
}

.zaddy {
  background-color: var(--bs-purple) !important;
}

header a {
  text-decoration: none;
}

div.navbar.navbar-dark {
  background-color: #131313 !important;
}

/* do not allow svgs inside of buttons to capture mouse events (let them bubble up to the button itself) */
button.capture > svg, button.capture > svg > path, button.capture > span, a.capture > svg, a.capture > svg > path {
  pointer-events: none;
}

.pending-load {
  /* filter: opacity(0); */
  display: none;
}

#content-missing-msg svg, #content-blocked-msg svg {
  color: #a00;
  width: 50px;
  height: 50px;
}

@media (prefers-color-scheme: dark) {
  html[data-bs-theme="dark"] .form-control:disabled,
  html[data-bs-theme="dark"] .form-control[readonly] {
    background-color: #333 !important;
    color: #c2c2c2 !important;
  }

  html[data-bs-theme="dark"] .page-link:not(.disabled) {
    background-color: #2b2b2b;
    color: #3877b8;
  }
}

.text-justify {
  text-align: justify;
}


bingo-square {
  aspect-ratio: 1/1;
}

bingo-square.border {
  border-color: #ccc !important;
}

/* handling duplicate borders for adjacent bingo cells */
bingo-square.border + bingo-square.border {
  border-left: none !important;
}

div.force-col-break + bingo-square.border,
div.force-col-break + bingo-square.border + bingo-square.border,
div.force-col-break + bingo-square.border + bingo-square.border + bingo-square.border,
div.force-col-break + bingo-square.border + bingo-square.border + bingo-square.border + bingo-square.border,
div.force-col-break + bingo-square.border + bingo-square.border + bingo-square.border + bingo-square.border + bingo-square.border {
  border-top: none !important;
}

/* styling for squares when marked */
html[data-bs-theme="dark"] bingo-square.marked-square {
  background-color: rgb(120, 30, 30);
  color: white;
}

html[data-bs-theme="light"] bingo-square.marked-square {
  background-color: rgb(150, 0, 0);
  color: white;
}

.lizzer {
  background: 100% 105% / 50% no-repeat url("../images/lizzer_sploot.png")
}

.coeurl {
  background: 10% -60% / 50% no-repeat url("../images/coeurl_cid_lounge.png")
}

/* shrink text for smaller displays */
@media only screen and (max-width: 600px) {
    bingo-square > div.text-responsive {
        font-size: 0.9rem;
    }
}

/* larger displays get larger text */
@media only screen and (min-width: 600px) {
    bingo-square > div.text-responsive {
        font-size: 1.25rem;
    }
}