/* Label printer within the Sorting Workshop; shared conveyor background. */
.pack-game { --pk-ok: #1F7A45; --pk-ok-led: #2FA564; --pk-bad: #C62F2F; --pk-bad-led: #E05252; --pk-head: #2B3040; --pk-tray: #E8EFE6; --pk-edge: #CFD9CE; --pk-tag-edge: #D3D9E3; --spring: cubic-bezier(.34,1.56,.64,1); --glide: cubic-bezier(.2,.8,.2,1); position: relative; display: flex; flex-direction: column; gap: .78rem; width: 100%; max-width: 36rem; height: 100%; min-height: 0; margin: 0 auto; }

/* Task plate: the shared blue with white text; the order sits on a translucent inner plate. */
.pack-task { flex-shrink: 0; display: flex; flex-direction: column; gap: .55rem; padding: .78rem .9rem .9rem; border-radius: 1.1rem; background: var(--accent); color: #FCFDFF; }
.pack-task-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pack-name { font-size: .83rem; font-weight: 700; }
.pack-pips { display: flex; gap: .28rem; }
.pack-pips i { width: .56rem; height: .56rem; box-sizing: border-box; border: 2px solid rgba(252,253,255,.7); border-radius: 50%; transition: background-color .25s, border-color .25s; }
.pack-pips i.is-on { background: #FCFDFF; border-color: #FCFDFF; }
.pack-order { display: flex; flex-direction: column; gap: .1rem; padding: .66rem .78rem; border: 1.5px solid rgba(252,253,255,.85); border-radius: .78rem; background: rgba(252,253,255,.16); overflow: hidden; }
.pack-order-label { font-size: .72rem; font-weight: 600; }
.pack-ru { display: block; min-height: 1.2em; font-size: 1.45rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }

/* Label printer: dark head with a status LED and a paper slot; labels come out onto the tray below. */
.pack-printer { flex-shrink: 0; display: flex; flex-direction: column; }
.pack-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 2.78rem; padding: 0 .9rem; border-radius: .9rem .9rem .55rem .55rem; background: var(--pk-head); box-shadow: 0 6px 14px rgba(16,20,28,.18); }
.pack-head-name { display: flex; align-items: center; gap: .45rem; font-size: .56rem; font-weight: 700; letter-spacing: .12em; color: #AEB6C6; }
.pack-led { width: 8px; height: 8px; border-radius: 50%; background: #8FA6E6; transition: background-color .2s, box-shadow .3s; }
.pack-led[data-state="print"] { animation: pack-blink .45s ease-in-out infinite alternate; }
@keyframes pack-blink { from { background: #8FA6E6; box-shadow: 0 0 0 0 rgba(143,166,230,0); } to { background: #D2DCFF; box-shadow: 0 0 0 4px rgba(143,166,230,.28); } }
.pack-led[data-state="ok"] { background: var(--pk-ok-led); box-shadow: 0 0 0 4px rgba(47,165,100,.25); }
.pack-led[data-state="bad"] { background: var(--pk-bad-led); box-shadow: 0 0 0 4px rgba(224,82,82,.25); }
.pack-keys { display: flex; gap: 6px; }
.pack-keys i { width: 18px; height: 8px; border-radius: 4px; background: #3E4557; transition: background-color .2s; }
.pack-slot { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 6px; height: 4px; border-radius: 2px; background: #10141C; transition: box-shadow .3s, background-color .3s; }
.pack-head.is-printing .pack-slot { background: #1B2030; box-shadow: 0 0 .45rem rgba(143,166,230,.55); }
.pack-head.is-printing .pack-keys i:first-child { background: #56607A; }

/* The tray clips only its top edge, so labels slide out from under the printer head. */
.pack-tray { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .55rem; margin: -4px 1.2rem 0; padding: .78rem .55rem .66rem; border-radius: 0 0 .66rem .66rem; background: var(--pk-tray); box-shadow: inset 0 6px 8px -6px rgba(16,20,28,.25), 0 4px 10px rgba(40,50,80,.08); clip-path: inset(0 -2rem -2rem -2rem); }
.pack-tray.is-locked { pointer-events: none; }
.pack-label { position: relative; display: flex; align-items: center; gap: .45rem; width: 100%; height: 3.9rem; margin: 0; padding: 0 .78rem 0 .9rem; box-sizing: border-box; border: 1px solid var(--pk-edge); border-radius: .55rem; background: #FCFDFF; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 0 rgba(16,20,28,.06); -webkit-tap-highlight-color: transparent; transition: opacity .3s ease, border-color .2s, box-shadow .25s, background-color .2s, translate .34s var(--glide), rotate .34s var(--glide), scale .15s ease; }
.pack-label:active { scale: .985; }
.pack-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pack-label-body { display: flex; flex: 1; flex-direction: column; gap: .33rem; min-width: 0; }
.pack-word { position: relative; align-self: flex-start; max-width: 100%; font-size: 1.33rem; font-weight: 600; letter-spacing: .02em; line-height: 1.15; white-space: nowrap; }
/* The reject strike is drawn left to right instead of appearing as text-decoration. */
.pack-word::after { content: ''; position: absolute; left: -.15rem; right: -.15rem; top: 54%; height: 3px; border-radius: 2px; background: var(--pk-bad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .34s cubic-bezier(.6,0,.3,1) .08s; }
.pack-code { display: block; width: 5.1rem; height: .56rem; transition: opacity .25s; }
.pack-code path { fill: none; stroke: #575D6B; stroke-width: 1.3; }
.pack-badge { flex-shrink: 0; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; color: #FCFDFF; opacity: 0; scale: .4; transition: opacity .2s, scale .25s var(--spring); }
.pack-badge svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pack-label.is-stamped { border-color: var(--pk-ok); box-shadow: inset 0 0 0 1px var(--pk-ok), 0 8px 16px rgba(40,50,80,.16); }
/* The picked right label peels up off the tray; a label revealed after a mistake stays flat. */
.pack-label.is-stamped:not(.is-revealed) { z-index: 2; translate: 6px -4px; rotate: -1.5deg; }
.is-stamped .pack-badge { opacity: 1; scale: 1; background: var(--pk-ok); }
.pack-label.is-rejected { border-color: var(--pk-bad); background: #FFF3F3; box-shadow: inset 0 0 0 1px var(--pk-bad); }
.is-rejected .pack-badge { opacity: 1; scale: 1; background: var(--pk-bad); }
.is-rejected .pack-word::after { transform: scaleX(1); }
.is-rejected .pack-code { opacity: .25; }
.pack-label.is-dim { opacity: .35; }
.is-dim .pack-code { opacity: .4; }

.pack-spacer { flex: 1; min-height: 0; }

/* Packed row: one horizontal line, newest first; the slot for a flying label opens before it lands. */
.pack-shelf { flex-shrink: 0; display: flex; flex-direction: column; gap: .55rem; padding: .78rem; border-radius: 1.1rem; background: #FCFDFF; box-shadow: 0 4px 18px rgba(40,50,80,.08); }
.pack-shelf-head { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 700; }
.pack-count { display: inline-block; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.pack-row { position: relative; display: flex; gap: .45rem; min-height: 2.05rem; padding-bottom: .2rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.pack-row::-webkit-scrollbar { display: none; }
.pack-empty { position: absolute; inset: 0 0 .2rem; display: flex; align-items: center; font-size: max(12px,.68rem); color: var(--muted); pointer-events: none; transition: opacity .3s; }
.pack-row.has-tags .pack-empty { opacity: 0; }
.pack-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; height: 1.9rem; box-sizing: border-box; padding: 0 .66rem 0 .55rem; overflow: hidden; border: 1px solid var(--pk-tag-edge); border-radius: 6px; background: #FCFDFF; box-shadow: 0 2px 0 var(--pk-tag-edge); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.pack-tag svg { flex-shrink: 0; width: 16px; height: 14px; }
.pack-tag path { fill: none; stroke: #575D6B; stroke-width: 1.2; }
.pack-tag.is-pending { visibility: hidden; }
/* The copy that flies from the label to the row; JS drives it from the game's top-left corner. */
.pack-tag.is-flying { position: absolute; left: 0; top: 0; z-index: 10; overflow: visible; pointer-events: none; will-change: transform; }

.pack-game.is-over .pack-printer { opacity: .55; filter: saturate(.6); transition: opacity .4s, filter .4s; }
.pack-game.is-over .pack-tray { pointer-events: none; }

@media (max-height:650px) {
 .sorting-workshop .game-header {height:3.5rem;}
 .sorting-workshop .pack-game {gap:.4rem;}
 .sorting-workshop .pack-task {padding:.5rem .7rem;gap:.3rem;}
 .sorting-workshop .pack-order {padding:.35rem .55rem;}
 .sorting-workshop .pack-ru {font-size:1.1rem;}
 .sorting-workshop .pack-label {height:2.6rem;}
 .sorting-workshop .pack-head {height:2rem;}
 .sorting-workshop .pack-shelf {padding:.45rem .6rem;gap:.3rem;}
 .sorting-workshop .pack-word {font-size:1rem;}
 .sorting-workshop .pack-code {height:.35rem;}
}

/* Short screens (Telegram with its panels): tighter plate and labels, still no vertical scroll. */
@media (max-height:720px) {
 .pack-game { gap: .55rem; }
 .pack-task { gap: .4rem; padding: .6rem .78rem .7rem; }
 .pack-order { padding: .5rem .7rem; }
 .pack-ru { font-size: 1.25rem; }
 .pack-head { height: 2.45rem; }
 .pack-tray { gap: .45rem; padding: .66rem .5rem .55rem; }
 .pack-label { height: 3.3rem; }
 .pack-word { font-size: 1.15rem; }
 .pack-shelf { padding: .66rem .7rem; gap: .45rem; }
}
@media (prefers-reduced-motion:reduce) { .pack-game *, .pack-game *::after { animation: none !important; transition: none !important; } }