/* Problem-specific content styles; the worksheet shell lives in /site-src/worksheet.css. */
[data-problem-id="9"] .problem-setup {
  margin: 0 0 0.16in;
}

[data-problem-id="9"] .problem-question {
  margin: 0.17in 0 0.13in;
  padding: 0.13in 0.16in;
  background: #eef9fb;
  border-left: 0.055in solid var(--gold);
  border-radius: 0.08in;
  break-inside: avoid;
}

[data-problem-id="9"] .packing-guide {
  margin: 0.16in 0 0.18in;
  padding: 0.12in 0.14in 0.14in;
  background:
  radial-gradient(circle at 90% 12%, rgb(247 207 70 / 22%) 0 0.48in, transparent 0.49in),
  linear-gradient(145deg, #f7fbff, #fff9ee);
  border: 1px solid var(--line);
  border-radius: 0.12in;
  break-inside: avoid;
}

[data-problem-id="9"] .packing-guide figcaption {
  margin: 0 0 0.09in;
  color: var(--jewel-dark);
  font-size: 0.125in;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

[data-problem-id="9"] .container-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.11in;
}

[data-problem-id="9"] .container-card {
  display: flex;
  min-width: 0;
  min-height: 1.3in;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.02in;
  padding: 0.08in 0.07in 0.09in;
  color: var(--ink);
  background: rgb(255 255 255 / 92%);
  border: 1px solid #b8ccd9;
  border-radius: 0.09in;
  box-shadow: 0 0.025in 0.08in rgb(24 49 79 / 8%);
  text-align: center;
}

[data-problem-id="9"] .container-card strong {
  color: #17324f;
  font-size: 0.16in;
  line-height: 1.15;
}

[data-problem-id="9"] .container-card > span {
  color: var(--muted-ink);
  font-size: 0.125in;
  line-height: 1.2;
}

[data-problem-id="9"] .container-card .container-count {
  width: 100%;
  margin-top: 0.035in;
  padding-top: 0.035in;
  color: #17324f;
  border-top: 1px dashed #8aa8b8;
  font-size: 0.125in;
  font-weight: 850;
}

[data-problem-id="9"] .container-picture {
  position: relative;
  display: flex;
  width: 1.1in;
  height: 0.67in;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.035in;
}

[data-problem-id="9"] .crate-picture {
  gap: 0.03in;
  padding: 0.12in 0.08in 0.08in;
  background:
  linear-gradient(90deg, transparent 46%, #7d4926 47% 53%, transparent 54%),
  linear-gradient(#b96b32, #8c4f27);
  border: 0.035in solid #663a21;
  border-radius: 0.04in;
  box-shadow:
  inset 0 0 0 0.025in rgb(255 255 255 / 18%),
  0 0.04in 0 rgb(67 49 31 / 16%);
}

[data-problem-id="9"] .crate-picture::before,
[data-problem-id="9"] .crate-picture::after {
  position: absolute;
  top: 0.04in;
  bottom: 0.04in;
  width: 0.035in;
  content: "";
  background: #6f3e22;
}

[data-problem-id="9"] .crate-picture::before {
  left: 0.09in;
}

[data-problem-id="9"] .crate-picture::after {
  right: 0.09in;
}

[data-problem-id="9"] .box-picture {
  width: 0.82in;
  height: 0.59in;
  background: linear-gradient(145deg, #e64040, #b91f2a 64%);
  border: 0.03in solid #8e1620;
  border-radius: 0.07in;
  box-shadow:
  inset 0 -0.08in 0 rgb(81 11 18 / 16%),
  0 0.04in 0 rgb(67 49 31 / 14%);
}

[data-problem-id="9"] .box-picture::after {
  position: absolute;
  right: -0.03in;
  bottom: 0.13in;
  left: -0.03in;
  height: 0.055in;
  content: "";
  background: #f2d456;
  border-top: 0.015in solid #9c7d13;
  border-bottom: 0.015in solid #9c7d13;
}

[data-problem-id="9"] .sleeve-picture {
  width: 0.42in;
  height: 0.63in;
  background: linear-gradient(145deg, #dff4fb, #8fd3e4);
  border: 0.025in solid #4f9cb2;
  border-radius: 0.08in 0.08in 0.04in 0.04in;
  box-shadow: inset 0.05in 0 0 rgb(255 255 255 / 38%);
}

[data-problem-id="9"] .poke-ball {
  position: relative;
  z-index: 2;
  display: block;
  width: 0.31in;
  height: 0.31in;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(#e74343 0 44%, #24313d 45% 55%, #f8fbfd 56% 100%);
  border: 0.018in solid #25313c;
  border-radius: 50%;
  box-shadow: inset -0.025in -0.025in 0 rgb(0 0 0 / 10%);
}

[data-problem-id="9"] .poke-ball::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.09in;
  height: 0.09in;
  content: "";
  background: #ffffff;
  border: 0.018in solid #25313c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

[data-problem-id="9"] .crate-picture .poke-ball {
  width: 0.24in;
  height: 0.24in;
}

[data-problem-id="9"] .crate-picture .poke-ball::after {
  width: 0.065in;
  height: 0.065in;
}