/* Phrase Guess — Playnesta-original stylesheet.
   The base tile / keyboard / alert rules and the two-pass scoring colours derive
   from the MIT-licensed wordle-clone by WebDevSimplified (see LICENSE.txt and
   NOTICE.md); the phrase board, the word gaps, the letter keyboard and the shell
   are Playnesta-original.

   Sizing rule (see NOTICE.md): the whole board has to fit one phone stage
   (348x261 in production) without vertical overflow, so the tile size is derived
   from the viewport and from the sharpest answer shape rather than hard-coded:
   --slots counts one slot per letter plus one slot per word gap. */
*, *::after, *::before {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: hsl(240, 3%, 7%);
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: .4em;
  overflow: hidden;
  font-size: clamp(.5rem, 2.5vmin, 1.5rem);
  color: white;
}

.pn-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
}

.pn-title {
  font-size: 1.15em;
  font-weight: bold;
  letter-spacing: .02em;
}

.pn-status {
  font-size: .72em;
  opacity: .75;
  text-align: center;
}

.board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guess-grid {
  --slots: 12;
  --cell: min(3.2em, calc((100vw - 1em) / var(--slots)), calc((var(--stage-h, 100vh) - 148px) / 7.4));
  display: flex;
  flex-direction: column;
  gap: .2em;
}

.guess-row {
  display: flex;
  justify-content: center;
  gap: .18em;
}

.word {
  display: flex;
  gap: .18em;
}

.word + .word {
  margin-left: .55em;
}

.tile {
  width: var(--cell);
  height: var(--cell);
  font-size: calc(var(--cell) * .58);
  color: white;
  border: .06em solid hsl(240, 2%, 23%);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  text-transform: uppercase;
  transition: transform 250ms linear;
}

.tile[data-state="active"] {
  border-color: hsl(200, 1%, 34%);
}

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

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

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

.tile.shake {
  animation: shake 250ms ease-in-out;
}

.tile.dance {
  animation: dance 500ms ease-in-out;
}

.tile.flip {
  transform: rotateX(90deg);
}

@keyframes shake {
  10% { transform: translateX(-5%); }
  30% { transform: translateX(5%); }
  50% { transform: translateX(-7.5%); }
  70% { transform: translateX(7.5%); }
  90% { transform: translateX(-5%); }
  100% { transform: translateX(0); }
}

@keyframes dance {
  20% { transform: translateY(-50%); }
  40% { transform: translateY(5%); }
  60% { transform: translateY(-25%); }
  80% { transform: translateY(2.5%); }
  90% { transform: translateY(-5%); }
  100% { transform: translateY(0); }
}

.keyboard {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .22em;
  padding-bottom: .2em;
}

.key-row {
  display: flex;
  justify-content: center;
  gap: .22em;
}

.key {
  flex: 1 1 0;
  max-width: 3.1em;
  height: min(2.5em, calc(var(--cell, 2.2em) * .95));
  min-width: 0;
  font-size: min(.95em, calc(var(--cell, 2.2em) * .42));
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(
    var(--hue, 200),
    var(--saturation, 1%),
    calc(var(--lightness-offset, 0%) + var(--lightness, 51%))
  );
  color: white;
  fill: white;
  border-radius: .25em;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.key.wide {
  flex: 1.4 1 0;
  max-width: 4.4em;
}

.key:hover, .key:focus {
  --lightness-offset: 10%;
}

.key.wrong {
  --lightness: 23%;
}

.key.wrong-location {
  --hue: 49;
  --saturation: 51%;
  --lightness: 47%;
}

.key.correct {
  --hue: 115;
  --saturation: 29%;
  --lightness: 43%;
}

.pn-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: .5em;
  padding-top: .3em;
}

.pn-btn {
  font-size: .8em;
  padding: .45em .9em;
  min-height: 1.9em;
  border: 0;
  border-radius: .3em;
  background: #2f81f7;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.pn-btn.ghost {
  background: hsl(240, 2%, 23%);
}

.rules {
  flex: 0 0 auto;
  max-height: 40vh;
  overflow: auto;
  font-size: .68em;
  line-height: 1.35;
  background: hsl(240, 3%, 12%);
  border-radius: .3em;
  padding: .5em .7em;
  margin-top: .3em;
}

.rules p {
  margin: .4em 0;
}

.sw {
  padding: 0 .25em;
  border-radius: .15em;
  color: #fff;
}

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

.alert-container {
  position: fixed;
  top: 8vh;
  left: 50vw;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alert {
  pointer-events: none;
  background-color: hsl(204, 7%, 85%);
  color: hsl(240, 3%, 7%);
  padding: .6em;
  border-radius: .25em;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
  margin-bottom: .5em;
  max-width: 92vw;
  word-break: break-word;
  text-align: center;
  font-size: .85em;
}

.alert:last-child {
  margin-bottom: 0;
}

.alert.hide {
  opacity: 0;
}