/*Wordle for Meta Ray-Ban Display — additive-waveguide tuned palette and motion.*/

:root {
  --correct: #3ddc84;
  --present: #ffc93c;
  --on-lit: #04140b;          /*dark text on a lit fill — emits nothing, reads as cut-out*/

  --absent-bg: #16181c;
  --absent-br: #2a2e34;
  --absent-tx: #656b73;

  --tile-br: #3d434b;         /*empty tile outline*/
  --tile-br-on: #858c96;      /*outline once a letter is typed*/

  --key-tx: #d4d8de;
  --key-cursor-bg: #262b33;

  --text: #ffffff;
  --text-dim: #b0b3b8;

  --ease-focus: cubic-bezier(0.6, 0, 0.4, 1);
  --ease-press: cubic-bezier(0.68, 0, 0.29, 1);
  --ease-color: cubic-bezier(0.4, 0.04, 0.5, 1);

  --tile: 52px;
  --key-w: 48px;
  --key-h: 40px;
  --gap: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 600px;
  height: 600px;
  overflow: hidden;
  background: #000000;        /*transparent on the additive display — the room shows through*/
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 600px;
  height: 600px;
  padding: 8px;               /*safe margin — edge content gets clipped by rubberbanding*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}

/* ---------- header ---------- */
#head {
  position: relative;
  flex: none;
  width: 372px;               /*matches the keyboard, so the wordmark centres on the same axis*/
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;        /*letter-spacing pads the right edge; pull the block back to centre*/
  color: var(--text);
}
/*taken out of flow so an empty streak cannot shift the wordmark off centre*/
.streak {
  position: absolute;
  right: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* ---------- board ---------- */
#board {
  display: grid;
  grid-template-rows: repeat(6, var(--tile));
  gap: var(--gap);
}
.row {
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  gap: var(--gap);
}
.tile {
  width: var(--tile);
  height: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--tile-br);
  border-radius: 8px;
  color: var(--text);
  transition: border-color 200ms var(--ease-color), background-color 200ms var(--ease-color);
}
.tile.filled { border-color: var(--tile-br-on); }

.tile.correct { background: var(--correct); border-color: var(--correct); color: var(--on-lit); }
.tile.present { background: var(--present); border-color: var(--present); color: var(--on-lit); }
.tile.absent  { background: var(--absent-bg); border-color: var(--absent-br); color: var(--absent-tx); }

/* ---------- keyboard: 7 x 4, 26 letters + delete + enter ---------- */
#keys {
  display: grid;
  grid-template-columns: repeat(7, var(--key-w));
  gap: var(--gap);
}
.key {
  width: var(--key-w);
  height: var(--key-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: 7px;
  color: var(--key-tx);
  opacity: 0.8;               /*idle content sits at 80% per the display guidelines*/
  /*guidelines put focus at 475ms, but that is tuned for discrete nav — at typing speed the
    cursor would lag behind the user, so this keeps the curve and shortens the duration*/
  transition: transform 130ms var(--ease-focus), background-color 130ms var(--ease-color),
              border-color 130ms var(--ease-color), opacity 130ms var(--ease-color);
}
.key.wide { font-size: 19px; }

.key.correct { background: var(--correct); border-color: var(--correct); color: var(--on-lit); opacity: 1; }
.key.present { background: var(--present); border-color: var(--present); color: var(--on-lit); opacity: 1; }
.key.absent  { background: var(--absent-bg); border-color: var(--absent-br); color: var(--absent-tx); opacity: 0.55; }

.key.cursor {
  background: var(--key-cursor-bg);
  border-color: var(--text);
  color: var(--text);
  opacity: 1;
  transform: scale(1.14);
}
.key.cursor.correct { background: var(--correct); color: var(--on-lit); }
.key.cursor.present { background: var(--present); color: var(--on-lit); }
.key.cursor.absent  { background: #2e3339; color: var(--text); opacity: 1; }

.key.pressed { animation: keypress 100ms var(--ease-press); }

/* ---------- motion ---------- */
@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.tile.pop { animation: pop 130ms var(--ease-press); }

@keyframes flip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
.tile.flip { animation: flip 340ms ease-in-out; }

@keyframes shake {
  0%, 100%     { transform: translateX(0); }
  15%, 55%     { transform: translateX(-7px); }
  35%, 75%     { transform: translateX(7px); }
  90%          { transform: translateX(-3px); }
}
.row.shake { animation: shake 500ms var(--ease-color); }

@keyframes bounce {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(-18px); }
  52%  { transform: translateY(5px); }
  74%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.tile.bounce { animation: bounce 460ms var(--ease-focus); }

@keyframes keypress {
  0%   { transform: scale(1.14); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1.14); }
}

/* ---------- toast ---------- */
.toast {
  position: absolute;
  top: 24px;                  /*24dp from top, centred — per the display guidelines*/
  left: 50%;
  transform: translate(-50%, -10px);
  max-width: 536px;
  padding: 10px 20px;
  background: #1C1E21;
  border: 1px solid #33383f;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-color), transform 200ms var(--ease-focus);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- game over ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  opacity: 1;
  transition: opacity 300ms var(--ease-color);
}
.overlay.hidden { opacity: 0; pointer-events: none; }   /*fades out rather than hard-hiding*/

.panel {
  width: 420px;
  padding: 32px 28px;
  background: #0a0a0f;        /*never #000 on a lit surface — it would emit nothing and vanish*/
  border: 1px solid #33383f;
  border-radius: 20px;
  text-align: center;
}
.verdict { font-size: 28px; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 18px; }
.verdict.win  { color: var(--correct); }
.verdict.lose { color: var(--text); }
.answer-label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--text-dim); }
.answer {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  margin: 6px 0 18px;
  color: var(--correct);
}
.stats { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.cta { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .tile.pop, .tile.flip, .tile.bounce, .row.shake, .key.pressed { animation: none; }
  .key, .tile, .toast { transition-duration: 1ms; }
}