/* Taro's cart, inside the 520×268 field. */
.cart { position: absolute; inset: 0; --wood-light: #e7b57d; --wood-shade: #8d513c; }
.cart__badges { position: absolute; z-index: 2; left: 8px; right: 8px; top: 8px; display: flex; justify-content: space-between; pointer-events: none; }
.cart__total { --chip: var(--math); min-width: 112px; justify-content: space-between; white-space: nowrap; font-size: var(--text-field); line-height: 1.2; }
.cart__total::before {
  border: 1px solid var(--ink); background: var(--math); clip-path: none;
  box-shadow: inset 3px 3px 0 #ffd09a, inset -3px -4px 0 #d47832;
}
.cart__total-num {
  font-family: var(--font-pixel); font-size: var(--text-name); line-height: 1.2;
  background: var(--paper); box-shadow: 0 0 0 1px var(--ink), inset 0 -2px 0 var(--paper-shade);
}

/* Crate sizes: a small rail of crates between the totals. The picked one is lifted inside an ink ring,
   and a bigger number comes in a wider crate, so weight shows as size, color and number. */
.cart__sizes { position: absolute; z-index: 3; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 8px; }
.cart__sizes::before {
  content: ''; position: absolute; z-index: -1; left: -6px; right: -6px; bottom: -4px; height: 12px;
  border: 1px solid var(--ink); background: var(--wood);
  box-shadow: inset 0 2px 0 var(--wood-light), inset 0 -3px 0 var(--wood-shade); pointer-events: none;
}
.cart__size {
  --crate-width: 36px; --crate-height: 44px;
  width: 36px; height: 44px; padding: 0; cursor: pointer;
  font-family: var(--font-pixel); font-size: var(--text-name); font-weight: 700; line-height: 1; color: var(--ink);
  transition: transform 80ms steps(3);
}
.cart__size.cart__crate--w2 { --crate-width: 40px; width: 40px; }
.cart__size.cart__crate--w3 { --crate-width: 44px; width: 44px; }
.cart__size.cart__crate--w5 { --crate-width: 50px; width: 50px; }
.cart__size[aria-checked="true"] { transform: translateY(-3px); outline: 3px solid var(--ink); outline-offset: 2px; }
.cart__size:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }

.cart__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: var(--path); border-top: 1px solid var(--ink);
  box-shadow: inset 0 3px 0 var(--paper-shade), inset 0 -6px 0 #dbb67b;
}
.cart__ground::after {
  content: ''; position: absolute; left: 18px; top: 10px; width: 8px; height: 2px; background: #dbb67b;
  box-shadow: 52px 8px #dbb67b, 128px 2px #dbb67b, 202px 10px #dbb67b, 292px 0 #dbb67b, 366px 8px #dbb67b, 462px 2px #dbb67b;
}

.cart__move { position: absolute; left: 40px; top: 64px; width: 440px; height: 172px; }
.cart__body { position: absolute; inset: 0; transform-origin: 50% 100%; transition: transform .25s steps(3); }

.cart__bay {
  position: absolute; top: 0; width: 216px; height: 120px;
  border: 4px solid transparent;
}
.cart__art { position: absolute; display: block; pointer-events: none; shape-rendering: crispEdges; }
.cart__art--bay, .cart__art--chassis { left: -4px; top: -4px; }
.cart__bay[data-side="left"] { left: 0; }
.cart__bay[data-side="right"] { right: 0; }
.cart__load {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.cart__load:hover { box-shadow: inset 0 0 0 2px var(--paper-shade); }
.cart__load:focus-visible { outline-offset: -6px; }
.cart__hint {
  padding: 2px 8px; background: var(--paper); border: 2px solid transparent; outline: 1px solid var(--ink); outline-offset: -1px;
  box-shadow: inset 0 2px 0 var(--white), inset 0 -3px 0 var(--paper-shade); font-size: var(--text-small); font-weight: 700;
}

/* Crates stack from the bottom of the bay, four to a row. Only the crates take taps; the bay is below. */
.cart__crates {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 100px; pointer-events: none;
  display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 4px;
}
.cart__crate {
  --crate-width: 45px; --crate-height: 48px;
  pointer-events: auto; width: 45px; height: 48px; padding: 0;
  font-family: var(--font-pixel); font-size: var(--text-name); font-weight: 700; line-height: 1; color: var(--ink);
}
.cart__size, .cart__crate { position: relative; isolation: isolate; border: 4px solid transparent; background: none; }
/* Keep the original four-pixel border space for text and taps; draw a one-pixel outline behind it. */
.cart__size::before, .cart__crate::before {
  content: ''; position: absolute; z-index: -1; inset: -4px; border: 1px solid var(--ink); background: var(--crate);
  box-shadow: inset 3px 3px 0 var(--crate-light), inset -4px -6px 0 var(--crate-shade),
    inset 0 7px 0 var(--crate), inset 0 8px 0 var(--crate-shade), inset 0 -10px 0 var(--crate), inset 0 -11px 0 var(--crate-shade);
}
.cart__size::after, .cart__crate::after {
  content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: var(--ink); pointer-events: none;
  box-shadow: calc(var(--crate-width) - 10px) 0 var(--ink), 0 calc(var(--crate-height) - 10px) var(--ink),
    calc(var(--crate-width) - 10px) calc(var(--crate-height) - 10px) var(--ink);
}
.cart__size:hover::before, .cart__crate:hover:not(:disabled)::before { background: var(--crate-light); }
.cart__crate--fixed { cursor: default; opacity: 1; }
/* A pale tie along the edge marks Taro's crates without covering the weight. */
.cart__crate--fixed::after {
  left: 1px; top: -4px; width: 4px; height: var(--crate-height); background: var(--paper-shade);
  box-shadow: -1px 0 0 var(--ink), 1px 0 0 var(--ink);
}
.cart__crate--w1 { --crate: var(--lantern); --crate-light: #ffe08f; --crate-shade: #d99a30; }
.cart__crate--w2 { --crate: var(--science); --crate-light: #9be7dd; --crate-shade: #279c96; }
.cart__crate--w3 { --crate: var(--reading); --crate-light: #b7deff; --crate-shade: #4284c7; }
.cart__crate--w5 { --crate: var(--writing); --crate-light: #ddcfff; --crate-shade: #8268c2; }

.cart__chassis { position: absolute; left: 12px; right: 12px; top: 120px; height: 16px; border: 4px solid transparent; }
.cart__axle {
  position: absolute; left: 72px; right: 72px; top: 148px; height: 8px; border: 1px solid var(--ink); background: var(--ink-soft);
  box-shadow: inset 0 2px 0 #7b80a5, inset 0 -2px 0 #34375f;
}
/* Stepped iron rims, wooden spokes and a square pin, all drawn at the native 40px size. */
.cart__wheel {
  position: absolute; top: 132px; width: 40px; height: 40px;
}
.cart__wheel--left { left: 56px; }
.cart__wheel--right { right: 56px; }

/* Calm motion: no lift animation on the size rail. */
.calm .cart__size { transition: none; }

/* A balanced roll trundles off and back; a wobble shakes. Calm motion removes both (kit.css). */
.cart--roll { animation: cart-roll 900ms steps(9) 1; }
.cart--wobble { animation: cart-wobble 480ms steps(6) 1; }
.cart--roll .cart__wheel { animation: cart-wheel 900ms steps(9) 1; }
@keyframes cart-roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
@keyframes cart-wobble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes cart-wheel { to { transform: rotate(360deg); } }