.course-scene {
  position: absolute;
  inset: 12% 2.5% 10%;
  font-family: inherit;
  color: #4e3926;
  container-type: normal;
}
.course-scene button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.course-scene button:focus-visible {
  outline: 0.32cqw solid #2164b4;
  outline-offset: 0.2cqw;
}
.course-mission {
  position: absolute;
  left: 10%;
  right: 0;
  top: 0;
  height: 15%;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0 1.2cqw;
  border-radius: 1.4cqw;
  background: #fff7e8ed;
  box-shadow: 0 0.35cqw 1.3cqw #594b2820;
}
.course-mission p {
  flex: 1;
  font-size: 1.5cqw;
  font-weight: 750;
  line-height: 1.5;
  margin: 0;
}
.course-round {
  font-size: 1.2cqw;
  background: #e3eacb;
  padding: 0.5cqw 0.8cqw;
  border-radius: 1cqw;
  white-space: nowrap;
}
.course-button {
  border: 0;
  border-bottom: 0.3cqw solid #c9ac78;
  background: #fff0cb;
  padding: 0.75cqw 1cqw;
  border-radius: 1.1cqw;
  font-size: 1.25cqw;
  font-weight: 800;
  white-space: nowrap;
  min-height: 3.2cqw;
}
.course-button:hover {
  background: #fff9df;
}
.course-button.primary {
  background: #578454;
  color: #fffced;
  border-color: #335b3c;
}
.course-playfield {
  position: absolute;
  left: 14%;
  right: 17%;
  top: 19%;
  height: 47%;
}
.course-destinations {
  height: 100%;
  display: flex;
  gap: 2cqw;
  align-items: center;
  justify-content: center;
}
.course-destination {
  flex: 1;
  max-width: 95%;
  height: 86%;
  position: relative;
  filter: drop-shadow(0 0.6cqw 0.4cqw #574d2828);
}
.course-destination .course-zone {
  height: 100%;
}
.course-zone {
  position: relative;
  min-width: 0;
  isolation: isolate;
}
.course-target {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0.3cqw dashed #b99157;
  border-radius: 48%;
  background: #fff2dccc;
  box-shadow: inset 0 -0.8cqw 0 #dec5a399;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.7cqw;
  font-size: 1.25cqw;
  font-weight: 800;
}
.course-target > span {
  position: absolute;
  bottom: -2cqw;
  background: #fff8e9ed;
  border-radius: 1cqw;
  padding: 0.2cqw 0.8cqw;
  white-space: nowrap;
}
.course-listen {
  position: absolute;
  right: -0.3cqw;
  top: -0.5cqw;
  background: #fff9de;
  border: 0.2cqw solid #d3b881;
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 50%;
  font-size: 1.5cqw;
  z-index: 3;
}
.course-placed {
  position: absolute;
  inset: 13% 7%;
  pointer-events: none;
  display: flex;
  gap: 0.1cqw;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.course-placed .course-item {
  pointer-events: auto;
  width: 4.1cqw;
  height: 4.1cqw;
}
.course-item {
  flex: none;
  width: 4.8cqw;
  height: 4.8cqw;
  border: 0.2cqw solid transparent;
  border-radius: 1.1cqw;
  background: transparent;
  padding: 0.05cqw;
  filter: drop-shadow(0 0.3cqw 0.14cqw #59422030);
  transition:
    background 0.12s,
    transform 0.12s;
}
.course-item span {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.course-item svg {
  width: 100%;
  height: 100%;
  display: block;
}
.course-item:hover:not(:disabled) {
  background: #fff7d080;
}
.course-item.selected {
  background: #fff1a7;
  outline: 0.3cqw solid #d99827;
  transform: translateY(-0.25cqw);
}
.course-item:disabled {
  cursor: default;
  opacity: 1;
}
.course-ground {
  position: absolute;
  left: 14%;
  right: 17%;
  bottom: 0;
  height: 25%;
  border-radius: 1.5cqw;
  background: linear-gradient(#e7d09dd9, #c4ad76e6);
  box-shadow:
    0 0.5cqw 0.8cqw #4f4c252b,
    inset 0 0.2cqw #fff2ce;
  display: flex;
  align-items: center;
  padding: 0 0.8cqw;
}
.course-return {
  position: absolute;
  left: 0;
  top: -2.1cqw;
  font-size: 1.05cqw;
  font-weight: 800;
  border: 0;
  border-radius: 0.7cqw;
  background: #fdf1cde8;
  padding: 0.25cqw 0.7cqw;
}
.course-materials {
  width: 100%;
  display: flex;
  gap: 0.2cqw;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.course-controls {
  position: absolute;
  right: 0;
  top: 21%;
  bottom: 0;
  width: 15.2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.7cqw;
}
.course-controls small {
  font-size: 1cqw;
  text-align: center;
}
.course-number-label {
  text-align: center;
  font-size: 1.25cqw;
  font-weight: 800;
}
.course-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6cqw;
}
.course-number {
  background: #fff5d9;
  border: 0.25cqw solid #d6bc86;
  border-radius: 1cqw;
  font-size: 2.3cqw;
  font-weight: 900;
  height: 4.5cqw;
}
.course-number.selected {
  background: #ffe596;
  border-color: #9a692a;
  box-shadow: 0 0 0 0.15cqw #fff6c7;
}
.course-friend {
  position: absolute;
  top: -5cqw;
  left: calc(50% - 3.4cqw);
  height: 6cqw;
  width: 6.8cqw;
  z-index: -1;
}
.course-friend svg {
  width: 100%;
  height: 100%;
}
.course-destination.cart {
  border-bottom: 1cqw solid #a46643;
  border-radius: 1cqw;
}
.course-destination.cart:after {
  content: "●　　　　 ●";
  position: absolute;
  bottom: -2.8cqw;
  left: 25%;
  font-size: 3cqw;
  line-height: 1;
  color: #715540;
}
.course-destination.cart .course-target,
.course-destination.lift .course-target {
  border-radius: 1.3cqw;
  background: repeating-linear-gradient(
    0deg,
    #dfb17ccc 0,
    #dfb17ccc 1cqw,
    #c69164 1.1cqw
  );
  background-color: #dab886;
}
.course-destination.garden .course-target {
  border-radius: 2cqw;
  background: #987752cf;
  border: 0.4cqw solid #c49a64;
}
.course-building {
  position: relative;
  width: 100%;
  height: 100%;
}
.course-architecture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.course-building .course-zone {
  position: absolute;
  width: 17%;
  height: 35%;
}
.course-building .course-target {
  border-radius: 1cqw;
  background: #fff9e8b5;
}
.course-building .course-target > span {
  font-size: 0.95cqw;
  bottom: -1.4cqw;
}
.course-building .course-placed {
  inset: 3%;
}
.course-building .course-item {
  width: 6cqw;
  height: 6cqw;
}
.course-outline {
  position: absolute;
  inset: 6%;
  opacity: 0.22;
  pointer-events: none;
}
.course-outline svg {
  width: 100%;
  height: 100%;
}
.course-track {
  position: absolute;
  inset: 15% 0 8%;
  display: flex;
  align-items: center;
  gap: 0.25cqw;
  border-bottom: 0.8cqw double #866a46;
}
.course-fixed,
.course-track .course-zone {
  flex: 1;
  min-width: 0;
  height: 6.3cqw;
}
.course-fixed svg {
  width: 100%;
  height: 100%;
}
.course-engine {
  width: 6cqw;
  flex: none;
}
.course-engine svg {
  width: 100%;
}
.course-track .course-target {
  border-radius: 1cqw;
  background: #fff7df99;
}
.course-track .course-target > span {
  font-size: 0.85cqw;
  bottom: -2.7cqw;
  white-space: normal;
  width: 100%;
  text-align: center;
}
.course-track .course-placed {
  inset: 0;
  align-content: center;
}
.course-track .course-item {
  width: 100%;
  height: 5.5cqw;
}
.course-track .course-listen {
  width: 2.1cqw;
  height: 2.1cqw;
  font-size: 1.2cqw;
  top: -1.6cqw;
}
.course-celebration {
  text-align: center;
  font-size: 1.7cqw;
  background: #fff1c9dc;
  padding: 1cqw;
  border-radius: 1cqw;
}
.course-complete {
  text-align: center;
  padding: 0.6cqw;
  border-radius: 1.4cqw;
  background: #fff4dbea;
}
.course-complete svg {
  width: 5cqw;
  height: 5cqw;
  display: block;
  margin: auto;
}
.course-complete strong {
  font-size: 1.5cqw;
  display: block;
}
.course-complete small {
  display: block;
  margin-top: 0.6cqw;
}
.is-celebrating .course-playfield {
  filter: drop-shadow(0 0 1.2cqw #ffe081);
}
.is-celebrating .course-placed .course-item {
  animation: course-celebrate 900ms ease-in-out;
}
.course-scene[data-phase="complete"] .course-playfield {
  filter: drop-shadow(0 0 1cqw #ffe081);
}
@keyframes course-celebrate {
  25% {
    transform: translateY(-.5cqw) scale(1.09);
  }
  60% {
    transform: translateY(-.15cqw) scale(1.03);
  }
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .course-scene * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 680px) {
  .course-mission p {
    font-size: 1.65cqw;
  }
  .course-button {
    font-size: 1.35cqw;
    min-height: 3.8cqw;
  }
  .course-mission {
    left: 8%;
  }
  .course-item {
    width: 5cqw;
    height: 5cqw;
  }
  .course-ground {
    height: 27%;
  }
  .course-target > span {
    font-size: 1.35cqw;
  }
  .course-controls {
    gap: 0.55cqw;
  }
  .course-listen {
    width: 3.6cqw;
    height: 3.6cqw;
  }
  .course-track .course-listen {
    width: 2.8cqw;
    height: 2.8cqw;
  }
}
.course-scene[data-selecting="true"] .course-target {
  z-index: 2;
  background: transparent;
  box-shadow: none;
  border-style: solid;
  border-color: #f3c459;
}
.course-scene[data-selecting="true"] .course-item.selected {
  position: relative;
  z-index: 3;
}
@media (max-width: 680px) {
  .course-mission p {
    font-size: 11px;
    line-height: 1.35;
  }
  .course-button {
    font-size: 10px;
  }
  .course-round {
    font-size: 10px;
  }
  .course-target > span,
  .course-building .course-target > span,
  .course-track .course-target > span {
    font-size: 9px;
  }
  .course-return,
  .course-controls small {
    font-size: 9px;
  }
  .course-number-label {
    font-size: 10px;
  }
  .course-number {
    font-size: 18px;
  }
  .course-celebration,
  .course-complete strong {
    font-size: 12px;
  }
  .course-listen {
    font-size: 13px;
  }
  .course-track .course-listen {
    font-size: 11px;
  }
}
.course-scene.performing[data-mode="sequence"] .course-track,
.course-scene.performing[data-recipe="car"] .course-building,
.course-scene.performing[data-recipe="send"] .course-destinations {
  animation: course-ride 1.1s ease-in-out;
}
.course-scene.performing[data-recipe="delivery"] .course-destinations {
  animation: course-lift 1.1s ease-in-out;
}
.course-scene.performing[data-recipe="garden"] .course-item {
  animation: course-grow 1s ease-out;
}
.course-scene.performing[data-recipe="windows"] .course-placed,
.course-scene.performing[data-recipe="house"] .course-placed {
  animation: course-window 1.1s ease-in-out;
}
@keyframes course-ride {
  40% {
    transform: translateX(3cqw) rotate(-1deg);
  }
  70% {
    transform: translateX(-1cqw);
  }
}
@keyframes course-lift {
  50% {
    transform: translateY(-3cqw);
  }
}
@keyframes course-grow {
  50% {
    transform: translateY(-1cqw) scale(1.25);
    filter: drop-shadow(0 0 1cqw #ffe890);
  }
}
@keyframes course-window {
  50% {
    filter: drop-shadow(0 0 2cqw #fff19c);
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .course-scene * {
    animation: none !important;
  }
}
.course-zone.hinted > .course-target,
.course-item.hinted {
  outline: 0.3cqw solid #ffe77e;
  box-shadow: 0 0 1.5cqw #ffdf65;
}
.course-source-group {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  min-height: 6cqw;
  border-radius: 1cqw;
  background: #fff1c44d;
  border: 0.15cqw solid #c3a16a;
}
.course-source-group small {
  position: absolute;
  bottom: -1cqw;
  left: calc(50% - 2cqw);
  font-size: max(9px, 1cqw);
  font-weight: bold;
  color: #775b37;
  background: #f3e3b9;
  border-radius: 0.6cqw;
  padding: 0.1cqw 0.4cqw;
}
/* Keep the illustrated companion visible along the left edge. */
.course-playfield,
.course-ground {
  left: 25%;
}
.course-mission {
  left: 25%;
}
button.course-fixed {
  padding: 0;
  border: 0;
  background: transparent;
  border-bottom: 0.45cqw solid #bd9361;
  border-radius: 0.8cqw;
  filter: drop-shadow(0 0.3cqw 0.2cqw #654a3930);
}
button.course-fixed:hover {
  background: #fff0c659;
}