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

/* Remove default margins */
* {
  margin: 0;
}

/* Improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Media defaults */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
}

/* Prevent text overflow issues */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}



body {
  font-family: sans-serif;
  text-align: center;
  background-color:#111;
  color:#fff;
  margin:0;
  padding:0;
}

#rack {
  position: relative;
  width: 360px;
  margin: 40px auto;
}

.ball {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* background: radial-gradient(circle at 30% 30%, #fff, #999); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.ball.locked-rule .lock-icon {
  opacity: 1;
}

.ball.locked-manual .lock-icon {
  opacity: 1;
}

.ball.locked .lock-icon {
  display: block;
}

.ball.locked-rule {
  opacity: 1;
}

/* .ball.locked::after {
  content: "🔒";
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 16px;
}
.ball.locked-rule::after {
  content: "🔒";
  opacity: 0.5;
} */


.lock-icon {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  display: none;
  pointer-events: none;
}

.lock-icon img {
  width: 100%;
  height: 100%;
}


.display #rack {
  grid-template-columns: repeat(5, 80px);
}
h1 {
  font-family: "Bangers", system-ui;
  font-weight: 400;
  font-style: normal;
  margin-bottom:-8px;
}

section.content {
  background-color:#222;
  padding:32px;
}
section.support {
  background-color:#111;
  padding:32px;
}

#rules input {
  margin-right:4px;
}