@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

body {
  font-family: 'Lilita One', cursive;
}

html {
  background-color: #202020;
}

.waffle-wrapper {
  position: relative;
  width: 40%;
  aspect-ratio: 1; /* Maintain perfect square */
  margin: 0 auto;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
}


#waffle, #waffle-mask, #waffle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
}


#waffle-mask {
  opacity: 0;
}

.piece {
  position: absolute;
  width: 7%;
  height: auto;
  pointer-events: none;
  z-index: 5;
  transition: transform 0.1s linear;
  transform: translate(-50%, -50%);
}

.poof {
    width: 30px;
    height: 30px;
    background: radial-gradient(white, transparent);
    animation: fadeout 0.3s forwards;
    pointer-events: none;
    z-index: 9;
}

@keyframes fadeout {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(2); }
}

.invisible {
  visibility: hidden;
}

.piece.selected {
  filter: drop-shadow(0 0 0 white)
          drop-shadow(0 0 2px white)
          drop-shadow(0 0 4px white);
}

#waffle-canvas {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* Phone size */
@media (max-width: 600px) {
  .waffle-wrapper {
    width: 90%; /* Make much bigger on mobile screens */
  }

  .piece {
    width: 8%; /* Slightly larger pieces for touch interaction */
  }

  .poof {
    width: 20px;
    height: 20px;
  }
}

/* Top Bar Container */
.top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #202020;
  padding: 10px;
  gap: 20px; /* Space between the two team boxes */
}

/* Individual Team Boxes */
.team {
  padding: 10px 30px;
  background-color: #111111;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.8s ease, transform 0.2s ease;
  color: white;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
}

#strab {
  background-color: #FC293C;
}