.coding-v2-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

#scene-coding > .tool-lab { display: none; }

.coding-v2-character {
  position: absolute;
  z-index: 5;
  left: 30.5%;
  top: 35%;
  display: block;
  width: 39%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transform: translateX(0) scale(.93);
  transform-origin: center center;
  transition: transform .5s ease-in-out;
}

.coding-v2-character-idle.is-shifted {
  transform: translateX(-120px) scale(.93);
}

.coding-workstation-entry {
  position: absolute;
  z-index: 6;
  left: 47.35%;
  top: 59.4%;
  width: 5.35%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease,visibility .35s ease,transform .2s,filter .2s;
}

#scene-coding.coding-workstation-ready > .coding-workstation-entry {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.coding-workstation-entry img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  animation: codingGuideUp 1.8s ease-in-out infinite;
}

.coding-workstation-entry:hover,
.coding-workstation-entry:focus-visible {
  transform: scale(1.09);
  filter: drop-shadow(0 6px 7px rgba(31,52,66,.3));
  outline: 0;
}

.coding-workstation-entry:hover img,
.coding-workstation-entry:focus-visible img { animation-play-state: paused; }

@keyframes codingGuideUp {
  0%,100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-5%); filter: brightness(1.12); }
}

.coding-v2-character.is-playing {
  opacity: 1;
  visibility: visible;
}

.coding-v2-ui,
.coding-v2-entry {
  position: absolute;
  z-index: 10;
  width: var(--corner-icon-size);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .2s ease;
}

.coding-v2-ui img,
.coding-v2-entry img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.coding-v2-ui:hover,
.coding-v2-ui:focus-visible,
.coding-v2-entry:hover,
.coding-v2-entry:focus-visible {
  transform: scale(1.08);
  outline: 0;
}

.coding-v2-return { left: var(--corner-icon-left); top: var(--corner-icon-top); }
.coding-v2-sound { right: var(--corner-sound-right); top: var(--corner-icon-top); }
.coding-v2-voice { right: var(--corner-settings-right); top: var(--corner-icon-top); }
.coding-v2-entry { top: 43.23%; width: 4.54%; }
.coding-v2-prev { left: 2.95%; }
.coding-v2-next { right: 2.95%; }
.coding-v2-sound[aria-pressed="true"] { filter: drop-shadow(0 0 10px #fff); }

.game:has(#scene-coding.active) > .hud,
.game:has(#scene-coding.active) > .dialogue,
.game:has(#scene-coding.active) > .hint { display: none; }