/* Letter Braid — Playnesta original styling.
   Palette matches the other Playnesta playables (dark shell + the same
   green / yellow / gray tile states). */

*, *::after, *::before {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  background-color: hsl(240, 3%, 7%);
  color: white;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

.braid-goal {
  margin: 0 0 .75em;
  text-align: center;
  font-size: clamp(.85rem, 3.4vw, 1.05rem);
  color: hsl(240, 3%, 78%);
  line-height: 1.45;
}

.braid-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.4vw, 8px);
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.braid-tile {
  /* Aspect-ratio boxes keep the grid square at any width, so 390px gets
     ~64px tiles with no sideways scroll. */
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 8.5vw, 2.4rem);
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background-color: hsl(240, 2%, 15%);
  border: .06em solid hsl(240, 2%, 23%);
  border-radius: .18em;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: transform 140ms ease, background-color 140ms ease;
}

.braid-tile:hover {
  background-color: hsl(240, 2%, 20%);
}

.braid-tile:focus-visible {
  outline: .12em solid hsl(200, 70%, 60%);
  outline-offset: .12em;
}

.braid-tile.selected {
  border-color: hsl(200, 70%, 60%);
  box-shadow: 0 0 0 .14em hsl(200, 70%, 60%);
  transform: scale(1.06);
}

.braid-tile[data-state="wrong"] {
  border-color: transparent;
  background-color: hsl(240, 2%, 23%);
}

.braid-tile[data-state="wrong-location"] {
  border-color: transparent;
  background-color: hsl(49, 51%, 47%);
  color: hsl(240, 3%, 7%);
}

.braid-tile[data-state="correct"] {
  border-color: transparent;
  background-color: hsl(115, 29%, 43%);
}

.braid-tile.pop {
  animation: braid-pop 220ms ease;
}

@keyframes braid-pop {
  0% { transform: scale(1); }
  45% { transform: scale(.86); }
  100% { transform: scale(1); }
}

.braid-meta {
  margin: 1em 0 .35em;
  text-align: center;
  font-size: clamp(.85rem, 3.2vw, 1rem);
  color: hsl(240, 3%, 78%);
}

.braid-meta strong[data-left="0"] {
  color: hsl(0, 62%, 62%);
}

.braid-legend {
  margin: 0;
  text-align: center;
  font-size: clamp(.7rem, 2.7vw, .85rem);
  color: hsl(240, 3%, 62%);
  line-height: 2;
}

.legend-chip {
  display: inline-block;
  width: .85em;
  height: .85em;
  border-radius: .15em;
  vertical-align: -0.1em;
  margin-left: .5em;
}

.legend-chip:first-child {
  margin-left: 0;
}

.legend-chip.correct { background-color: hsl(115, 29%, 43%); }
.legend-chip.wrong-location { background-color: hsl(49, 51%, 47%); }
.legend-chip.wrong { background-color: hsl(240, 2%, 23%); }

.alert-container {
  position: fixed;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(94vw, 520px);
  pointer-events: none;
}

.alert {
  background-color: white;
  color: hsl(240, 3%, 7%);
  padding: .7em 1.1em;
  border-radius: .3em;
  margin-bottom: .55em;
  font-size: clamp(.8rem, 3.2vw, 1rem);
  font-weight: bold;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  opacity: 1;
  transition: opacity 400ms ease;
}

.alert.hide {
  opacity: 0;
}