:root{--navy:#061018;--panel:rgba(5,15,22,.95);--line:rgba(150,183,201,.27);--gold:#ffc928;--green:#79d058;--red:#f05c50;--cyan:#68c8ee;--text:#eef4f7;--muted:#9fb1bc}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;overflow:hidden;background:#02070b;color:var(--text);font-family:"Arial Narrow",Inter,"Segoe UI",Arial,sans-serif;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}button{font:inherit;touch-action:manipulation}.viewport{height:100%;height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#173448,#02070b 74%);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.stage{position:relative;width:min(100vw,150vh);aspect-ratio:3/2;overflow:hidden;background:#071018;box-shadow:0 24px 90px #000;border:1px solid #263d49;isolation:isolate}.layer{position:absolute}.background{inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.atmosphere{inset:0;z-index:1;background:linear-gradient(#020910e8 0 11%,transparent 22% 65%,#02090fef 79%);pointer-events:none}.ui{z-index:30}
.hud{left:0;right:0;top:0;height:11.5%;display:flex;align-items:center;gap:.75%;padding:.8% 1.3%;background:linear-gradient(90deg,#061018fa,#0b1820ef);border-bottom:1px solid var(--line);box-shadow:0 7px 24px #0009}.brand{width:28%;display:flex;flex-direction:column;line-height:.93}.brand>span{font-size:1.02vw;font-weight:800}.brand strong{font-size:1.75vw;line-height:1.05;color:var(--gold)}.brand small{font-size:.75vw;margin-top:.25rem}.mode{height:82%;width:50%;padding:.55% 1.6%;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:.45rem;background:#061019b8}.mode>span{font-size:.65vw;color:var(--gold);letter-spacing:.12em;font-weight:900}.mode strong{font-size:1.05vw;margin:.15rem 0}.mode small{font-size:.68vw;color:#c7d2d8}.metric{height:82%;min-width:9.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:.45rem;background:#0a171ddd}.metric span{font-size:.62vw;color:var(--muted);letter-spacing:.06em}.metric strong{font-size:1.55vw}
.machines{inset:0;z-index:5}.machine{appearance:none;position:absolute;top:17%;width:21%;height:45%;padding:0;color:inherit;background:transparent;cursor:pointer;border:2px solid transparent;border-radius:1rem;transition:.2s;filter:drop-shadow(0 12px 14px #0009)}.machine:nth-child(1){left:7.5%}.machine:nth-child(2){left:28.8%}.machine:nth-child(3){left:50.2%}.machine:nth-child(4){left:71.5%}.machine:hover:not(.disabled){border-color:#7ed6ff88;background:#4ac9ff0a}.machine.selected{border-color:var(--gold);box-shadow:0 0 0 4px #ffc92833,0 0 38px #ffc928b0}.machine.processing{animation:processPulse .28s ease 3}.machine.disabled{cursor:default}
.machine:nth-child(1){--machine-yaw:3.2deg;--stain-a:31%;--stain-b:72%}.machine:nth-child(2){--machine-yaw:1.6deg;--stain-a:68%;--stain-b:38%}.machine:nth-child(3){--machine-yaw:-1.6deg;--stain-a:43%;--stain-b:78%}.machine:nth-child(4){--machine-yaw:-3.2deg;--stain-a:74%;--stain-b:29%}.machine-visual{position:absolute;inset:12% 0 0;width:100%;height:88%;pointer-events:none;perspective:1800px}.machine-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 88%;filter:brightness(.7) contrast(1.2) saturate(.62) sepia(.16);transition:opacity .16s ease,transform .18s ease}.machine-visual::after{content:"";position:absolute;inset:0;transform-origin:50% 88%;transform:rotateY(var(--machine-yaw));background:radial-gradient(ellipse at var(--stain-a) 56%,#6f1b2866 0 2%,#6f1b2826 4%,transparent 9%),radial-gradient(ellipse at var(--stain-b) 43%,#183d5b73 0 1.5%,#183d5b22 4%,transparent 8%),radial-gradient(ellipse at 56% 72%,#4a2b1770 0 2%,#4a2b1724 5%,transparent 11%),linear-gradient(105deg,transparent 25%,#261b1540 48%,transparent 62%);-webkit-mask:url("../assets/machines/machine_closed.png") center/contain no-repeat;mask:url("../assets/machines/machine_closed.png") center/contain no-repeat;mix-blend-mode:multiply;opacity:.72}.machine .closed{transform:rotateY(var(--machine-yaw)) scale(1)}.machine .open{opacity:0;transform:rotateY(var(--machine-yaw)) scale(.985)}.machine.door-open .closed{opacity:0;transform:rotateY(var(--machine-yaw)) scale(.985)}.machine.door-open .open{opacity:1;transform:rotateY(var(--machine-yaw)) scale(1)}
.machine-panel{position:absolute;left:7%;right:7%;top:0;min-height:21%;padding:3.5% 5%;text-align:center;border-radius:.4rem;background:linear-gradient(#10232e,#07131b);border:1px solid #607683;box-shadow:0 6px 14px #0009;pointer-events:none}.machine-panel strong{display:block;font-size:1.02vw;letter-spacing:.03em}.machine-panel span{display:flex;justify-content:space-between;font-size:.67vw;margin-top:2%;color:#d8e2e7}.machine-panel i{font-style:normal;color:var(--green)}.machine-panel .late{color:var(--red)}.machine-panel b{color:var(--cyan)}
.operator-layer{inset:0;z-index:9;pointer-events:none}.operator{position:absolute;left:22%;top:44.5%;width:36%;height:27%;object-fit:contain;filter:drop-shadow(0 10px 8px #0009)}.pallet-load{position:absolute;left:38%;top:51.5%;width:15%;height:14%;object-fit:contain;opacity:0;transform-origin:center;filter:drop-shadow(0 9px 8px #000a);transition:left .55s cubic-bezier(.22,.85,.25,1),top .55s cubic-bezier(.22,.85,.25,1),width .55s,opacity .2s,transform .25s}.pallet-load.loaded{opacity:1;animation:settle .35s ease}.pallet-load.at-machine{width:11%;top:50.5%}.pallet-load.entering{top:43%;width:5.5%;opacity:0;transform:scale(.55)}
.lots-panel{left:.6%;right:.6%;top:70.5%;height:23.5%;padding:.8% 1%;border:1px solid #40545f;border-radius:.55rem;background:linear-gradient(135deg,#07141df9,#091720f6);box-shadow:0 -12px 35px #0009}.lots-heading{height:23%;display:flex;align-items:center;justify-content:space-between}.lots-heading>div:first-child{display:flex;flex-direction:column}.lots-heading span{font-size:.62vw;color:var(--muted);letter-spacing:.1em}.lots-heading strong{font-size:.95vw}.pcp-suggestion{display:none;gap:.8rem;align-items:center;padding:.45% 1%;border:1px solid #806e29;border-radius:.35rem;background:#2c240fe6}.stage.pcp-phase .pcp-suggestion{display:flex}.pcp-suggestion span{color:var(--gold)}.pcp-suggestion strong{font-size:.76vw;color:#fff}
.lot-cards{height:74%;display:grid;grid-template-columns:repeat(6,1fr);gap:.75%}.lot-card{position:relative;display:grid;grid-template-columns:43% 1fr;align-items:center;padding:3%;border:2px solid #788b94;border-radius:.5rem;background:linear-gradient(145deg,#f5f7f7,#b9c1c5);color:#0b1115;cursor:pointer;box-shadow:0 7px 14px #0008;transition:transform .18s,box-shadow .18s,border-color .18s,opacity .3s}.lot-card:hover:not(.disabled){transform:translateY(-4%);box-shadow:0 12px 25px #000b}.lot-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px #ffc92855,0 0 28px #ffc928c0}.lot-card img{width:100%;height:100%;object-fit:contain;animation:cardFloat 2.6s ease-in-out infinite}.lot-card:nth-child(even) img{animation-delay:-1.2s}.lot-card .meta{display:flex;flex-direction:column;align-items:flex-start}.lot-card .meta strong{font-size:.78vw}.lot-card .meta b{font-size:.64vw;text-transform:uppercase}.lot-card .meta span{font-size:.58vw;margin-top:3%}.lot-card .meta small{font-size:.55vw;color:#a33329;margin-top:3%}.lot-card.removing{opacity:0;transform:translateY(25%) scale(.8)}.lot-card.disabled{cursor:default;filter:saturate(.75)}
.controls{left:0;right:0;bottom:0;height:6%;padding:.55% .8%;display:flex;gap:.7%;align-items:center;background:#050e14fa;border-top:1px solid var(--line)}.controls button{height:100%;border-radius:.35rem;cursor:pointer;font-size:.7vw;font-weight:800}.controls button:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed}.secondary{padding:0 1%;border:1px solid #455b67;background:#0c1b24;color:#dbe5ea}.secondary:hover:not(:disabled){background:#132833}.start-button{border-color:#3786a7;color:#8cddff}.danger-button{min-width:15%;color:#ffb04d;border-color:#8b692c}.selection-summary{margin-left:auto;display:flex;flex-direction:column;text-align:right;line-height:1.15}.selection-summary span{font-size:.63vw;color:var(--muted)}.selection-summary strong{font-size:.7vw}.confirm{min-width:18%;padding:0 1.5%;border:1px solid #9e8525;background:linear-gradient(#ffdc4f,#dea600);color:#171207;box-shadow:0 5px 14px #0008}.confirm:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed}.confirm span{margin-left:.5rem}
.toast{left:50%;top:12.5%;transform:translate(-50%,-20%);padding:.65% 1.3%;border:1px solid #506875;border-radius:2rem;background:#061018f4;box-shadow:0 8px 24px #0009;font-size:.72vw;opacity:0;transition:.25s;z-index:60}.toast.show{opacity:1;transform:translate(-50%,0)}
.offline-status{left:1%;top:12.5%;z-index:65;display:flex;align-items:center;gap:.4rem;padding:.4% .65%;border:1px solid #8d7827;border-radius:2rem;background:#11170fee;color:#f4d866;font-size:.56vw;box-shadow:0 5px 18px #0008}.offline-status span{width:.55rem;height:.55rem;border-radius:50%;background:#f4b52e;box-shadow:0 0 10px #f4b52e}.offline-status small{color:#d8e1e5}.offline-status.ready{border-color:#4c884e;color:#aee69e}.offline-status.ready span{background:#79d058;box-shadow:0 0 10px #79d058}.offline-status.failed{border-color:#9a4944;color:#ff9c94}.offline-status.failed span{background:#f05c50;box-shadow:0 0 10px #f05c50}
.install-button{right:1%;top:12.5%;z-index:65;padding:.55% .8%;border:1px solid #8d7827;border-radius:.4rem;background:#1d190aee;color:var(--gold);font-size:.62vw;font-weight:900;cursor:pointer}.install-card{text-align:left}.install-card h1{text-align:center}.install-card ol{margin:1.5rem auto;max-width:34rem;padding-left:1.5rem;color:#dce6eb;line-height:1.7;font-size:.9vw}.install-card .confirm{display:block;height:3.2vw;margin:1rem auto 0}.rotate-help{inset:0;z-index:120;display:grid;place-items:center;background:#02070b}.rotate-help[hidden]{display:none}.rotate-help div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem}.rotate-help span{font-size:18vw;color:var(--gold);line-height:1}.rotate-help strong{font-size:7vw;margin:.5rem}.rotate-help small{font-size:4vw;color:var(--muted);max-width:80vw}
.overlay{inset:0;z-index:80;display:grid;place-items:center;background:radial-gradient(circle at center,#0b2230ed,#02070bf7)}.overlay[hidden]{display:none}.overlay-card{position:relative;width:58%;padding:4%;text-align:center;border:1px solid #536d7b;border-radius:1rem;background:linear-gradient(145deg,#0c202b,#051019);box-shadow:0 25px 80px #000}.eyebrow{font-size:.72vw;color:var(--gold);font-weight:900;letter-spacing:.16em}.overlay h1{font-size:1.75vw;line-height:1.18;margin:1rem 0}.overlay p{font-size:.85vw;color:#becbd2}.countdown{display:flex;justify-content:center;gap:.65rem;margin-top:2rem}.countdown span{width:.65vw;height:.65vw;border-radius:50%;background:var(--gold);animation:countPulse .9s infinite}.countdown span:nth-child(2){animation-delay:.15s}.countdown span:nth-child(3){animation-delay:.3s}.result-card .confirm{height:3.2vw;margin-top:1rem}.comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:4%;align-items:center;margin:4% 0}.comparison article{padding:8%;border:1px solid #5c4040;border-radius:.6rem;background:#1f0d0ddd}.comparison article span,.comparison article small{display:block;font-size:.72vw;color:var(--muted)}.comparison article strong{display:block;font-size:3vw;color:var(--red)}.comparison .pcp-result{border-color:#416442;background:#0d1e11dd}.comparison .pcp-result strong{color:var(--green)}.versus{font-size:1.4vw;color:var(--muted)}
@keyframes cardFloat{50%{transform:translateY(-5px)}}@keyframes settle{0%{transform:translateY(-10%) scale(.92)}70%{transform:translateY(3%) scale(1.03)}100%{transform:none}}@keyframes processPulse{50%{box-shadow:0 0 52px #ffc928,inset 0 0 30px #ffc92844}}@keyframes countPulse{50%{opacity:.3;transform:scale(.65)}}
@media(max-aspect-ratio:3/2){.stage{width:100vw;height:auto}}@media(min-aspect-ratio:3/2){.stage{height:100vh;height:100dvh;width:auto}}@media(max-height:600px) and (orientation:landscape){.viewport{display:block}.stage{width:100%;height:100%;aspect-ratio:auto;border:0}.background{object-fit:fill}.controls button{min-width:9%;font-size:max(.7vw,10px)}.confirm{min-width:19%}.danger-button{min-width:18%}.lot-card{border-width:1px}.machine{border-width:1px}.brand>span{font-size:max(1.02vw,9px)}.brand strong{font-size:max(1.75vw,14px)}.brand small,.mode small{font-size:max(.68vw,8px)}.mode>span{font-size:max(.65vw,8px)}.mode strong{font-size:max(1.05vw,10px)}.metric span{font-size:max(.62vw,8px)}.metric strong{font-size:max(1.55vw,14px)}.machine-panel strong{font-size:max(1.02vw,10px)}.machine-panel span{font-size:max(.67vw,8px)}.lots-heading span{font-size:max(.62vw,8px)}.lots-heading strong{font-size:max(.95vw,10px)}.lot-card .meta strong{font-size:max(.78vw,9px)}.lot-card .meta b{font-size:max(.64vw,8px)}.lot-card .meta span,.lot-card .meta small{font-size:max(.55vw,7px)}.selection-summary{display:none}.install-button{font-size:max(.62vw,9px)}.offline-status{font-size:max(.56vw,8px);top:12%;padding:3px 7px}.toast{font-size:max(.72vw,9px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}