/* Lexilock — lock/key palette. locked = green pin, present = amber, absent = slate. Shape cues on every state. */
:root {
  --lk-ok: #17803f; --lk-ok-ink: #fff; --lk-pr: #f0b429; --lk-pr-ink: #231d0a; --lk-ab: #5b586c; --lk-ab-ink: #fff;
  --lk-empty: #fff; --lk-key: #e3dfd3; --lk-key-ink: #1d1b24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lk-ok: #2a9d5b; --lk-pr: #e0a21a; --lk-ab: #3a3848; --lk-empty: #1f1d27; --lk-key: #3b3848; --lk-key-ink: #f1eff6; }
}
:root[data-theme="dark"] { --lk-ok: #2a9d5b; --lk-pr: #e0a21a; --lk-ab: #3a3848; --lk-empty: #1f1d27; --lk-key: #3b3848; --lk-key-ink: #f1eff6; }
/* high-contrast option: blue / orange / near-black */
.lx.hc { --lk-ok: #0a56c8; --lk-ok-ink: #fff; --lk-pr: #ff8a1f; --lk-pr-ink: #000; --lk-ab: #26242f; --lk-ab-ink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx.hc { --lk-ok: #4a95ff; --lk-ok-ink: #00132e; --lk-pr: #ff9d3f; --lk-pr-ink: #000; --lk-ab: #0c0b10; } }
:root[data-theme="dark"] .lx.hc { --lk-ok: #4a95ff; --lk-ok-ink: #00132e; --lk-pr: #ff9d3f; --lk-pr-ink: #000; --lk-ab: #0c0b10; }

.lx { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lx-bar { width: 100%; max-width: 360px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lx-opt { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 650; margin: 0; cursor: pointer; min-height: 44px; }
.lx-opt input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--lk-ok); }
.lx-opt input:disabled + span { opacity: .6; }
.lx-lock { width: 34px; height: 34px; flex: none; }
.lx-lock svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lx-opt-note:empty { display: none; }
.lx-lock .shackle { transform-origin: 6px 20px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.lx-lock.open .shackle { transform: translateY(-3px) rotate(-22deg); }
.lx-lock .body { fill: var(--ink); } .lx-lock .shackle { stroke: var(--ink); } .lx-lock .hole { fill: var(--bg); }
.lx-lock.open .body { fill: var(--lk-ok); } .lx-lock.open .shackle { stroke: var(--lk-ok); }

.lx-how { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.lx-how summary { cursor: pointer; font-weight: 700; padding: 10px 0; min-height: 44px; list-style-position: inside; }
.lx-how summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx-how p { margin: 6px 0; font-size: .9rem; }
.lx-ex { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: .9rem; }
.lx-ex .row5 { display: flex; gap: 3px; flex: none; }
.lx-ex .t { width: 28px; height: 28px; font-size: .95rem; border-radius: 6px; }

.lx-board { display: grid; gap: 6px; width: min(100%, 300px); }
.lx-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.t { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-weight: 800; font-size: clamp(1.4rem, 8vw, 2rem); text-transform: uppercase; border: 2px solid var(--line); border-radius: 10px; background: var(--lk-empty); color: var(--ink); user-select: none; }
.t.filled { border-color: var(--muted); animation: lx-pop .12s; }
.t[data-s] { border-color: transparent; }
.t[data-s="2"] { background: var(--lk-ok); color: var(--lk-ok-ink); }
.t[data-s="1"] { background: var(--lk-pr); color: var(--lk-pr-ink); }
.t[data-s="0"] { background: var(--lk-ab); color: var(--lk-ab-ink); }
/* shape cues (not colour only): locked = round pin, present = diamond, absent = bar */
.t[data-s]::after, .key[data-s]::after { content: ''; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; background: currentColor; opacity: .85; }
.t[data-s="2"]::after, .key[data-s="2"]::after { border-radius: 50%; }
.t[data-s="1"]::after, .key[data-s="1"]::after { transform: rotate(45deg); }
.t[data-s="0"]::after, .key[data-s="0"]::after { height: 3px; top: 7px; border-radius: 2px; }
.lx-ex .t::after { right: 3px; top: 3px; width: 5px; height: 5px; } .lx-ex .t[data-s="0"]::after { height: 2px; top: 4px; }
.lx.hc .t[data-s]::after, .lx.hc .key[data-s]::after { width: 10px; height: 10px; right: 4px; top: 4px; opacity: 1; }
.lx.hc .t[data-s="0"]::after, .lx.hc .key[data-s="0"]::after { height: 4px; top: 7px; }
.lx.hc .t[data-s="2"] { outline: 2px solid var(--ink); outline-offset: -5px; }
.t.flip { animation: lx-flip .5s ease both; animation-delay: calc(var(--i) * .22s); }
.lx-row.shake { animation: lx-shake .45s; }
@keyframes lx-pop { 50% { transform: scale(1.08); } }
@keyframes lx-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes lx-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.t.bounce { animation: lx-bounce .6s ease both; animation-delay: calc(var(--i) * .08s); }
@keyframes lx-bounce { 40% { transform: translateY(-10px); } 70% { transform: translateY(2px); } }

.lx-msg { min-height: 1.4em; font-weight: 700; text-align: center; font-size: .95rem; }
.lx-msg.err { color: var(--accent); }
.lx-kb { width: 100%; max-width: 420px; display: grid; gap: 6px; touch-action: manipulation; }
.lx-kr { display: flex; gap: 4px; justify-content: center; }
.key { position: relative; flex: 1 1 0; min-width: 0; height: 50px; border: 0; border-radius: 8px; background: var(--lk-key); color: var(--lk-key-ink); font: inherit; font-weight: 750; font-size: 1rem; text-transform: uppercase; cursor: pointer; padding: 0; }
.key.wide { flex: 1.5 1 0; font-size: .78rem; }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.key[data-s="2"] { background: var(--lk-ok); color: var(--lk-ok-ink); }
.key[data-s="1"] { background: var(--lk-pr); color: var(--lk-pr-ink); }
/* keyboard only: letters tried and NOT in the word turn clearly red (board tiles keep the slate colour). The bar marker stays as the colour-blind cue. */
.lx { --lk-miss: #c62828; --lk-miss-ink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx { --lk-miss: #ff6b5c; --lk-miss-ink: #2a0906; } }
:root[data-theme="dark"] .lx { --lk-miss: #ff6b5c; --lk-miss-ink: #2a0906; }
.lx.hc { --lk-miss: #a3001f; --lk-miss-ink: #fff; } /* high contrast: deep red, distinct from the blue (locked) and orange (elsewhere) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx.hc { --lk-miss: #ff4d6d; --lk-miss-ink: #1a0005; } }
:root[data-theme="dark"] .lx.hc { --lk-miss: #ff4d6d; --lk-miss-ink: #1a0005; }
.key[data-s="0"] { background: var(--lk-miss); color: var(--lk-miss-ink); }
.key[data-s]::after { right: 3px; top: 3px; width: 5px; height: 5px; } .key[data-s="0"]::after { height: 2px; top: 4px; }
.lx-rs { text-align: center; }
.lx-rs .word { font-size: 1.5rem; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; margin: 4px 0; }
.lx-rs .grid { font-size: 1.15rem; line-height: 1.25; letter-spacing: 2px; margin: 6px 0; }
.hardbadge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: var(--bg); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .t.flip, .t.bounce, .lx-row.shake, .t.filled { animation: none !important; } .lx-lock .shackle { transition: none; } }
.lx [hidden] { display: none !important; }