/* Keresztrejtvény — prefix kr- */
.kr-frame {
  --kr-cell: #1c1c1e;
  --kr-word: color-mix(in srgb, var(--game) 30%, #1c1c1e);
  --kr-cur: var(--game);
  --kr-key: color-mix(in srgb, var(--gold) 16%, #1c1c1e);
  display: flex; flex-direction: column; gap: 12px;
}

/* --- Current clue -------------------------------------------------------------- */
.kr-bar {
  display: flex; align-items: center; gap: 4px; min-height: 54px; padding: 0 6px;
  background: #1c1c1e; border-radius: 16px;
}
.kr-bar-text { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-weight: 550; line-height: 1.25; min-width: 0; color: #fff; }
.kr-bar-text > * { animation: kr-clue .3s var(--ease-out); }
@keyframes kr-clue { from { opacity: .4; } }
.kr-bar-num {
  flex: none; padding: 3px 8px; border-radius: 999px; background: var(--game); color: #fff;
  font-family: var(--font); font-size: .78rem; font-weight: 650; white-space: nowrap;
}
.kr-nav {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: background-color .15s, transform .25s var(--ease-spring);
}
.kr-nav:active { transform: scale(.9); }
@media (hover: hover) { .kr-nav:hover { background: rgba(255, 255, 255, .16); } }

/* --- Megfejtés ------------------------------------------------------------------------ */
.kr-key-note { text-align: center; font-size: .88rem; font-weight: 500; color: var(--muted); margin: -2px 0 -4px; }
.kr-key-note b { color: var(--gold); font-weight: 600; }
.kr-key-note.kr-key-done { font-size: 1.05rem; color: #fff; animation: fx-pop .45s var(--ease-spring); }
.kr-key-note.kr-key-done b { font-family: var(--font); font-weight: 650; letter-spacing: .06em; color: var(--good); }

/* --- Grid ------------------------------------------------------------------------- */
.kr-board {
  position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  gap: 3px;
}
.kr-black { background: transparent; }
.kr-cell {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0;
  background: var(--kr-cell); border-radius: max(4px, calc(100cqw / var(--n) * .16)); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background-color .16s;
}
.kr-cell i {
  position: absolute; left: 3px; top: 2px; font-style: normal; font-weight: 600;
  font-size: max(8px, calc(100cqw / var(--n) * .22)); line-height: 1; color: var(--muted);
}
.kr-cell b {
  font-family: var(--font); font-weight: 600; line-height: 1;
  font-size: calc(100cqw / var(--n) * .5); color: #fff; padding-top: 6%;
}
.kr-cell.kr-key { background: var(--kr-key); }
.kr-cell.kr-key::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 65%, transparent);
}
.kr-cell.kr-word { background: var(--kr-word); }
.kr-cell.kr-cur { background: var(--kr-cur); }
.kr-cell.kr-word i, .kr-cell.kr-cur i { color: rgba(255, 255, 255, .7); }
.kr-cell.kr-revealed b { color: var(--accent); }
.kr-cell.kr-cur.kr-revealed b { color: #fff; }
.kr-cell.kr-hint { box-shadow: inset 0 0 0 2px var(--warn); }
.kr-cell.kr-pop b { animation: kr-pop .3s var(--ease-spring); }
@keyframes kr-pop { 0% { transform: scale(.6); opacity: .3; } }
@media (hover: hover) { .kr-cell:not(.kr-cur):not(.kr-word):hover { background: #2c2c2e; } }
.kr-locked .kr-cell { cursor: default; }
/* Solved: the megfejtés turns green; the rest of the grid can still be filled in. */
.kr-solved .kr-cell.kr-key:not(.kr-cur):not(.kr-word) { background: color-mix(in srgb, var(--good) 22%, #1c1c1e); }
.kr-solved .kr-cell.kr-key::after { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 60%, transparent); }
.kr-solved .kr-cell.kr-key b { color: var(--good); }
.kr-solved .kr-cell.kr-key.kr-cur b { color: #fff; }

/* --- Clue lists ------------------------------------------------------------------------ */
.kr-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
@media (max-width: 560px) { .kr-lists { grid-template-columns: 1fr; } }
.kr-lists h3 {
  margin: 0 0 6px 8px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.kr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kr-item {
  display: flex; gap: 8px; padding: 6px 10px; border-radius: 10px; cursor: pointer; line-height: 1.3; font-size: .95rem; color: #fff;
  transition: background-color .15s;
}
.kr-item b { flex: none; min-width: 1.4em; text-align: right; font-weight: 600; color: var(--accent); }
.kr-item.kr-active { background: color-mix(in srgb, var(--game) 26%, transparent); }
.kr-item.kr-done span { color: var(--muted); }
@media (hover: hover) { .kr-item:not(.kr-active):hover { background: rgba(255, 255, 255, .06); } }
.kr-locked .kr-item { cursor: default; }

/* --- Native input: an invisible field that sits on the selected cell -------------------- */
.kr-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 */
  pointer-events: none; /* taps go to the cell below (a second tap switches direction) */
  -webkit-tap-highlight-color: transparent;
}
.kr-focus .kr-cell.kr-cur { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }