.level-countdown {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 9px;
  border: 1px solid #b88e60;
  border-radius: 7px;
  background: #f7e8cd;
  color: var(--ink);
}

.level-countdown-number {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid #713019;
  border-radius: 5px;
  background: var(--rust);
  color: var(--cream);
  box-shadow: 0 2px 0 #713019;
  font: 800 1.6rem/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.level-countdown:not([data-paused="true"]) .level-countdown-number {
  animation: level-countdown-beat 1s ease-out infinite;
}

.level-countdown-copy { min-width: 0; font-size: .84rem; line-height: 1.25; }
.level-countdown-copy strong { display: block; font: 800 1.13rem/1.05 var(--display); }
.level-countdown-copy span { color: #69543d; }

.level-countdown-toggle {
  min-height: 38px;
  padding: 5px 8px;
  border: 1px solid #aa8964;
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.1;
}

.level-countdown-toggle:hover { background: #fff3d8; border-color: var(--rust); }

#delivery-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-top: 1px solid #8a956b;
  background: #e4e8ca;
  color: #324324;
  animation: level-delivery-banner 290ms ease-out both;
}

.delivery-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid #63774c;
  border-radius: 6px;
  background: #cdd7ab;
}

.delivery-icon::before {
  content: "";
  position: absolute;
  inset: 9px 7px;
  border: 2px solid #4a6035;
  border-radius: 3px;
  background: linear-gradient(90deg, #819455 38%, #ffebad 38% 62%, #819455 62%);
  box-shadow: 0 3px 0 #50623b;
  transform: rotate(-8deg);
}

.delivery-copy strong { display: block; font-size: .92rem; }
.delivery-copy p { margin: 3px 0 0; font-size: .8rem; line-height: 1.35; }

#delivery-truck {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#delivery-truck::before {
  content: "";
  position: absolute;
  left: 0;
  top: 69%;
  width: clamp(48px, 10vw, 82px);
  aspect-ratio: 1.8;
  background:
    radial-gradient(circle at 25% 77%, #d1c8a4 0 3%, #2c2b1f 4% 9%, transparent 10%),
    radial-gradient(circle at 75% 77%, #d1c8a4 0 3%, #2c2b1f 4% 9%, transparent 10%),
    linear-gradient(110deg, #ead49a 0 83%, #e0c287 85%) 88% 43% / 21% 18% no-repeat,
    linear-gradient(#596842, #465333) 88% 50% / 31% 47% no-repeat,
    linear-gradient(90deg, #6c8050 44%, #ddbd75 45% 57%, #6c8050 58%) 0 29% / 65% 49% no-repeat,
    linear-gradient(#374227, #374227) 8% 78% / 85% 11% no-repeat;
  filter: drop-shadow(0 2px 0 #4b3a226a);
  animation: level-delivery-truck 1900ms linear both;
}

#delivery-truck::after {
  content: "";
  position: absolute;
  left: 0;
  top: 69%;
  width: 10px;
  height: 6px;
  border-radius: 50%;
  background: #9a754d8c;
  box-shadow: -10px 1px 0 -1px #af8f639a, -18px 3px 0 -2px #9a754d8c;
  animation: level-delivery-dust 1900ms linear both;
}

@keyframes level-countdown-beat {
  0% { transform: scale(1); }
  13% { transform: scale(1.065); }
  36%, 100% { transform: scale(1); }
}

@keyframes level-delivery-banner {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes level-delivery-truck {
  0% { left: -12%; top: 71%; transform: rotate(-10deg); }
  28% { top: 54%; transform: rotate(-7deg); }
  50% { top: 59%; transform: rotate(4deg); }
  72% { top: 51%; transform: rotate(-6deg); }
  100% { left: 110%; top: 42%; transform: rotate(-8deg); }
}

@keyframes level-delivery-dust {
  0% { left: -13%; top: 76%; opacity: 0; }
  12% { opacity: .75; }
  28% { top: 60%; }
  50% { top: 65%; }
  72% { top: 57%; }
  84% { opacity: .75; }
  100% { left: 108%; top: 48%; opacity: 0; }
}

@media (max-width: 430px) {
  .level-countdown { gap: 8px; }
  .level-countdown-number { width: 37px; height: 37px; font-size: 1.42rem; }
  .level-countdown-copy { font-size: .76rem; }
  .level-countdown-copy strong { font-size: 1.02rem; }
  .level-countdown-toggle { max-width: 86px; min-height: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .level-countdown:not([data-paused="true"]) .level-countdown-number,
  #delivery-banner { animation: none; }
  #delivery-truck { display: none; }
}