/* Assembly Line — the pieces, words and controls over the Phaser scene. The art is web/art.js. */
:where(.al-root button) { all: unset; box-sizing: border-box; }
.al-root { display: flex; align-items: center; justify-content: center; container-type: size; }
.al-root:empty { display: none; }
.al-stage { position: relative; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }

/* the steel plate along the top */
.al-hud {
  box-sizing: border-box; width: 1256px; height: 54px; padding: 0 18px; display: flex !important; align-items: center; gap: 16px;
  color: #eef3f8; background: linear-gradient(#59636f, #2a3039); border: 3px solid #0c1117; border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 5px 0 rgba(0,0,0,.5);
}
.al-chip, .al-hud-stat {
  flex: none; padding: 6px 11px; color: #ffb43d; background: #0a0c10; border: 2px solid #0c1117; border-radius: 4px;
  font: 700 15px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; text-shadow: 0 0 8px rgba(255,170,50,.75);
}
.al-hud-title { flex: 1; min-width: 0; font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-hud-right { flex: none; display: flex; gap: 8px; }
.al-time.al-low { color: #ff6a4c; text-shadow: 0 0 8px rgba(255,90,70,.9); }

/* the gantry sign */
.al-screen { box-sizing: border-box; width: 870px; height: 112px; display: flex !important; flex-direction: column; color: #ffd98a; }
.al-q-count { flex: none; color: #ff9a2e; font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; }
.al-q-row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.al-q-image { flex: none; max-height: 82px; max-width: 180px; border-radius: 4px; background: #fff; border: 3px solid #39424d; }
.al-q-text { flex: 1; min-width: 0; max-height: 80px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800; line-height: 1.12; text-shadow: 0 0 14px rgba(255,170,50,.55); }
.al-q-hint { flex: none; text-align: center; color: #7be8ff; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a piece: a machined steel plate */
.al-crate {
  display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 88px; height: 38px; padding: 0 2px;
  color: #0c1117; background: linear-gradient(#e8edf2 0%, #b4bec9 45%, #8d99a6 100%); border: 3px solid #0c1117; border-radius: 5px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 4px 0 #2a3039, 0 6px 8px rgba(0,0,0,.45); font-weight: 900;
}
.al-root .al-crate { touch-action: none; cursor: grab; }
.al-root .al-crate:hover { background: linear-gradient(#ffffff 0%, #d7dee6 45%, #aab5c1 100%); }
.al-crate:focus-visible, .al-assemble:focus-visible { outline: 3px solid #7be8ff; outline-offset: 2px; }
.al-crate-word { pointer-events: none; display: block; width: 100%; max-height: 100%; overflow: hidden; text-align: center; white-space: nowrap; line-height: 1.2; }
.al-root .al-crate.al-held { cursor: grabbing; box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 12px 16px rgba(0,0,0,.6); }
.al-root .al-crate.al-magnetised { border-color: #2fc6ff; box-shadow: 0 0 0 2px #2fc6ff, 0 0 26px 8px rgba(47,198,255,.75); }

/* on the bench a piece is as wide as its word, magnetised to its neighbours, with current running through */
.al-root .al-crate.al-linked {
  width: auto; min-width: 46px; height: 54px; padding: 0 15px; position: relative; color: #04202c;
  background: linear-gradient(#f2fdff 0%, #bfeaf6 45%, #79c3dc 100%); border-color: #0c1117;
  animation: al-charge 1.15s ease-in-out infinite; animation-delay: var(--pulse-at, 0s);
}
@keyframes al-charge {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 0 6px 1px rgba(47,198,255,.45); }
  40% { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 0 24px 8px rgba(120,235,255,.95); filter: brightness(1.12); }
}
.al-calm .al-crate.al-linked { animation: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 0 10px 2px rgba(47,198,255,.6); }
.al-crate.al-linked .al-crate-word { width: auto; overflow: visible; }
.al-crate.al-join-r { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.al-crate.al-join-l { border-left: 2px solid #2fc6ff; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* the stencil on a bin's front lip */
.al-label {
  box-sizing: border-box; width: 170px; height: 34px; padding: 0 6px; display: flex !important; align-items: center; justify-content: center;
  color: #0c1117; text-align: center; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; line-height: 1; overflow: hidden;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.al-panel-hint { color: rgba(150,235,255,.82); font-size: 20px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; pointer-events: none !important; text-shadow: 0 0 10px rgba(47,198,255,.6); }

/* the big red machine button */
.al-root .al-assemble {
  display: inline-block; padding: 9px 30px; color: #fff; background: linear-gradient(#ff6a4c, #c21f12); border: 4px solid #0c1117; border-radius: 10px;
  font-size: 20px; font-weight: 900; letter-spacing: .1em; text-shadow: 0 2px 0 rgba(0,0,0,.45); cursor: pointer; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 #0c1117; width: auto; margin: 0;
}
.al-root .al-assemble:disabled { filter: grayscale(.85) brightness(.72); cursor: default; }
.al-root .al-assemble:not(:disabled):active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 #0c1117; }

.al-product-word { width: 196px; height: 50px; display: flex !important; align-items: center; justify-content: center; color: #04202c; font-weight: 900; text-align: center; overflow: hidden; }
.al-banner { padding: 12px 34px; background: #0c1117; border: 4px solid currentColor; border-radius: 10px; font-size: 40px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.al-pause { display: flex !important; flex-direction: column; align-items: center; gap: 14px; padding: 26px 40px; background: #0c1117; border: 4px solid #ffb43d; border-radius: 10px; color: #fff; }
.al-pause-title { font-size: 26px; font-weight: 800; }

/* the teacher panel's preview of a level — it sits on the panel's page, so it takes the page's colours */
.al-pv-barrels { display: grid; gap: 4px; margin-bottom: 8px; }
.al-pv-piece { display: inline-block; padding: 0 7px; border: 1px solid currentColor; border-radius: 5px; }
.al-pv-distractor { opacity: .55; border-style: dashed; }
.al-pv-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.al-pv-image { max-height: 48px; vertical-align: middle; margin-right: 6px; background: #fff; border-radius: 4px; }
.al-pv-muted { opacity: .72; font-size: .92em; }