/* Упаковочный цех — этап «Приём заказа». Подключать после app.css и conveyor.css:
   фон — общий живой фон цеха (factory-backdrop), плашка задания — общий синий с белым текстом. */

/* Иконки товаров (order-items.js): один контур, заливка классами. */
.oi { display: block; overflow: visible; fill: none; stroke: #2B3040; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oi .p { fill: #FDFCF9; } .oi .b { fill: #6889FF; } .oi .bs { fill: #C9D6FF; } .oi .bp { fill: #E8EEFF; }
.oi .m { fill: #8FD3BE; } .oi .mp { fill: #DDF2EA; } .oi .l { fill: #CFE8A9; } .oi .a { fill: #F2CB6B; } .oi .ap { fill: #FBE8B0; }
.oi .c { fill: #EF9A8A; } .oi .w { fill: #E5C69F; } .oi .s { fill: #C9D0DB; } .oi .k { fill: #2B3040; } .oi .ns { stroke: none; }

.ord-game { --ok: #1F7A45; --ok-led: #2FA564; --bad: #C62F2F; --metal: #2B3040; --box: #6889FF; --paper-box: #FDFCF9; --spring: cubic-bezier(.34,1.56,.64,1); --glide: cubic-bezier(.2,.8,.2,1);
  position: relative; display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: 36rem; height: 100%; min-height: 0; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* ——— Плашка задания: синий, белый текст, звонок на полупрозрачной внутренней плашке ——— */
.ord-task { flex-shrink: 0; display: flex; flex-direction: column; gap: .55rem; padding: .78rem .9rem .9rem; border-radius: 1.1rem; background: var(--accent); color: #FCFDFF; }
.ord-task-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ord-name { font-size: .83rem; font-weight: 700; }
.ord-meta { display: flex; align-items: center; gap: .6rem; }
.ord-num { font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .92; }
.ord-pips { display: flex; gap: .28rem; }
.ord-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; }
.ord-pips i.is-on { background: #FCFDFF; border-color: #FCFDFF; }
.ord-call { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .78rem .7rem; border: 1.5px solid rgba(252,253,255,.85); border-radius: .78rem; background: rgba(252,253,255,.16); transition: background-color .35s ease; }
.ord-call[data-state="done"] { background: rgba(252,253,255,.24); }
.ord-call-head { display: flex; align-items: center; gap: .5rem; min-height: 1.75rem; }
.ord-call-label { font-size: .72rem; font-weight: 600; }
.ord-text { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ord-w { display: inline-block; }
.ord-dots { display: inline-flex; align-items: center; gap: .3rem; height: 2.6rem; }
.ord-dots i { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(252,253,255,.85); animation: ord-dot 1s ease-in-out infinite; }
.ord-dots i:nth-child(2) { animation-delay: .15s; } .ord-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ord-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.2rem); } }

/* Тело плашки: в звонке — точки, в разговоре — голосовая волна, при сборке — кнопка повтора,
   в разборе — текст заказа. Все состояния заранее занимают одну общую ячейку. */
.ord-body { position: relative; display: grid; align-items: start; min-height: 2.6rem; }
.ord-body > * { position: relative; grid-area: 1 / 1; min-width: 0; justify-self: start; max-width: 100%; opacity: 0; visibility: hidden; translate: 0 6px; pointer-events: none; transition: opacity .28s ease, translate .34s var(--glide), visibility 0s linear .34s; }
.ord-call[data-state="ring"] .ord-dots,
.ord-call[data-state="talk"] .ord-voice,
.ord-call[data-state="open"]:not(.no-voice) .ord-replay,
.ord-call:is([data-state="done"], [data-state="bad"]) .ord-text,
.ord-call.no-voice[data-state="open"] .ord-text { position: relative; opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
.ord-call[data-state="loading"] .ord-text { opacity: 0; visibility: hidden; transition: none; }

/* Голосовая волна: белые полосы, пока заказчик говорит; на каждом слове волна чуть вздрагивает. */
.ord-voice { display: flex; align-items: center; justify-content: space-between; gap: 3px; width: 100%; height: 2.6rem; transform-origin: 50% 50%; }
.ord-voice i { flex: 1 1 0; max-width: 4px; height: calc(var(--h) * 100%); border-radius: 2px; background: rgba(252,253,255,.92); transform: scaleY(.18); transition: transform .3s ease; }
.ord-call.is-speaking .ord-voice i { animation: ord-voice .62s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes ord-voice { from { transform: scaleY(.18); } to { transform: scaleY(1); } }

/* Кнопка «Послушать ещё раз»: белая капсула на синей плашке; во время звучания — эквалайзер. */
.ord-replay { display: inline-flex; align-items: center; gap: .55rem; height: 2.6rem; margin: 0; padding: 0 1.05rem 0 .4rem; border: 0; border-radius: 1.3rem; background: #FCFDFF; color: var(--accent); box-shadow: 0 .3rem .7rem rgba(16,20,28,.13); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .28s ease, translate .34s var(--glide), visibility 0s linear .34s, box-shadow .25s ease; }
.ord-replay:focus-visible { outline: 2px solid #FCFDFF; outline-offset: 3px; }
@media (hover: hover) { .ord-replay:hover { box-shadow: 0 .45rem 1rem rgba(16,20,28,.18); } }
.ord-replay-icon { position: relative; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: #FCFDFF; }
.ord-replay-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease, scale .25s var(--spring); }
.ord-replay-icon .ord-cone { fill: currentColor; }
.ord-replay-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity .2s ease; }
.ord-replay-bars i { width: 2.5px; height: .8rem; border-radius: 2px; background: currentColor; transform: scaleY(.35); }
.ord-call.is-speaking .ord-replay-icon svg { opacity: 0; scale: .6; }
.ord-call.is-speaking .ord-replay-bars { opacity: 1; }
.ord-call.is-speaking .ord-replay-bars i { animation: ord-bar .5s ease-in-out infinite alternate; }
.ord-call.is-speaking .ord-replay-bars i:nth-child(2) { animation-delay: -.3s; }
.ord-call.is-speaking .ord-replay-bars i:nth-child(3) { animation-delay: -.15s; }
.ord-replay-text { display: grid; }
.ord-replay-text > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .22s ease, translate .28s var(--glide); }
.ord-replay-text .is-busy { opacity: 0; translate: 0 4px; }
.ord-call.is-speaking .ord-replay-text .is-idle { opacity: 0; translate: 0 -4px; }
.ord-call.is-speaking .ord-replay-text .is-busy { opacity: 1; translate: 0 0; }
.ord-seg { border-radius: .3rem; transition: background-color .3s ease, color .3s ease, padding .3s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ord-seg.is-ok { box-shadow: inset 0 -2px 0 rgba(252,253,255,.95); }
.ord-seg.is-bad { padding: 0 .14em; background: var(--bad); }

/* Телефон: в звонке качается и расходится волнами, в разговоре — эквалайзер, после — спокоен. */
.ord-phone { position: relative; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #FCFDFF; color: var(--accent); transition: background-color .3s ease, color .3s ease; }
.ord-handset { width: .95rem; height: .95rem; fill: currentColor; transition: opacity .2s ease, scale .25s var(--spring); }
.ord-wave { position: absolute; inset: 0; border: 2px solid rgba(252,253,255,.9); border-radius: 50%; opacity: 0; pointer-events: none; }
.ord-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity .2s ease; }
.ord-bars i { width: 2.5px; height: .7rem; border-radius: 2px; background: currentColor; transform: scaleY(.35); }
.ord-call[data-state="ring"] .ord-handset { animation: ord-ring 1.15s ease-in-out infinite; }
.ord-call[data-state="ring"] .ord-wave { animation: ord-wave 1.15s ease-out infinite; }
.ord-call[data-state="ring"] .ord-wave + .ord-wave { animation-delay: .4s; }
.ord-call[data-state="talk"] .ord-handset { opacity: 0; scale: .6; }
.ord-call[data-state="talk"] .ord-bars { opacity: 1; }
.ord-call[data-state="talk"] .ord-bars i { animation: ord-bar .62s ease-in-out infinite alternate; }
.ord-call[data-state="talk"] .ord-bars i:nth-child(2) { animation-delay: -.42s; }
.ord-call[data-state="talk"] .ord-bars i:nth-child(3) { animation-delay: -.18s; }
.ord-call[data-state="talk"] .ord-bars i:nth-child(4) { animation-delay: -.3s; }
.ord-call:is([data-state="open"], [data-state="done"], [data-state="bad"]) .ord-phone { background: rgba(252,253,255,.24); color: #FCFDFF; }
@keyframes ord-ring { 0%, 52%, 100% { rotate: 0deg; } 6%, 18%, 30% { rotate: -16deg; } 12%, 24%, 36% { rotate: 16deg; } 42% { rotate: -6deg; } }
@keyframes ord-wave { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes ord-bar { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* ——— Стеллаж: две стойки с перфорацией, три полки, у каждого места — адресный ярлык ——— */
.ord-rack { position: relative; flex: 1 1 0; min-height: 11rem; display: flex; flex-direction: column; padding: .5rem 1.05rem .15rem; border-radius: 1.1rem; background: rgba(252,253,255,.62); box-shadow: inset 0 0 0 1px rgba(252,253,255,.85), 0 4px 18px rgba(40,50,80,.07); transition: opacity .4s ease, filter .4s ease; }
.ord-rack::before, .ord-rack::after { content: ''; position: absolute; top: .4rem; bottom: .15rem; width: .42rem; border-radius: .21rem; background: radial-gradient(circle, rgba(252,253,255,.42) .085rem, transparent .1rem) 50% .3rem / 100% .62rem repeat-y, var(--metal); }
.ord-rack::before { left: .36rem; }
.ord-rack::after { right: .36rem; }
.ord-rack.is-waiting { opacity: .78; filter: saturate(.7); }
.ord-rack.is-locked .ord-item { pointer-events: none; }
.ord-shelf { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding-bottom: .62rem; }
.ord-shelf::after { content: ''; position: absolute; z-index: 0; left: -.7rem; right: -.7rem; bottom: 0; height: .62rem; border-radius: .22rem; background: linear-gradient(#41485C, var(--metal) 60%); box-shadow: 0 .3rem .5rem rgba(16,20,28,.14); }
.ord-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; margin: 0; padding: .2rem 0 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .3s ease; }
.ord-item:focus-visible { outline: none; }
.ord-item:focus-visible .ord-art::before { opacity: 1; background: radial-gradient(closest-side, rgba(106,144,255,.3), transparent); }
.ord-art { position: relative; flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .1rem; transition: opacity .3s ease; }
.ord-art::before { content: ''; position: absolute; left: 50%; bottom: 0; width: min(4.4rem, 96%); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.ord-art .oi { position: relative; height: 100%; max-height: 4.5rem; width: auto; aspect-ratio: 1; filter: drop-shadow(0 .18rem .14rem rgba(16,20,28,.13)); transition: translate .25s var(--glide); }
@media (hover: hover) { .ord-item:hover .ord-art .oi { translate: 0 -3px; } }
.ord-item:active .ord-art .oi { translate: 0 1px; }
/* Ярлык сидит на кромке полки: адрес места, а в разборе — английское название товара. */
.ord-tag { position: absolute; left: 50%; bottom: -.62rem; z-index: 1; display: grid; place-items: center; width: max-content; min-width: 1.75rem; max-width: calc(100% + .4rem); min-height: .95rem; box-sizing: border-box; padding: .1rem .3rem; border-radius: .28rem; background: #FCFDFF; box-shadow: 0 1px 0 rgba(16,20,28,.2); translate: -50% -.18rem; color: var(--muted); text-align: center; transition: background-color .3s ease, color .3s ease; }
.ord-loc { font-size: .48rem; font-weight: 700; letter-spacing: .1em; }
.ord-label { font-size: max(10px, .54rem); font-weight: 600; line-height: 1.15; color: inherit; overflow-wrap: break-word; hyphens: none; }
.ord-rack.has-names .ord-tag { color: var(--ink); }
.ord-item.is-want .ord-tag { background: var(--ok); color: #FCFDFF; }
.ord-item.is-want .ord-art::before { opacity: 1; background: radial-gradient(closest-side, rgba(47,165,100,.3), transparent); }
.ord-item.is-wrong .ord-tag { background: var(--bad); color: #FCFDFF; }
.ord-item.is-wrong .ord-art::before { opacity: 1; background: radial-gradient(closest-side, rgba(224,82,82,.28), transparent); }
.ord-item.is-dim .ord-art { opacity: .42; }
.ord-item.is-dim .ord-tag { color: var(--muted); }

/* ——— Коробка и кнопка отправки ——— */
.ord-dock { flex-shrink: 0; display: flex; align-items: flex-end; gap: .7rem; container-type: inline-size; }
/* Ширина коробки: свободное место рядом с кнопкой, не больше 15.5rem. От неё считаются кнопка и стенка. */
.ord-dock { --bw: min(calc(100cqw - 6.1rem), 15.5rem); }
.ord-box-wrap { position: relative; flex: 1 1 0; min-width: 0; display: grid; align-items: end; justify-items: center; }
.ord-box-wrap::before { content: ''; width: var(--bw); max-width: 100%; aspect-ratio: 360 / 206; grid-area: 1 / 1; visibility: hidden; }
.ord-box-wrap > .ord-box { grid-area: 1 / 1; }
/* Коробка заказа в геометрии коробки Контейнера: viewBox 360×206, корпус 40–320 × 76–196, контур 5. */
.ord-box { position: relative; width: min(100%, 15.5rem); width: var(--bw); aspect-ratio: 360 / 206; transform-origin: 50% 92%; }
.ord-box > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ord-box path, .ord-box rect { stroke-linejoin: round; stroke-linecap: round; }
.ord-box-back { z-index: 1; }
.ord-box-front { z-index: 3; }
.ob-shadow { fill: #121720; opacity: .12; filter: blur(6px); }
.ob-inside { stroke: var(--box); stroke-width: 5; }
.ob-depth { fill: none; stroke: rgba(104,137,255,.18); stroke-width: 3; }
.ob-body { fill: var(--paper-box); stroke: var(--box); stroke-width: 5; }
.ob-lid { transform-box: view-box; transform-origin: 180px 30px; transform: scaleY(0); }
.ob-lid-face { fill: #F5F3EE; stroke: var(--box); stroke-width: 5; }
.ob-fold { fill: none; stroke: #C7CEDD; stroke-width: 4; }
.ob-label { fill: #FFFFFF; opacity: .72; }
.ob-tape { fill: rgba(201,214,255,.94); stroke: rgba(104,137,255,.5); stroke-width: 1.5; transform-box: view-box; transform-origin: 180px 29px; transform: scaleY(0); }
.ord-box.is-closed .ob-lid, .ord-box.is-closed .ob-tape { transform: none; }
/* Товары стоят во внутренности коробки; низ чуть уходит за переднюю стенку (y = 76…79 из 206). */
.ord-box-items { --n: 1; position: absolute; left: 16%; right: 16%; bottom: 61.5%; height: 3.4rem; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: .1rem; }
.ord-packed { position: relative; flex: 0 0 auto; width: min(2.9rem, calc((100% - (var(--n) - 1) * .1rem) / var(--n))); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ord-packed .oi { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 .12rem .1rem rgba(16,20,28,.16)); }
.ord-packed.is-pending .oi { visibility: hidden; }
.ord-packed:focus-visible { outline: none; }
.ord-packed:focus-visible .oi { filter: drop-shadow(0 0 .2rem rgba(106,144,255,.9)); }
.ord-qty { position: absolute; top: -.25rem; right: -.2rem; z-index: 1; min-width: 1.1rem; height: 1.1rem; box-sizing: border-box; padding: 0 .25rem; border-radius: .55rem; background: var(--ink); color: #FCFDFF; box-shadow: 0 0 0 2px #FCFDFF; font-size: .58rem; font-weight: 700; line-height: 1.1rem; text-align: center; font-variant-numeric: tabular-nums; transition: opacity .2s ease, scale .25s var(--spring); }
.ord-packed[data-qty="1"]:not(.is-missing) .ord-qty, .ord-packed.is-pending .ord-qty { opacity: 0; scale: .4; }
.ord-packed.has-need[data-qty] .ord-qty { opacity: 1; scale: 1; }
.ord-packed.is-ok .ord-qty { background: var(--ok); }
.ord-packed.is-bad .ord-qty { background: var(--bad); }
.ord-packed.is-bad .oi { filter: drop-shadow(0 0 .16rem rgba(198,47,47,.65)); }
.ord-packed.is-bad::after { content: ''; position: absolute; left: 6%; right: 6%; top: 46%; height: 3px; border-radius: 2px; background: var(--bad); rotate: -32deg; }
.ord-packed.is-ok .oi { filter: drop-shadow(0 0 .16rem rgba(47,165,100,.65)); }
.ord-packed.is-missing { cursor: default; }
.ord-packed.is-missing .oi { opacity: .45; filter: none; }
.ord-packed.is-missing .ord-qty { background: var(--ok); }
/* Этикетка поверх белой плашки корпуса (x 54–306, y 92–179). */
.ord-box-label { position: absolute; left: 15%; width: 70%; top: 44.7%; height: 42.2%; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .55rem; box-sizing: border-box; pointer-events: none; }
.ord-sticker { flex: none; display: flex; flex-direction: column; gap: .14rem; padding: .2rem .3rem; border-radius: .22rem; background: #F3F5F9; box-shadow: inset 0 0 0 1px #DFE4EC; }
.ord-sticker b { font-size: .5rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.ord-code { display: block; width: 2.3rem; height: .55rem; }
.ord-code path { fill: none; stroke: #575D6B; stroke-width: 1.1; }
.ord-hint { flex: 1 1 auto; min-width: 0; font-size: max(10px, .56rem); font-weight: 600; line-height: 1.25; color: var(--muted); text-align: right; transition: opacity .35s ease, translate .35s var(--glide); }
.ord-hint.is-gone { opacity: 0; translate: 0 4px; }
.ord-stamp { position: absolute; left: 57%; top: 66%; z-index: 6; padding: .22rem .5rem; border: 3px solid currentColor; border-radius: .4rem; background: rgba(252,253,255,.86); font-size: .68rem; font-weight: 700; letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%,-50%) rotate(-7deg); pointer-events: none; }
.ord-stamp.is-ok, .ord-stamp.is-bad { opacity: 1; }
.ord-stamp.is-ok { color: var(--ok); }
.ord-stamp.is-bad { color: var(--bad); }

.ord-send { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 5.4rem; height: 5.1rem; height: calc(var(--bw) * 120 / 360); margin: 0 0 calc(var(--bw) * 10 / 360); padding: 0 .3rem; border: 0; border-radius: 1.1rem; background: var(--ink); color: var(--surface); box-shadow: 0 .3125rem .5rem rgba(16,20,28,.1); font: inherit; cursor: pointer; transition: opacity .25s ease, background-color .25s ease, translate .2s var(--glide); }
.ord-send:disabled { opacity: .32; cursor: default; }
.ord-send:not(:disabled):active { translate: 0 1px; }
.ord-send-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(252,253,255,.14); transition: rotate .3s var(--glide), background-color .25s ease; }
.ord-send-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ord-send-text { display: block; font-size: .6rem; font-weight: 700; line-height: 1.2; text-align: center; }
.ord-send.is-next { background: var(--accent); }
.ord-send.is-next .ord-send-icon { background: rgba(252,253,255,.24); }

/* Перелетающий товар. */
.ord-ghost { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; will-change: transform; }
.ord-ghost .oi { width: 100%; height: 100%; }
/* Перетаскивание: товар приподнят, с тенью и наклоном; коробка под ним приподнимается и светится. */
.ord-ghost.is-dragging { z-index: 21; filter: drop-shadow(0 .8rem .7rem rgba(17,23,34,.24)); }
.ord-item, .ord-packed { touch-action: none; cursor: grab; }
.ord-game.is-dragging, .ord-game.is-dragging * { cursor: grabbing !important; }
.ord-item.is-lifted .ord-art .oi { visibility: hidden; }
.ord-packed.is-lifting[data-qty="1"] .oi { opacity: .28; }
.ord-box { translate: 0 0; transition: translate .28s var(--glide); }
.ord-box.is-target { translate: none; }
.ord-box > svg { transition: filter .28s ease; }
.ord-box.is-target > svg { filter: drop-shadow(0 .45rem .7rem rgba(104,137,255,.38)); }
.ord-box.is-target .ob-inside { fill: #D5DFFB; }

.ord-game.is-over .ord-rack { opacity: .6; filter: saturate(.6); }
.ord-game.is-over .ord-send { opacity: .32; }

/* Низкие экраны (Telegram с панелями): плотнее, но без вертикальной прокрутки. */
@media (max-height: 720px) {
 .ord-game { gap: .5rem; }
 .ord-task { gap: .4rem; padding: .6rem .78rem .7rem; }
 .ord-call { padding: .45rem .7rem .55rem; gap: .3rem; }
 .ord-text { font-size: .95rem; }
 .ord-dock { --bw: min(calc(100cqw - 6.1rem), 14rem); }
 .ord-art .oi { max-height: 3.3rem; }
}
@media (max-height: 650px) {
 .sorting-workshop .game-header { height: 3.5rem; }
 .ord-call-head { min-height: 1.5rem; }
 .ord-phone { width: 1.5rem; height: 1.5rem; }
 .ord-text { font-size: .88rem; }
 .ord-body { min-height: 2.3rem; }
 .ord-dots, .ord-voice, .ord-replay { height: 2.3rem; }
 .ord-dock { --bw: min(calc(100cqw - 6.1rem), 12.5rem); }
 .ord-rack { min-height: 9.5rem; }
}
@media (prefers-reduced-motion: reduce) {
 .ord-game *, .ord-game *::before, .ord-game *::after { animation: none !important; transition: none !important; }
}

/* Picking up a product does not move or resize its shelf slot. */
.ord-item:hover .ord-art .oi,.ord-item:active .ord-art .oi {transform:none;translate:none;scale:1;}
/* Keep each of the nine shelf slots in a stable compositing layer. Creating or
   removing a drag ghost otherwise re-rasterizes neighbouring SVGs in WebViews. */
.ord-item { will-change: transform; }