*,
::before,
::after {
  box-sizing: border-box;
}

body {
  --page-bg: #eee;
  --accentColor: lightskyblue;
  --accentBorder: 1px solid var(--accentColor);
  --menuBorder: 2px solid lightcoral;
  --cellCoverColor: lightcyan;
  --cellCoverPoopMarkColor: lightcoral;
  --cellCoverQuestionMarkColor: lightgreen;
  --errorTextColor: red;

  margin: 0;
  font-family: 'Rubik Mono One', monospace;
  background-color: var(--page-bg);
}

h1 {
  text-align: center;
  text-wrap: pretty;
  font-size: 1.5rem;
  font-weight: 500;
}

h2 {
  font-size: .75rem;
  font-weight: 500;
}

button {
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  background-color: transparent;
  border: none;
}

dialog {
  width: 360px;
  padding-inline: 2rem;
  border: var(--menuBorder);
}

fieldset {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
}

label {
  padding-block: 1rem .125rem;
  font-size: .75rem;
}

input {
  width: 100%;
  max-width: 100%;
  height: 2.5rem;
  padding-inline: .5rem;
  font-size: 1.25rem;
}

.page {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 375px;
  min-height: 100dvh;
}

.header {
  z-index: 2;
  padding-inline: 20px;
  background-color: var(--page-bg);
}

.main {
  position: relative;
  display: flex;
  flex-direction: column;
}

.auth-button,
.menu-button {
  z-index: 2;
  display: block;
  margin-inline-start: auto;
  padding: .75rem;
}

.form.hidden,
.button-group.hidden {
  display: none;
}

.error-message {
  position: absolute;
  bottom: 0;
  left: initial;
  display: none;
  font-size: .7rem;
  color: var(--errorTextColor);
}

.auth-error .error-message {
  display: block;
}

.dialog-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.dialog-close-button {
  position: absolute;
  top: -0.75rem;
  right: -1.75rem;
  padding: .25rem;
  font-weight: 100;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 2rem;
}

.button-group button {
  padding: .75rem;
  background-color: var(--cellCoverQuestionMarkColor);
  border: var(--menuBorder);
  transition: transform .2s, box-shadow .3s;
}

.button-group button:hover,
.button-group button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px 2px lightcoral;
}

.or-divider {
  align-self: center;
  margin: 0;
  font-size: .75rem;
}

.grid-container,
.cell,
.cell-cover {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  position: relative;
  flex: 1;
  flex-direction: column;
  padding: .75rem 1.25rem;
}

.grid,
.cell {
  border: var(--accentBorder);
}

.row {
  display: flex;
}

.cell {
  position: relative;
  width: var(--cell-size, 74px);
  aspect-ratio: 1/1;
  cursor: default;
  font-size: 1.5rem;
  background-color: #fff;
}

@media (width < 640px) {
  .cell {
    width: 40px;
    font-size: 1.25rem;
  }
}

.cell-cover {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: var(--cellCoverColor);
  transition: opacity .15s, background-color .15s;
}

.cover-poop-mark {
  background-color: var(--cellCoverPoopMarkColor);
}

.cover-question-mark {
  background-color: var(--cellCoverQuestionMarkColor);
}

.flows-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flows {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr .55fr 1.25fr 1fr .75fr 1.5fr 1fr .75fr .75fr 1.5fr;
}

.flows.flow.flush {
  transform: scale(1.5) translateY(200%);
  transition: transform 1.5s ease-in-out;
}

.flows > div {
  background-color: chocolate;
  border-radius: 1000px;
  transform: scale(1) translateY(-100%);
  transform-origin: center;
}

.flows.flow > div {
  --flowDuration: calc(var(--flowDurationRandom, 4) * 1s);
  transform: scale(1.5) translateY(0);
  transition: transform var(--flowDuration) var(--flowTiming, ease-out);
}

.icon-fall {
  position: absolute;
  font-size: 32px;
  background-color: transparent !important;
  animation: icon-fall linear infinite;
}

@keyframes icon-fall {
  to { transform: translateY(100dvh) }
}