.playfield{grid-template-columns:minmax(0,1fr) 20rem}@media (max-width: 860px){.playfield{grid-template-columns:minmax(0,1fr)}}.table{display:grid;grid-template-columns:repeat(var(--columns, 4),minmax(0,1fr));gap:.75rem;perspective:1100px}.card{position:relative;display:block;aspect-ratio:5 / 4;padding:0;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.card:hover{color:inherit}.card:focus{outline:none}.card:focus-visible .side{outline:2px solid var(--terracotta);outline-offset:2px}.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,1.4,.5,1)}.card.open .inner,.card.path .inner{transform:rotateY(180deg)}.card .side{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;overflow:hidden;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}.card .card-back{border:1px solid var(--line);background:url(card-back.jpg?v=2) center / cover no-repeat,var(--surface);box-shadow:0 4px 10px #00000059;cursor:pointer;transition:filter .2s}.card .card-back:before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--terracotta) 40%,transparent);border-radius:7px}.card:hover .card-back{border-color:var(--terracotta);filter:brightness(1.15)}.card .front{transform:rotateY(180deg);border:1px solid var(--terracotta);box-shadow:0 4px 14px #0006}.card.name .front{border-color:var(--gold)}.card .kind{position:absolute;top:.3rem;left:.5rem;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.card.path .front{border-color:var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 40%,transparent)}.card.path{cursor:default}.card.path .inner{animation:finish .6s ease-out}@keyframes finish{50%{transform:rotateY(180deg) scale(1.08)}}.card.wrong .front{border-color:var(--red);animation:wobble .4s}@keyframes wobble{0%,to{transform:rotateY(180deg) translate(0)}25%{transform:rotateY(180deg) translate(-6px)}75%{transform:rotateY(180deg) translate(6px)}}.ename{font-size:clamp(.82rem,1.6vw,1.08rem);line-height:1.25}.eco{margin-top:.35rem;font-size:.82rem;letter-spacing:.05em;color:var(--terracotta)}.move-sequence{font-size:clamp(.9rem,1.7vw,1.15rem);line-height:1.35}.move-sequence.long{font-size:clamp(.78rem,1.4vw,1rem)}.move-sequence>div{white-space:nowrap}.move-sequence .nr{margin-right:.25em;font-size:.75em;color:var(--muted)}.mini{display:block;height:84%;aspect-ratio:1;margin-top:.5rem}.mini .board{width:100%;height:100%;border-radius:2px;box-shadow:none}.mini .coordinate{display:none}.board-box h2{min-height:1.4em;font-size:1.1rem;font-weight:400}.board-box .below{min-height:1.2em;margin:.1rem 0 .6rem;font-size:.8rem;color:var(--muted)}#moves{min-height:1.4em;margin-top:.5rem}.collection{max-height:14rem;margin-top:.6rem;padding-top:.5rem;overflow:auto;border-top:1px solid var(--line)}.collection .empty{font-size:.85rem;color:var(--muted)}.collection button{display:flex;justify-content:space-between;gap:.5rem;width:100%;padding:.3rem .4rem;border:none;border-radius:6px;text-align:left;font-size:.88rem}.collection button:hover,.collection button.current{background:#8080801f;color:var(--light)}.collection button em{font-style:normal;color:var(--terracotta)}.example{display:flex;justify-content:center;align-items:center;gap:.6rem;margin:.8rem 0}.example .k{width:8rem;padding:.6rem .4rem;border:1px solid var(--terracotta);border-radius:8px}.example .k.n{border-color:var(--gold)}:root .card .side{border-radius:14px}:root .card .card-back{background-color:var(--tile)}:root .card .front{background:var(--tile)}@media (max-width: 860px){.board-box{max-width:24rem;width:100%;justify-self:center}}@media (max-width: 560px){.table{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.4rem}.card{aspect-ratio:3 / 4}.card .kind{display:none}.card .side{padding:.25rem}.ename{font-size:.72rem}.move-sequence,.move-sequence.long{font-size:.66rem}.mini{width:100%;height:auto;margin:0}.board-box #board,.board-box .below{display:none}}@media (prefers-reduced-motion: reduce){.card .inner,.card.path .inner,.card.wrong .front,.sp b{transition:none;animation:none}}