body {
  margin: 0;
  background-color: #232527;
  color: white;
  font-family: Builder Sans, Arial, sans-serif;
}
.header {
  background-color: #191b1d;
  border: solid #111214;
  border-width: 0 0 1px;
  padding: 0 15px;
  position: sticky;
  font-weight: 500;
}
.buttonList {
  display: flex;
  align-items: center;

  & * {
    cursor: pointer;
    margin: 0 5px;
  }
}
.logo {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjY3NiAwTDAgNDQuMTY2IDQzLjU3NyA1NmwxMS42NzYtNDQuMTY2TDExLjY3NiAwem0yMC40MDkgMzUuODI3bC0xMi4xNzctMy4zMDggMy4yNjQtMTIuMzQyIDEyLjE4MiAzLjMwOC0zLjI3IDEyLjM0MnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=)
    center / cover repeat-x;
  width: 30px;
  height: 30px;
}
.button {
  padding: 9px 30px 8px 30px;
  text-align: center;
  border-bottom: 2px solid transparent;
}
.button:hover {
  border-bottom: 2px solid #ffffff;
}
.signup {
  background-color: #02b06f;
  border: 1px solid #02b06f;
  padding: 4px 7px 4px 7px;
  margin: 5px 10px;
  border-radius: 8px;
  text-align: center;
}
.section,
.popup-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 91vh;
}
.form {
  background-color: #393b3d;
  width: 400px;
  height: max-content;
  padding: 15px;
  text-align: center;
}
.input-field {
  font-weight: 400;
  font-size: 16px;
  height: 38px;
  padding: 5px 12px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #bdbebe;
  border-radius: 8px;
  line-height: 1.4em;
  width: 100%;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  margin-bottom: 18px;
}
.login-button {
  font-weight: 500;
  width: -webkit-fill-available;
  background-color: transparent;
  border: 1px solid #bdbebe;
  color: hsla(0, 0%, 100%, 0.7);
  border-radius: 8px;
  height: auto;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 9px;
  font-size: 16px;
  line-height: 100%;
  text-decoration: none;
}
.text-link {
  width: max-content;
}
.hover-message {
  margin-bottom: 18px;
  --db-scrollspeed: 15s;
}
.hover-message .default {
  display: block;
}
.hover-message .hovered {
  display: none;
}
.hover-message:hover .default {
  display: none;
}
.hover-message:hover .hovered {
  display: block;
}
.hover-message .db-scroll {
  width: -webkit-fill-available;
}
.hover-message .db-scroll > pre {
  margin: 0;
  font-family: Builder Sans, Arial, sans-serif;
}
@keyframes db-scroll {
  from {
    transform: translateX(102%);
  }
  to {
    transform: translateX(-250%);
  }
}
.popup-holder {
  display: none;
}
:has(#verify:target) .popup-holder {
  display: flex;
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 37%);
}
.popup {
  background-color: #393b3d;
  margin: 15px;
  width: 360px;
  height: max-content;
  padding: 15px;
  color: white;
}
.close {
  text-decoration: none;
  font-size: 1.5em;
  margin: 0 14px;
  color: inherit;
  user-select: none;
}
.toolMode summary {
  display: inline-block;
  width: 1em;
  height: 1em;
  cursor: pointer;
}
.verify-button {
  margin: 21px 0;
}
.verify-button > summary,
.submit a {
  display: inline-block;
  padding: 4px 7px;
  background-color: #02b06f;
  color: white;
  cursor: pointer;
  text-decoration: none;
}
.game {
  display: flex;
  word-spacing: -4px;
  flex-wrap: wrap;
  justify-content: center;
}
.tile-holder {
  display: inline-flex;
  width: max-content;
  border: 3px solid transparent;
}
.tile {
  position: relative;
}
.tile:has([open]) {
  background: url("https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/burg.png")
    center / cover;
}
.tile:has([open] [title="10,000"]) {
  animation: rainbow 1s infinite;
}
.tile:has([open] [title="1"]) {
  filter: drop-shadow(0 0 15px var(--db-glow-color));
  background: url("https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/goldenchezburger.png")
    center / cover;
}
.submit {
  display: none;
}
:has(.game [open] [title="1"]) .submit {
  display: inline-block;
}
/*
.tile {
  position: relative;

  .tile-holder:nth-of-type(odd) & {
    background-color: rgb(181, 230, 29);
  }
  .tile-holder:nth-of-type(even) & {
    background-color: rgb(34, 177, 76);
  }
}
*/
.tile details {
  position: relative;
  width: 62px;
  height: 62px;
}
.tile summary {
  position: absolute;
  z-index: 2;
  width: 66px;
  height: 66px;

  display: block;
}
.random-holder {
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  display: flex;
  justify-content: center;
  align-items: center;
}
.block {
  position: absolute;
  z-index: 3;
  width: 66px;
  height: 66px;
}
.verify-embed {
  background-color: white;
  color: black;
  text-align: center;
  width: -webkit-fill-available;
  padding: 25px;
  margin: 10px 0;
}
.verify-embed:has(.verify-button[open]) {
  text-align: initial;
  color: white;
  background: url("https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/grassrobloxnew.jpg?v=1738243953938")
    center / cover;
}
.verify-embed:has(.verify-button[open]) > .verify-button > summary {
  display: none;
}
.verify-embed:has(.verify-button[open]) > :not(.verify-button) {
  display: none;
}
.popup:has(.verify-button:not([open])) :is(.toolMode, .hideuntgame) {
  display: none;
}
.popup:has(.verify-button[open]) :is(.toolMode, .hideuntgame) {
  display: block;
}
.toolMode:not([open]) {
  background: url("https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/magic-wand_1fa84.png?v=1738154888124")
    center / cover repeat-x;
}
.toolMode[open] {
  background: url("https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/hammer_1f528.png?v=1738154891980")
    center / cover repeat-x;
}
.small {
  color: gray;
  margin: 0 5px;
  font-size: smaller;
}
.tile .random {
  user-select: none;
}
.tile .random::after {
  content: attr(title);
  z-index: 4;
}
/*
THIS SHIT TOOK ME A FUCKING HOUR TO UNDERSTAND!!! SO CONFUSING TO THE POINT I HAD TO ADD NOTES

 .toolMode:not([open]) = wand
 .tile-holder:has(.tile :not([open])) = not showing number
*/
.popup:has(.toolMode[open]) .tile-holder:has(.tile :not([open])) .block {
  /* delete mode + not showing number = not allowed to click */
  display: block;
}
.popup:has(.toolMode[open]) .tile-holder:has(.tile [open]) .block {
  /* delete mode + showing number = allowed to click */
  display: none;
}
.popup:has(.toolMode:not([open])) .tile-holder:has(.tile :not([open])) .block {
  /* create mode + not showing number = allowed to click */
  display: none;
}
.popup:has(.toolMode:not([open])) .tile-holder:has(.tile [open]) .block {
  /* create mode + showing number = not allowed to click */
  display: block;
}
.popup:has(.toolMode[open]) .tile-holder:has(.tile [open]):hover {
  border: 3px solid red;
}
.popup:has(.toolMode:not([open])) .tile-holder:has(.tile :not([open])):hover {
  background-color: #ffffff42;
}
.popup:has(.toolMode:not([open])) .tile-holder:has(.tile [open]):hover {
  background-color: transparent;
}
.popup:has(.verify-button[open]):has(.toolMode:not([open]))
  .verify-embed:hover {
  cursor: url(https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/wandCursor.png?v=1738247878390),
    auto;
}
.popup:has(.verify-button[open]):has(.toolMode[open]) .verify-embed:hover {
  cursor: url(https://cdn.glitch.global/39c26745-7068-481c-98bc-5f9f1aab8f32/hammerCursor.png?v=1738247893071),
    auto;
}