/* NxN solver pages /2x2-loeser/, /4x4-loeser/, /5x5-loeser/ (markup: src/de/partials/loeser-app.html, logic: app-nxn-loeser.js) */
.lz { max-width: 1060px; margin: 0 auto 30px; padding: 18px 20px 22px; position: relative; overflow: hidden; scroll-margin-top: 76px; }
.lz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--c-R) 0 16.66%, var(--c-L) 0 33.33%, var(--c-D) 0 50%, var(--c-F) 0 66.66%, var(--c-B) 0 83.33%, var(--c-U) 0); }
.lz .w-steps { margin-top: 4px; }
.lz-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; }
.lz-tabs { display: grid; grid-template-columns: repeat(var(--faces, 6), 1fr); gap: 6px; margin-bottom: 12px; }
.lz-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 2px 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--muted); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; position: relative; transition: border-color .15s, color .15s; }
.lz-tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.lz-tab.on { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.lz-tab.full::after { content: "✓"; position: absolute; top: -7px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
.lz-thumb { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 1px; width: 30px; height: 30px; padding: 2px; background: var(--cv-plastic); border-radius: 5px; }
.lz-thumb i { display: block; border-radius: 1.5px; background: #3a3f4b; }
.lz-hold { min-height: 4.2em; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg3); font-size: .95rem; line-height: 1.45; }
.lz-face { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; padding: 8px; background: var(--cv-plastic); border-radius: 16px; touch-action: none; user-select: none; }
.lz-cell { border: 0; border-radius: 8px; background: var(--k, #3a3f4b); cursor: pointer; transition: transform .08s, box-shadow .12s; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); padding: 0; }
.lz-cell.empty { background: #2b2f39; background-image: radial-gradient(circle, rgba(255,255,255,.18) 2px, transparent 2.5px); }
.lz-cell:active { transform: scale(.94); }
.lz-cell.unsure { position: relative; box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), inset 0 0 0 5px rgba(0,0,0,.35); }
.lz-cell.unsure::after { content: "?"; position: absolute; right: 4px; top: 2px; font: 800 .9rem/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.lz-nface i.unsure { box-shadow: inset 0 0 0 2px #fff; }
.lz-start { padding: 4px 0 6px; } .lz-start .w-h { text-align: center; font-size: 1.15rem; margin: 4px 0 14px; }
.lz-scannote { margin: 0 0 8px; } .lz-scannote .btn { margin-left: 4px; }
.nscan-mini { flex: none; width: 77px; height: 77px; display: flex; align-items: center; justify-content: center; }
.nscan-faces .f { width: 58px; }
.lz-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lz-facebar { display: flex; justify-content: center; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.lz-pal { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 6px; }
.lz-color { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--text); font: inherit; cursor: pointer; position: relative; transition: border-color .12s, transform .12s; }
.lz-color.on { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.lz-swatch { width: 30px; height: 30px; border-radius: 8px; background: var(--k); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.15); }
.lz-cname { font-size: .74rem; font-weight: 700; }
.lz-cnt { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lz-color.done .lz-cnt { color: var(--ok); font-weight: 700; }
.lz-color.over .lz-cnt { color: var(--bad); font-weight: 800; }
.lz-color kbd { position: absolute; top: 3px; left: 5px; font-size: .62rem; color: var(--muted); font-family: inherit; }
.lz-side3d { display: flex; flex-direction: column; align-items: center; gap: 8px; position: sticky; top: 84px; }
.lz-prevbox { width: 100%; display: flex; justify-content: center; min-height: 300px; }
.lz-progress { width: 100%; max-width: 300px; }
.lz-progress .bar { height: 8px; border-radius: 99px; background: var(--bg3); overflow: hidden; }
.lz-progress .bar::before { content: ""; display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--c-F), var(--accent)); transition: width .25s; }
.lz-progress .small { display: block; text-align: center; margin-top: 5px; }
.lz-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lz .w-nav { margin-top: 14px; }
#lz-next.ready { box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
/* check */
.lz-msg { max-width: 640px; margin: 0 auto 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); background: color-mix(in srgb, var(--bad) 6%, var(--bg2)); }
.lz-msg ul { margin: 6px 0 8px; padding-left: 20px; } .lz-msg li { margin: 4px 0; }
.lz-msghead { font-weight: 800; font-size: 1.08rem; margin: 0 0 4px; }
.lz-msg .btn { margin-top: 8px; white-space: normal; }
.lz-netgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 120px)); grid-template-areas: ". u . ." "l f r b" ". d . ."; gap: 8px; justify-content: center; }
.lz-nface { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; width: 100%; aspect-ratio: 1; padding: 4px; border: 0; border-radius: 9px; background: var(--cv-plastic); cursor: pointer; position: relative; }
.lz-nface i { display: block; border-radius: 3px; background: #3a3f4b; }
.lz-nface i.bad { outline: 3px solid var(--bad); outline-offset: -1px; animation: lz-blink 1.2s ease-in-out infinite; position: relative; z-index: 1; }
.lz-nface.fixme { outline: 4px solid var(--warn); outline-offset: 3px; animation: lz-pulse 1.4s ease-in-out infinite; }
@keyframes lz-pulse { 50% { outline-color: color-mix(in srgb, var(--warn) 25%, transparent); } }
.lz-nface span { position: absolute; left: 0; right: 0; bottom: -18px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.lz-netgrid > div { padding-bottom: 18px; }
@keyframes lz-blink { 50% { outline-color: color-mix(in srgb, var(--bad) 30%, transparent); } }
/* solve */
.lz-solvegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.lz-cubebox { display: flex; justify-content: center; min-height: 420px; }
.lz-holdmini { text-align: center; margin: 0 0 6px; }
.lz-stagebar { display: flex; gap: 6px; margin: 8px 0 4px; }
.lz-seg { min-width: 0; }
.lz-segbar { display: block; height: 8px; border-radius: 99px; background: var(--bg3); overflow: hidden; }
.lz-segbar b { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.lz-seg.past .lz-segbar b { background: var(--ok); }
.lz-seglabel { display: block; font-size: .74rem; font-weight: 700; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lz-seg.on .lz-seglabel { color: var(--text); }
.lz-stagetip { min-height: 2.8em; margin: 4px 0 10px; }
.lz .w-say { min-height: 2.6em; }
.lz-done .w-say { color: var(--ok); font-weight: 700; }
.lz-playrow { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.lz-speed { display: flex; align-items: center; gap: 6px; }
.lz-allmoves { margin-top: 14px; } .lz-allmoves summary { cursor: pointer; font-weight: 700; }
.lz .moves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; max-height: 210px; overflow: auto; }
.lz-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lz-wait { text-align: center; padding: 50px 10px; }
.lz-spin { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; border: 5px solid var(--bg3); border-top-color: var(--accent); animation: lz-rot 0.9s linear infinite; }
@keyframes lz-rot { to { transform: rotate(360deg); } }
.cv-sticker.nv-hl { filter: brightness(1.12) saturate(1.1); box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 6px rgba(255,255,255,.55) !important; }
.cv-sticker.nv-mark { box-shadow: inset 0 0 0 4px var(--bad) !important; }
.lz-toast { position: fixed; left: 50%; top: 76px; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 50; max-width: min(92vw, 460px); padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg2); font-weight: 600; font-size: .92rem; text-align: center; box-shadow: var(--shadow); transition: .25s; }
.lz-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) {
  .lz-in, .lz-solvegrid { grid-template-columns: minmax(0, 1fr); }
  .lz-side3d { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
  .lz-prevbox { width: auto; min-height: 0; grid-row: span 3; }
  .lz-side3d > p { text-align: left !important; }
  .lz-tools { justify-content: flex-start; }
  .lz-cubebox { min-height: 0; }
}
@media (max-width: 520px) {
  .lz { padding: 14px 12px 16px; border-radius: 14px; }
  .lz-tab { font-size: .68rem; padding: 6px 0 5px; border-radius: 10px; } .lz-thumb { width: 24px; height: 24px; }
  .lz-hold { font-size: .88rem; min-height: 0; }
  .lz-face { gap: 5px; padding: 6px; }
  .lz-pal { gap: 4px; } .lz-color { padding: 6px 0 5px; } .lz-swatch { width: 26px; height: 26px; } .lz-cname { font-size: .66rem; } .lz-color kbd { display: none; }
  .lz-netgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .lz-solvegrid .w-nav { position: sticky; bottom: 8px; z-index: 5; background: var(--bg2); padding: 8px; border-radius: 14px; box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { .lz-nface i.bad, .lz-nface.fixme { animation: none; } .lz-spin { animation-duration: 3s; } }
#lz-stagebar:empty, #lz-stagetip:empty { display: none; }
@media (max-width: 400px) { .lz .cube-switch .cs { padding: 6px 8px 6px 5px; gap: 4px; font-size: .9rem; } .lz .cube-switch .cs-ico { width: 18px; height: 18px; } .lz .cube-switch { gap: 4px; } }
/* hero with the cube of the page (size badge + drawing of that very cube), so nobody wonders which solver this is */
.lz-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 28px; max-width: 1060px; margin: 0 auto 18px; padding: 18px 24px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--bg2)), var(--bg2) 60%); border: 1px solid var(--line); }
.lz-hero h1 { margin: 6px 0 4px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.12; }
.lz-hero p { color: var(--muted); margin: 6px 0 10px; font-size: 1.04rem; max-width: 620px; }
.lz-hero .rg-byline { margin: 0; }
.lz-size { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 900; font-size: 1rem; letter-spacing: .02em; }
.lz-size small { font-weight: 700; opacity: .85; font-size: .8rem; }
.lz-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 4px 0 0; }
.lz-facts li { background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .88rem; font-weight: 600; }
.lz-facts b { color: var(--accent); }
.lz-hero .rg-fig { margin: 0; } .lz-hero .rg-fig img { width: 220px; height: auto; filter: drop-shadow(0 14px 22px rgba(20, 30, 60, .18)); }
.lz-hero figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) {
  .lz-hero { grid-template-columns: minmax(0, 1fr) 96px; padding: 14px; gap: 8px 12px; text-align: left; }
  .lz-hero .rg-fig { grid-column: 2; grid-row: 1; } .lz-hero .rg-fig img { width: 96px; }
  .lz-hero p { font-size: .95rem; grid-column: 1 / -1; }
  .lz-hero .lz-hero-txt { display: contents; }
  .lz-hero .lz-hero-head { grid-column: 1; }
  .lz-facts { grid-column: 1 / -1; }
}
/* stages drawn from real cube states */
.lz-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.lz-stages .rg-fig { margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.lz-stages .rg-fig img { width: 130px; }
.lz-stages figcaption { font-size: .85rem; }
/* comparison table of all solvers */
.lz-compare { overflow-x: auto; margin: 12px 0 8px; border: 1px solid var(--line); border-radius: 14px; }
.lz-compare table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lz-compare th, .lz-compare td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lz-compare thead th { background: var(--bg3); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.lz-compare tbody th { white-space: nowrap; } .lz-compare tbody th svg { vertical-align: middle; margin-right: 4px; }
.lz-compare tbody th small { display: block; color: var(--muted); font-weight: 600; font-size: .78rem; margin-top: 2px; }
.lz-compare tr.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lz-compare tr.on th { box-shadow: inset 4px 0 0 var(--accent); }
.lz-compare tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) {
  .lz-compare { border: 0; overflow: visible; }
  .lz-compare thead { display: none; }
  .lz-compare table, .lz-compare tbody, .lz-compare tr, .lz-compare th, .lz-compare td { display: block; width: auto; }
  .lz-compare tr { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; padding: 8px 4px; }
  .lz-compare td, .lz-compare tbody th { border: 0; padding: 4px 10px; }
  .lz-compare td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-weight: 700; }
  .lz-compare tr.on th { box-shadow: none; }
}
.lz-mistakes li { margin-bottom: .5em; }
@media (max-width: 700px) { .lz-hero h1 { font-size: 1.45rem; } .lz-size { white-space: nowrap; font-size: .9rem; } .lz-size small { font-size: .72rem; } .lz-hero p { margin: 2px 0 0; } }
@media (max-width: 520px) { .lz-facts { display: none; } .lz-hero .rg-byline { font-size: .82rem; } }
/* Pyraminx: triangle face, thumbnails and net (pyra-loeser.js) */
.lz-face.lz-face-tri { background: none; padding: 0; aspect-ratio: 1; display: block; }
.lz-face-tri svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lz-face-tri .lz-cell { fill: var(--k, #2b2f39); stroke: var(--cv-plastic); stroke-width: 2.4; stroke-linejoin: round; cursor: pointer; transition: fill .12s; outline: none; }
.lz-face-tri .lz-cell.empty { fill: #2b2f39; }
.lz-face-tri .lz-cell:focus-visible { stroke: var(--accent); stroke-width: 3.4; }
.lz-face-tri .lz-cell.unsure { stroke: #fff; stroke-width: 3; }
.lz-face-tri { filter: drop-shadow(0 6px 12px rgba(20, 30, 60, .15)); }
.lz-thumb.lz-thumb-tri { background: none; padding: 0; display: block; }
.lz-thumb-tri svg { width: 100%; height: 100%; display: block; }
.lz-thumb-tri .th { fill: #3a3f4b; stroke: var(--cv-plastic); stroke-width: 4; }
.lz-netrow { display: grid; grid-template-columns: repeat(4, minmax(0, 140px)); gap: 12px; justify-content: center; }
.lz-nface.lz-nface-tri { background: none; padding: 0; display: block; aspect-ratio: auto; }
.lz-nface-tri svg { width: 100%; display: block; aspect-ratio: 1; }
.lz-nface-tri polygon { stroke: var(--cv-plastic); stroke-width: 2.4; stroke-linejoin: round; }
.lz-nface-tri polygon.bad { stroke: var(--bad); stroke-width: 4; animation: lz-blink 1.2s ease-in-out infinite; }
.lz-nface-tri span { position: static; display: block; margin-top: 4px; }
@media (max-width: 520px) { .lz-netrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-scene { user-select: none; } .pv-scene svg { display: block; }
/* camera guide of scanner-nxn.js: the fields of the face, squares or triangles */
.nscan-guide { position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.nscan-guide svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nscan-guide polygon { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.1; stroke-dasharray: 3 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nscan-guide polygon.ok { stroke: #fff; stroke-dasharray: none; stroke-width: 2.4; }
.nscan-faces .f { display: block; padding: 3px; } .nscan-faces .f svg { width: 100%; display: block; aspect-ratio: 1; }
.nscan-faces .f polygon { stroke: #15171c; stroke-width: 2; }