/* Layer by layer only. The shared game rules (buttons, share box, More games) stay in play.css. */
.lb [hidden]{display:none}
.lb label{font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.lb-stage{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--ground);contain:layout paint}
@media (max-width:640px){.lb-stage{aspect-ratio:4/5}}
.lb-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none}
.lb-canvas:active{cursor:grabbing}
.lb-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:14px}
.lb-hud{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);color:var(--text);pointer-events:none}
.lb-hud:not(:has(span:not(:empty))){display:none}
.lb-hud span:empty{display:none}
.lb-over{position:absolute;left:12px;right:12px;bottom:clamp(16px,4vw,28px);display:flex;justify-content:center;pointer-events:none}
/* On a wide screen the stage's foot can fall below the fold on arrival, so the first print button sits in its
   middle. From the first print on the button stays at the foot, clear of the print. */
@media (min-width:641px){.lb-stage:not(.lb-job) .lb-over{top:0;bottom:0;align-items:center}}
.lb-over .btn{pointer-events:auto;font-size:16.5px;padding:15px 30px;white-space:normal;text-align:center;
  box-shadow:0 8px 24px rgb(7 12 21 / .22)}
.lb-nogl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.lb-nogl p{max-width:30em;text-align:center}
.lb-nojs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--muted)}
/* Two lines of status are reserved, so a stage change never moves the controls under it. */
.lb-status{min-height:3em;margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:420px){.lb-status{min-height:4.5em}}
.lb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 0}
.lb-bar .alt-btn{padding:9px 18px}
.lb-bar .alt-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.lb-bar .alt-btn:disabled{opacity:.5;cursor:default}
.lb-seg{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;border:1px solid var(--hair);border-radius:999px}
.lb-seg label{position:relative;display:block}
.lb-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lb-seg span{display:block;padding:7px 13px;border-radius:999px;font:600 14px/1.2 var(--sans);color:var(--text)}
.lb-seg input:checked+span{background:var(--btn);color:#fff}
.lb-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.lb-seg .lb-seglabel{padding:0 6px 0 10px;font:500 12px/1 var(--mono);color:var(--muted)}
.lb-shelf{margin:22px 0 0}
.lb-label{margin:0 0 10px}
.lb-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.lb-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lb-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border:1px solid var(--line);
  border-radius:14px;background:var(--paper);color:var(--text);font:600 14.5px/1.3 var(--sans);cursor:pointer}
.lb-item:hover{border-color:var(--accent)}
.lb-item svg{width:46px;height:38px;color:var(--muted)}
.lb-item[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.lb-item[aria-pressed="true"] svg{color:var(--accent)}
.lb-item:disabled{opacity:.55;cursor:default}
.lb-item:disabled:hover{border-color:var(--line)}
.lb-done{min-height:1.3em;font:500 11.5px/1.3 var(--mono);color:var(--accent-ink)}
.lb-done[hidden]{display:block;visibility:hidden}
.lb-settings{margin:16px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.lb-settings summary{padding:13px 18px;font-weight:600;cursor:pointer}
.lb-set{display:flex;flex-wrap:wrap;gap:18px 32px;padding:4px 18px 20px}
.lb-set fieldset:last-child{flex:1 1 260px}
.lb-set fieldset{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:8px;margin:0;padding:0;border:0}
.lb-set legend{margin:0 0 9px;padding:0;font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lb-set label{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--hair);border-radius:999px;
  font-size:14px;white-space:nowrap;cursor:pointer}
.lb-set label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.lb-set input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lb-set label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.lb-set label:has(input:disabled),.lb-set input:disabled{opacity:.55;cursor:default}
.lb-sw{flex:none;display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(7 12 21 / .25)}
.lb-end{margin:22px 0 0;padding:20px 22px 6px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.lb-stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:14px 0 0}
.lb-stats dt{font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lb-stats dd{margin:5px 0 0;font:600 24px/1.1 var(--mono);color:var(--text)}
.lb-lesson{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--text)}
@media (prefers-reduced-motion:reduce){.lb-over .btn{transition:none}}