/* src/pages/Login Bingo/card.css */
#bingo {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  @container column (width < 500px) {
    grid-column: 1 / -1;
  }
}
#card {
  display: grid;
  grid-template-columns: subgrid;
  grid-row: 1;
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--font-s1);
  max-height: 90vh;
  max-width: 100vw;
  @container column (width < 500px) {
    font-size: 3.5vi;
    grid-column: 1 / -1;
  }
  container: card / inline-size;
  &.has-bingo {
    background-color: var(--bg-accent-out1);
  }
}
.card-inner {
  --border-color: var(--bg-mid2);
  border: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  aspect-ratio: 1/1;
  max-height: 90vh;
  max-width: 100vw;
  margin: 0 auto;
  @container column (width < 500px) {
    grid-column: 1 / -1;
  }
  .has-bingo & {
    --border-color: var(--fg-accent-mid2);
  }
}
#has-bingo {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 4vi;
  transform: translate(-50%, -50%);
  color: var(--fg-contrast);
  background-color: var(--bg-accent);
  padding: 10px 2px;
  border-radius: 8px;
  font-weight: bold;
}
.row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(5, 1fr);
  align-items: stretch;
}
.cell {
  border: 1px solid var(--border-color);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
  aspect-ratio: 1 / 1;
  max-height: 18vh;
  max-width: 20vw;
  padding: 1rem;
  display: inline-block;
  align-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  @container card (width < 650px) {
    word-break: unset;
    padding: 0.5rem;
  }
  @container card (width < 480px) {
    padding: 0.25rem;
  }
  transition: all 0.5s ease;
  &.selected {
    background-color: var(--bg-accent);
    border-color: var(--bg-accent-mid2);
    &.dimmed {
      color: var(--bg-accent-mid2);
    }
  }
  &.dimmed {
    color: var(--bg-mid2);
  }
  &.disabled {
    cursor: not-allowed;
  }
}
#cell-2-2 {
  cursor: not-allowed;
  letter-spacing: 0.5rem;
  font-weight: bold;
  &::before {
    content: "";
    padding-right: 0.5rem;
  }
  .has-bingo & {
    color: var(--bg-accent);
  }
  @container column (width < 500px) {
    font-size: unset;
    letter-spacing: unset;
    &::before {
      padding-right: unset;
    }
  }
}
#controls {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  column-gap: var(--space-md);
  @container column (width < 650px) {
    justify-content: stretch;
  }
  .left,
  .right,
  .clobber-control,
  .clobber-buttons {
    display: flex;
    column-gap: var(--space-md);
  }
  .clobber-control {
    @container column (width < 650px) {
      row-gap: var(--space-s1);
      flex-direction: column;
    }
  }
  .button {
    @container column (width < 650px) {
      font-size: var(--font-l1);
      line-height: 2;
      width: 100%;
    }
  }
  .share-message {
    font-size: var(--font-s1);
    font-family: var(--font-sans);
    color: var(--fg-mid2);
    &.warning {
      color: var(--fg-yel-main);
    }
    &.error {
      color: var(--fg-red-main);
    }
  }
}
.fade-enter-active,
.fade-exit-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-exit-to {
  opacity: 0;
}