.workshop-art {
  background-image: linear-gradient(rgba(35, 28, 22, .04), rgba(35, 28, 22, .09)), url("assets/games/prime-rectangles/mosaic-workshop-table-background.png");
  background-position: center top;
  height: 980px;
}

.workshop-room,
.workshop-grid { min-height: 780px; }

.workshop-grid {
  align-items: end;
  gap: 48px;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
  padding: 285px 58px 46px;
}

.tile-bench,
.mission-card {
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tile-bench {
  justify-content: flex-end;
  min-height: 430px;
  padding: 0;
}

.bench-head,
.number-medallion { display: none; }

.array-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 245px;
  padding: 8px;
}

.tile {
  box-shadow: 0 6px 8px rgba(73, 43, 25, .24), inset 0 -4px 0 rgba(24, 90, 94, .2), inset 0 2px 1px rgba(255,255,255,.52);
}

.arrangement-status {
  background: transparent;
  border: 0;
  color: #3e342c;
  font-size: .9rem;
  padding: 5px 0;
  text-shadow: 0 1px rgba(255,255,255,.55);
}

.arrangement-status.success,
.arrangement-status.fail {
  background: transparent;
  border: 0;
  color: #3e342c;
}

.table-patterns {
  background: transparent;
  border: 0;
  margin-top: 2px;
  padding: 0;
}

.table-patterns > span {
  color: #4c4036;
  text-shadow: 0 1px rgba(255,255,255,.55);
}

.row-picker button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(62, 52, 44, .4);
  border-radius: 0;
  color: #3e342c;
  min-width: 82px;
  padding: 7px 5px;
  text-shadow: 0 1px rgba(255,255,255,.55);
}

.row-picker button:hover,
.row-picker button:focus-visible,
.row-picker button.drag-over {
  background: rgba(255, 250, 230, .3);
  border-color: #277f80;
  box-shadow: 0 7px 12px rgba(73,43,25,.12);
}

.row-picker button.factor,
.row-picker button.no-factor,
.row-picker button.tested {
  background: transparent;
}

.mission-card {
  align-self: end;
  background:
    radial-gradient(circle at 13% 18%, rgba(161, 112, 55, .11), transparent 22%),
    radial-gradient(circle at 87% 72%, rgba(143, 91, 39, .09), transparent 25%),
    repeating-linear-gradient(3deg, rgba(112, 77, 40, .025) 0 1px, transparent 1px 7px),
    linear-gradient(100deg, #f7e9c8 0%, #fff5dc 48%, #f1dfb9 100%);
  border: 1px solid rgba(117, 79, 42, .36);
  border-radius: 7px 14px 9px 12px;
  box-shadow: 0 18px 36px rgba(79, 49, 28, .27), inset 0 0 28px rgba(128, 82, 36, .1), inset 0 1px rgba(255,255,255,.75);
  clip-path: polygon(.7% 0, 98.7% .5%, 100% 2.4%, 99.5% 97.7%, 98.2% 100%, 1.3% 99.4%, 0 97.2%, .45% 2.5%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 410px;
  padding: 24px;
  transform: rotate(.25deg);
}

.mission-card::before {
  background: rgba(225, 187, 116, .66);
  box-shadow: 0 2px 5px rgba(77,48,27,.12);
  content: "";
  height: 22px;
  left: 50%;
  position: absolute;
  top: -10px;
  transform: translateX(-50%) rotate(-1deg);
  width: 92px;
}

.mission-head,
.mission-icon { display: none; }

.mission-card h2 {
  color: #293247;
  margin-top: 0;
  text-shadow: 0 1px rgba(255,255,255,.6);
}

.mission-card > p {
  color: #413a34;
  max-width: 430px;
  text-shadow: 0 1px rgba(255,255,255,.55);
}

.tested-list,
.decision-box,
.feedback {
  background: transparent;
  border: 0;
  padding-left: 0;
  padding-right: 0;
}

.decision-box { border-top: 1px solid rgba(62,52,44,.24); }

.decision-box > span {
  color: #3f342c;
  font-size: .78rem;
}

.decision-box button {
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(62,52,44,.35);
  color: #293247;
}

.decision-box button:hover,
.decision-box button:focus-visible {
  background: rgba(232,247,244,.5);
}

.feedback p { color: #3f3832; }

.rectangle-proof {
  box-shadow: 0 4px 8px rgba(73,43,25,.12);
}

@media (max-width: 850px) {
  .workshop-art { height: 1580px; }
  .workshop-room,
  .workshop-grid { min-height: 1420px; }
  .workshop-grid {
    align-content: start;
    gap: 26px;
    grid-template-columns: 1fr;
    padding: 480px 24px 44px;
  }
  .tile-bench,
  .mission-card { min-height: auto; }

  .mission-card { padding: 22px; }
}


@media (max-width: 620px) {
  .workshop-grid { padding: 410px 14px 36px; }
  .tile-bench { padding: 0; }
  .array-stage { min-height: 230px; min-width: 0; }
  .mission-card { padding: 19px 16px; }
}