/* Titkosírás (cryptogram) — prefix cr- */
.cr-frame {
  --cr-t: 32px;
  --cr-cell: #1c1c1e;
  --cr-same: color-mix(in srgb, var(--game) 30%, #1c1c1e);
  --cr-cur: var(--game);
  display: flex; flex-direction: column; gap: 16px;
}

/* --- Board: words of tiles ------------------------------------------------------ */
.cr-board {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  column-gap: calc(var(--cr-t) * .5); row-gap: 14px;
  padding: 8px 4px; min-height: 150px;
}
.cr-word { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 100%; }
.cr-tile, .cr-punct {
  width: var(--cr-t); display: inline-flex; flex-direction: column; align-items: center;
}
.cr-tile { cursor: pointer; }
.cr-guess {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: calc(var(--cr-t) * 1.12);
  border-radius: max(6px, calc(var(--cr-t) * .24));
  background: var(--cr-cell); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: var(--font); font-weight: 600; font-size: calc(var(--cr-t) * .6); line-height: 1;
  color: #fff;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.cr-code {
  margin-top: 4px; font-size: max(10px, calc(var(--cr-t) * .34)); font-weight: 550; line-height: 1;
  color: var(--muted); letter-spacing: .02em;
}
.cr-punct {
  justify-content: flex-start; width: auto; min-width: calc(var(--cr-t) * .3);
  height: calc(var(--cr-t) * 1.12); 
  font-family: var(--font); font-weight: 600; font-size: calc(var(--cr-t) * .6); line-height: calc(var(--cr-t) * 1.12);
  color: #fff;
}
.cr-tile.cr-same .cr-guess { background: var(--cr-same); }
.cr-tile.cr-cur .cr-guess { background: var(--cr-cur); color: #fff; }
.cr-tile.cr-cur .cr-code, .cr-tile.cr-same .cr-code { color: var(--accent); }
.cr-tile.cr-given { cursor: default; }
.cr-tile.cr-given .cr-guess { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); color: var(--accent); }
.cr-tile.cr-given .cr-code { opacity: .6; }
@media (hover: hover) {
  .cr-tile:not(.cr-given):not(.cr-cur):not(.cr-same):hover .cr-guess { background: #2c2c2e; }
}
.cr-tile.cr-pop .cr-guess { animation: cr-pop .35s var(--ease-spring); }
.cr-tile.cr-moved .cr-guess { animation: cr-moved .7s var(--ease-out); }
.cr-tile.cr-shake { animation: fx-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes cr-pop { 0% { transform: scale(.78); } }
@keyframes cr-moved { 0% { background: color-mix(in srgb, var(--warn) 55%, #1c1c1e); transform: scale(.9); } }
.cr-locked-board .cr-tile { cursor: default; }
.cr-solved .cr-tile .cr-guess { background: color-mix(in srgb, var(--good) 22%, #1c1c1e); color: #fff; }
.cr-solved .cr-tile.cr-given .cr-guess { background: color-mix(in srgb, var(--good) 22%, #1c1c1e); box-shadow: none; color: #fff; }

/* --- Frequency helper ---------------------------------------------------------------- */
.cr-freq-wrap { display: flex; flex-direction: column; gap: 8px; }
.cr-freq-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cr-freq { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.cr-chip {
  display: inline-grid; grid-template-rows: auto auto auto; justify-items: center; gap: 2px;
  min-width: 32px; padding: 5px 3px 4px; border-radius: 10px;
  background: rgba(255, 255, 255, .08); border: 0; color: #fff;
  font: inherit; cursor: pointer; line-height: 1.05;
  transition: background-color .15s, box-shadow .15s, transform .25s var(--ease-spring);
}
.cr-chip:hover { background: rgba(255, 255, 255, .14); }
.cr-chip:active { transform: scale(.92); }
.cr-chip-code { font-weight: 600; font-size: .85rem; }
.cr-chip-n { font-size: .68rem; font-weight: 500; color: var(--muted); }
.cr-chip-g { font-family: var(--font); font-weight: 650; font-size: .8rem; color: var(--accent); min-height: 1em; }
.cr-chip:not(.cr-done) .cr-chip-g { color: var(--muted); opacity: .6; }
.cr-chip.cr-same { background: var(--cr-same); box-shadow: inset 0 0 0 1.5px var(--game); }
.cr-chip.cr-given { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* --- Native input: an invisible field that sits on the selected tile ------------------- */
.cr-board { position: relative; }
.cr-input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; border: 0; background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; /* below 16px iOS zooms in on focus */
  -webkit-tap-highlight-color: transparent;
}
.cr-focus .cr-tile.cr-cur .cr-guess { box-shadow: 0 0 0 3px color-mix(in srgb, var(--game) 35%, transparent); }
.cr-tap { margin-top: -4px; text-align: center; font-size: .85rem; font-weight: 500; color: var(--muted); }
.cr-focus .cr-tap, .cr-locked-board .cr-tap, .cr-solved .cr-tap { display: none; }
@media (hover: hover) and (pointer: fine) { .cr-tap { display: none; } }
@media (max-width: 400px) {
  .cr-board { padding: 6px 0; }
}

/* Signs pointed out by a hint (a wrong guess in red). */
.cr-tile.cr-hint .cr-guess { box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(255, 255, 255, .35); }
.cr-tile.cr-hint .cr-code { color: #fff; }
.cr-tile.cr-hint-warn .cr-guess { box-shadow: inset 0 0 0 2px #ff6b5a; color: #ff8a7a; }
.cr-tile.cr-hint-warn .cr-code { color: #ff8a7a; }