/* Neuriosity — Logic Locks playfield.
   Shared chrome lives in ../_shared/game-kit.css */

/* The frame is 4:3, so there is width to spare and height to save. Clues go
   down the left, everything you touch goes down the right. Stacked, the
   keypad's 44px minimum tap targets left the clue list too short to show a
   five-clue lock, and a clue you cannot see makes the puzzle unsolvable. */
.ll-board {
  display: flex;
  align-items: stretch;
  gap: calc(var(--gu) * 2.4);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.ll-clues {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--gu) * 1);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ll-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--gu) * 2);
  flex: 0 0 calc(var(--gu) * 56);
  min-height: 0;
}

/* Capped, so the marks stay next to the digits they describe instead of
   drifting to the far edge of a wide column. */
.ll-clue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  width: min(100%, calc(var(--gu) * 46));
  gap: calc(var(--gu) * 1.2);
  padding: calc(var(--gu) * 0.9) calc(var(--gu) * 1.2);
  background: #fff;
  border: calc(var(--gu) * 0.28) solid rgba(53, 86, 110, 0.2);
  border-radius: calc(var(--gu) * 2);
}

.ll-clue__code { display: flex; gap: calc(var(--gu) * 0.6); }

.ll-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gu) * 5);
  height: calc(var(--gu) * 5);
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 3);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #eef3f7;
  border-radius: calc(var(--gu) * 1.2);
}

.ll-clue__marks {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gu) * 0.55);
  justify-content: flex-end;
  max-width: 44%;
}

.ll-pip {
  display: block;
  width: calc(var(--gu) * 2);
  height: calc(var(--gu) * 2);
  border-radius: 50%;
}

/* Filled means right digit, right slot. Hollow means right digit, wrong slot.
   Shape carries the difference as well as colour, so the clue still reads
   without relying on telling green from amber. */
.ll-pip--exact { background: #0ea85a; }
.ll-pip--near { background: transparent; box-shadow: inset 0 0 0 calc(var(--gu) * 0.45) #d18a05; }
.ll-pip--none {
  background: transparent;
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.3) rgba(6, 43, 99, 0.2);
  border-radius: calc(var(--gu) * 0.5);
}

/* The rule this lock plays by. Permanent, because the clue list cannot be
   read without it. */
.ll-rule {
  flex: 0 0 auto;
  margin: 0;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.6);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- your entry ---------- */

.ll-entry {
  display: flex;
  justify-content: center;
  gap: calc(var(--gu) * 1.4);
  flex: 0 0 auto;
}

.ll-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gu) * 9);
  height: calc(var(--gu) * 10);
  color: var(--navy, #062b63);
  font-size: calc(var(--gu) * 5);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: calc(var(--gu) * 0.4) dashed rgba(53, 86, 110, 0.4);
  border-radius: calc(var(--gu) * 1.6);
}

.ll-slot.is-filled { border-style: solid; border-color: #35566e; }

.ll-entry.is-open .ll-slot {
  border-color: var(--green, #0ea85a);
  background: rgba(14, 168, 90, 0.1);
}

.ll-entry.is-wrong .ll-slot {
  border-color: var(--coral, #f15f6d);
  background: rgba(241, 95, 109, 0.08);
  animation: ll-shake 380ms ease;
}

@keyframes ll-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--gu) * -1)); }
  75% { transform: translateX(calc(var(--gu) * 1)); }
}

/* ---------- keypad ---------- */

.ll-pad {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gu) * 1.4);
  flex: 0 0 auto;
  width: 100%;
}

.ll-digits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--gu) * 1.2);
}

.ll-digit {
  min-height: max(44px, calc(var(--gu) * 10));
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 4);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: calc(var(--gu) * 0.32) solid rgba(6, 43, 99, 0.16);
  border-radius: calc(var(--gu) * 1.8);
  cursor: pointer;
  transition: transform 110ms ease, border-color 110ms ease;
}

.ll-digit:hover { border-color: rgba(53, 86, 110, 0.7); }
.ll-digit:active { transform: scale(0.95); }

.ll-digit:focus-visible,
.ll-act:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #35566e;
  outline-offset: calc(var(--gu) * 0.3);
}

.ll-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: calc(var(--gu) * 1.2); }

.ll-act {
  min-height: max(44px, calc(var(--gu) * 9));
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 3);
  font-weight: 800;
  background: #fff;
  border: calc(var(--gu) * 0.32) solid rgba(6, 43, 99, 0.16);
  border-radius: 999px;
  cursor: pointer;
}

.ll-act--go {
  color: #fff;
  background: #35566e;
  border-color: #35566e;
}

.ll-act--go:disabled {
  color: rgba(255, 255, 255, 0.72);
  background: #9db0be;
  border-color: #9db0be;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .ll-digit, .ll-entry.is-wrong .ll-slot { transition: none; animation: none; }
}