/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Fiver / Beşlik: the tray of guesses and our keycap keyboard. LogosVox original code.
 * Empty places are wells, typed letters raised neutral keycaps, scored letters
 * the board's pieces: green in place, gold in the word, a muted keycap when not.
 * Green carries a bar and gold a dot, so the two never rely on colour alone.
 */
:root {
  --fv-raised: #ffffff;
  --fv-shine: rgb(255 255 255 / 0.55);
  --fv-absent: #d2d5dc;
  --fv-absent-ink: #4f535d;
  --fv-key: #ffffff;
  --fv-key-off: rgb(13 13 13 / 0.07);
  --fv-on-gold: #2b1d03;
  --fv-key-h: 50px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fv-raised: #2d2e37;
    --fv-shine: rgb(255 255 255 / 0.07);
    --fv-absent: #3a3c46;
    --fv-absent-ink: #b7bbc5;
    --fv-key: #33343d;
    --fv-key-off: rgb(255 255 255 / 0.04);
  }
}
:root[data-theme="dark"] {
  --fv-raised: #2d2e37;
  --fv-shine: rgb(255 255 255 / 0.07);
  --fv-absent: #3a3c46;
  --fv-absent-ink: #b7bbc5;
  --fv-key: #33343d;
  --fv-key-off: rgb(255 255 255 / 0.04);
}

.fv-main {
  justify-content: flex-start;
  gap: 10px;
  padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
  max-width: 540px;
  min-height: 0;
}
.fv-side { display: contents; }
.fv-bar { order: -1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fv-status { margin: 0 0 0 4px; font-size: 13px; font-weight: 600; color: var(--lv-ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-status.is-hard { color: var(--lv-g-coral); }
.fv-tools { flex-wrap: nowrap; gap: 6px; }
.fv-tool { flex-direction: row; min-width: 0; min-height: 44px; padding: 0 12px; gap: 6px; font-size: 13px; white-space: nowrap; }
.fv-tool svg { width: 18px; height: 18px; }

/* The guesses: the board takes the room left over; app.js sizes the tiles to it. */
.fv-play { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
.fv-board { --tile: 52px; --gap: 6px; --pad: 10px; display: grid; gap: var(--gap); padding: var(--pad); }
.fv-row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gap); perspective: 640px; }
.fv-tile {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 calc(var(--tile) * 0.48) / 1 var(--lv-display);
  letter-spacing: 0;
}
.fv-row.is-current .lv-well { box-shadow: inset 0 1px 2px var(--lv-g-well-shade), inset 0 0 0 1.5px var(--lv-edge); }
.fv-typed {
  background: linear-gradient(180deg, var(--fv-shine), rgb(255 255 255 / 0) 50%), var(--fv-raised);
  color: var(--lv-ink);
  border-radius: var(--lv-g-piece-r);
  box-shadow: inset 0 0 0 1.5px var(--lv-edge-strong), inset 0 -0.14em 0 rgb(0 0 0 / 0.1), 0 1px 2px rgb(13 13 13 / 0.14);
}
.fv-correct { --c: var(--lv-g-green); }
.fv-present { --c: var(--lv-g-gold); color: var(--fv-on-gold); }
.fv-absent { --c: var(--fv-absent); color: var(--fv-absent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 -0.12em 0 rgb(0 0 0 / 0.08); }
.fv-correct::after,
.fv-present::after { content: ""; position: absolute; background: currentColor; opacity: 0.7; pointer-events: none; }
.fv-correct::after { left: 35%; right: 35%; bottom: 11%; height: max(2px, 6%); border-radius: 2px; }
.fv-present::after { top: 11%; right: 11%; width: max(4px, 11%); height: max(4px, 11%); border-radius: 50%; }

/* The keyboard: our keycaps on a tray, full width, keys at least 44 px tall. */
.fv-kb {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border-radius: var(--lv-radius-card);
  background: var(--lv-g-tray);
  border: 1px solid var(--lv-g-tray-edge);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.fv-kb-row { display: flex; gap: 4px; justify-content: center; }
.fv-key {
  --c: var(--fv-key);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  height: var(--fv-key-h);
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, var(--fv-shine), rgb(255 255 255 / 0) 50%), var(--c);
  color: var(--lv-ink);
  font: 600 18px / 1 var(--lv-display);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.1), 0 1px 1.5px rgb(13 13 13 / 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms var(--lv-ease), filter 90ms var(--lv-ease);
}
.fv-key:active { transform: translateY(1px) scale(0.95); filter: brightness(0.93); }
.fv-key--wide { flex: 1.55 1 0; max-width: 74px; }
.fv-key svg { width: 22px; height: 22px; }
.fv-key.is-correct { --c: var(--lv-g-green); color: #fff; }
.fv-key.is-present { --c: var(--lv-g-gold); color: var(--fv-on-gold); }
.fv-key.is-absent { background: var(--fv-key-off); color: var(--lv-ink-subtle); box-shadow: none; }
.fv-key.is-correct::after,
.fv-key.is-present::after { content: ""; position: absolute; background: currentColor; opacity: 0.7; }
.fv-key.is-correct::after { left: 34%; right: 34%; bottom: 7px; height: 2px; border-radius: 2px; }
.fv-key.is-present::after { top: 6px; right: 6px; width: 4px; height: 4px; border-radius: 50%; }

/* The answer on the lose screen, as keycaps. */
.lv-card .fv-answer { display: flex; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.fv-answer span { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font: 700 22px / 1 var(--lv-display); }

/* Notes about a guess show over the board, not over the keys. */
.lv-toast { bottom: auto; top: calc(var(--lv-shell-h, 56px) + 12px); }

/* Tall phones: the keyboard grows to a thumb's size. */
@media (min-height: 800px) and (max-width: 719.98px) { :root { --fv-key-h: 56px; } .fv-key { font-size: 20px; } }
@media (max-height: 760px) { :root { --fv-key-h: 46px; } }
@media (max-height: 640px) { :root { --fv-key-h: 44px; } .fv-main { gap: 8px; } }

/* Phones held sideways: the guesses on the left, the keyboard beside them. */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --fv-key-h: 44px; }
  .fv-main { align-items: stretch; gap: 14px; padding-top: 6px; padding-bottom: 6px; max-width: 900px; }
  .fv-play { flex: 0.8 1 0; width: auto; }
  .fv-main > .fv-side { flex: 1 1 0; min-width: 0; max-width: 560px; gap: 8px; }
  .fv-bar { order: 0; }
  .fv-kb { padding: 5px; gap: 5px; }
}