#ranking[hidden] { display: none; }
#harvest-station {
    box-sizing: border-box;
    position: relative;
    width: var(--ui-width, min(312px, 100vw));
    margin: 0 auto;
    padding: 3px 7px 7px;
    border: 3px solid #8b4513;
    border-radius: 6px;
    background: #ffe9da;
    color: #6b361f;
    font-family: 'MisakiGothic', sans-serif;
    box-shadow: 0 4px 0 #ba7650;
}

#conveyor { position: relative; height: 93px; overflow: hidden; }
#conveyor-art { position: relative; width: 100%; height: 112px; transform: scale(.82); transform-origin: top center; }
#pack-track { position: absolute; z-index: 2; inset: 13px 0 auto; height: 65px; }
.tomato-pack { position: absolute; top: 0; left: 68px; width: 158px; height: 66px; }
.queued-pack { left: 290px; transform: scale(.72); transform-origin: top left; opacity: .8; }
.pack-tray {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    border: 4px solid #8b4513;
    border-radius: 2px 2px 8px 8px;
    background: #f2c28b;
    box-shadow: inset 0 -7px #d58e5c;
}
.pack-slots { display: flex; gap: 3px; width: 124px; margin: 0 auto; padding: 2px 3px; }
.pack-slots i {
    position: relative;
    box-sizing: border-box;
    display: block;
    flex: 1;
    height: 24px;
    border: 2px solid #ae6740;
    border-radius: 50% 50% 36% 36%;
    background: #bd7951;
    box-shadow: inset 0 3px #8d4b34;
}
.pack-slots i.filled::after {
    content: '';
    position: absolute;
    inset: -3px -1px 1px;
    background: url('img/tomato.gif') center / contain no-repeat;
}
.pack-lid {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 158px;
    height: 27px;
    border: 4px solid #8b4513;
    border-radius: 6px 6px 2px 2px;
    background: #f5d0a1;
    transform-origin: left bottom;
    transform: translateY(-10px) rotate(-24deg);
    transition: transform .3s ease-in;
    text-align: center;
    font-size: 11px;
    line-height: 20px;
    color: #a0492f;
    white-space: nowrap;
}
.tomato-pack.closed .pack-lid { transform: translateY(7px) rotate(0); }
.belt {
    position: absolute;
    z-index: 1;
    left: 6px;
    right: 6px;
    bottom: 17px;
    height: 31px;
    border: 5px solid #6a392b;
    border-radius: 22px;
    background: #362e31;
    box-shadow: inset 0 3px #8a6960, 0 5px 0 #8b4513;
    overflow: hidden;
}
.belt-pattern {
    position: absolute;
    inset: 8px 0;
    background: repeating-linear-gradient(90deg, #b07d61 0 11px, #4d3835 11px 14px);
}
.belt-roller {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    top: -1px;
    width: 23px;
    height: 23px;
    border: 4px solid #e7b78b;
    border-radius: 50%;
    background: #6b3d33;
    box-shadow: inset 0 0 0 3px #b78562;
}
.belt-roller.left { left: 1px; }
.belt-roller.right { right: 1px; }
.belt-feet { position: absolute; bottom: 1px; left: 36px; right: 36px; display: flex; justify-content: space-between; }
.belt-feet span { width: 14px; height: 14px; background: #8b4513; }
#conveyor.moving #pack-track { animation: pack-dispatch .9s ease-in-out forwards; }
#conveyor.moving .belt-pattern { animation: belt-motion .22s linear infinite; }
#conveyor.moving .belt-roller { animation: roller-motion .35s linear infinite; }
@keyframes pack-dispatch { to { transform: translateX(-222px); } }
@keyframes belt-motion { to { background-position-x: -28px; } }
@keyframes roller-motion { to { transform: rotate(-360deg); } }

#harvest-button {
    box-sizing: border-box;
    position: relative;
    z-index: 4;
    display: block;
    width: min(220px, calc(var(--ui-width, 312px) - 24px));
    min-height: 46px;
    margin: 8px auto 7px;
    padding: 5px 10px;
    border: 3px solid #823c27;
    border-radius: 4px;
    background: #f17752;
    color: white;
    font: 22px/1.2 'MisakiGothic', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 0 #823c27;
}
#harvest-button:disabled { background: #b5a69c; border-color: #766c67; box-shadow: 0 4px 0 #766c67; cursor: default; }
#harvest-button:not(:disabled) {
    background: linear-gradient(90deg, #f36b83, #f7a45b, #f4d96b, #70cf8c, #67bde7, #b48be1);
    color: #4c2622;
    text-shadow: 0 1px rgba(255, 255, 255, .65);
    animation: harvest-pulse .5s ease-in-out infinite alternate;
}
@keyframes harvest-pulse {
    from { filter: brightness(1); transform: scale(1); box-shadow: 0 4px 0 #823c27; }
    to { filter: brightness(1.35); transform: scale(1.08); box-shadow: 0 0 0 3px white, 0 0 14px 6px #ffdc4f; }
}
.merge-points {
    position: absolute;
    z-index: 18;
    color: #8B4513;
    font: bold 20px/1 'MisakiGothic', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;
    animation: merge-points-float 1s ease-out forwards;
}
@keyframes merge-points-float {
    0% { opacity: 0; transform: translate(-50%, -30%); }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -160%); }
}
#harvest-status { min-height: 1em; margin: 4px 0 0; text-align: center; font-size: 12px; }
.harvest-clone { position: fixed; z-index: 100; pointer-events: none; transform-origin: center; }
#game-over-confetti { position: fixed; inset: 0; z-index: 110; overflow: hidden; pointer-events: none; }
#game-over-confetti span {
    position: absolute;
    top: -5vh;
    left: var(--left);
    width: 7px;
    height: 12px;
    border-radius: 1px;
    background: var(--color);
    opacity: 0;
    animation: confetti-fall var(--duration) linear var(--delay) forwards;
}
#game-over-confetti span:nth-child(3n) { width: 10px; height: 7px; }
@keyframes confetti-fall {
    0% { transform: translate3d(0, -4vh, 0) rotate(0); opacity: 0; }
    10%, 85% { opacity: .9; }
    100% { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); opacity: 0; }
}
.harvest-clone img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.harvest-outline { position: absolute; inset: -5%; width: 110%; height: 110%; overflow: visible; }
.harvest-outline circle {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 296;
    stroke-dashoffset: 296;
    filter: drop-shadow(0 1px 0 #8b4513);
}
.harvest-clone.outlined .harvest-outline circle { animation: trace-harvest var(--outline-duration, 460ms) linear forwards; }
@keyframes trace-harvest { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    #harvest-button:not(:disabled) { animation: none; }
    .merge-points { animation: none; }
    .pack-lid { transition-duration: .01ms; }
    .harvest-clone.outlined .harvest-outline circle { animation-duration: .01ms; }
}