/* --- Los Emarsinso */
.simpsons { background: #1b1b1b; border-color: #ffe766 #8a6d00 #4d3c00 #ffd90f; padding: 10px; }
.simp-stage {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 14px / 12px; overflow: hidden; cursor: pointer;
  background: #7cc0ef; container-type: inline-size;
  box-shadow: inset 0 0 0 3px #0c0c0c, 0 0 0 3px #3a3a3a, 0 6px 16px rgba(0, 0, 0, 0.55);
}
.simp-stage:focus-visible { outline: 3px solid #ffd90f; outline-offset: 3px; }
.simp-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.simp-cap {
  position: absolute; left: 4cqw; right: 4cqw; bottom: 3.4cqw; margin: 0;
  font-family: var(--f-lider); font-weight: 800; font-size: clamp(14px, 4.2cqw, 26px); line-height: 1.15;
  text-align: center; color: #fff; pointer-events: none;
  text-shadow: 0 0 3px #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
  opacity: 0; transform: translateY(6px); transition: opacity 0.15s, transform 0.15s;
}
.simp-cap.on { opacity: 1; transform: none; }
.simp-hint {
  margin: 8px 2px 0; font-family: var(--comic); font-weight: 700; font-size: 13px; color: #ffd90f;
  display: flex; justify-content: space-between; gap: 8px;
}
.simp-hint span { color: #bbb; font-weight: 400; }
@media (max-width: 760px) {
  .simpsons { order: 11; padding: 6px; }
}
.simp-frame { position: relative; }
/* invisible hotspot over Barsinso for keyboard users; the mouse goes through to the canvas hit-test */
.simp-bart {
  position: absolute; left: 33%; top: 39%; width: 12%; height: 36%;
  padding: 0; margin: 0; border: 0; border-radius: 40% 40% 12px 12px; background: none;
  pointer-events: none; cursor: pointer;
}
.simp-bart:focus-visible { outline: 3px dashed #e00000; outline-offset: 2px; }